ProgressBar是一個基本的UI控件, 很多地方多會用到, 登錄時, 訪問加載時, 進行一些耗時的操作的時候, 可以直觀的告訴用戶當前的進度, 或者告訴用戶需要等待, 不然用戶還以為死機了呢!
一些常用的屬性
- max: 進度條的最大值
- progress: 進度條已完成的進度之
- progressDrawable: 設置虧到對應的drawable對象
- indeterminate: 設置不精確顯示進度
- indeterminateDrawable: 設置不顯示進度條的Drawable對象
- indeterminateDuration: 設置不精確顯示進度的持續時間
- secondaryProgress: 設置二級進度條
先來看一看使用現成的一些進度條樣式
<ProgressBar
android:id="@+id/progress1"
style="@android:style/Widget.ProgressBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ProgressBar
android:id="@+id/progress2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/progress1"/>
<ProgressBar
android:id="@+id/progress3"
style="@android:style/Widget.ProgressBar.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/progress2"/>
<ProgressBar
android:id="@+id/progress4"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/progress3"
android:max="100"
android:progress="18"/>
<ProgressBar
android:id="@+id/progress5"
style="@android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/progress4"
android:layout_marginTop="10dp"
android:indeterminate="true"
/>
<ImageView
android:id="@+id/img_pgbar"
android:layout_below="@id/progress5"
android:src="@drawable/amin_bgbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
都很丑啊有沒有
所以需要自定義一個
最后一個是我們自己定義的, 要怎么做呢?
其實就是用一些圖片素材做一個 逐幀動畫
看一下素材:
然后在drawable目錄下創建amin_bgbar.xml文件:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<!--oneshot:是否只展示一遍-->
<item
android:drawable="@drawable/loading_01"
android:duration="200"/>
<item
android:drawable="@drawable/loading_02"
android:duration="200"/>
<item
android:drawable="@drawable/loading_03"
android:duration="200"/>
<item
android:drawable="@drawable/loading_04"
android:duration="200"/>
<item
android:drawable="@drawable/loading_05"
android:duration="200"/>
<item
android:drawable="@drawable/loading_06"
android:duration="200"/>
<item
android:drawable="@drawable/loading_07"
android:duration="200"/>
<item
android:drawable="@drawable/loading_08"
android:duration="200"/>
<item
android:drawable="@drawable/loading_09"
android:duration="200"/>
<item
android:drawable="@drawable/loading_10"
android:duration="200"/>
<item
android:drawable="@drawable/loading_11"
android:duration="200"/>
<item
android:drawable="@drawable/loading_12"
android:duration="200"/>
</animation-list>
oneshot表示是否重復, true表示只播放一次, false表示重復
duration表示展示該圖片的時長
然后在布局文件創建一個ImageView, src引用這個drawable, 之后再MainActivity中
private ImageView img_pgbar;
private AnimationDrawable ad;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
img_pgbar = (ImageView) findViewById(R.id.img_pgbar);
ad = (AnimationDrawable) img_pgbar.getDrawable();
img_pgbar.postDelayed(new Runnable() {
@Override
public void run() {
ad.start();
}
}, 100);
}
不過上面的例子充其量也是一個動畫而已, 并不能顯示當前進度
代碼
public class CircleProgressBar extends View {
private Paint mBackPaint;
private Paint mFrontPaint;
private Paint mTextPaint;
// 畫筆寬度
private float mStrokeWidth = 50;
// 畫筆的一半寬度
private float mHalfStrokeWidth = 50 / 2;
// 半徑
private float mRadius = 200;
private RectF mRect;
// 當前進度
private int mProgress = 0;
// 目標進度
private int mTargetProgress = 90;
// 最大值
private int mMax = 100;
private int mWidth;
private int mHeight;
public CircleProgressBar(Context context) {
this(context, null, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
// 初始化畫筆
private void init() {
// 背景畫筆
mBackPaint = new Paint();
mBackPaint.setColor(Color.WHITE);
mBackPaint.setAntiAlias(true);
mBackPaint.setStyle(Paint.Style.STROKE);
mBackPaint.setStrokeWidth(mStrokeWidth);
// 進度條畫筆
mFrontPaint = new Paint();
mFrontPaint.setColor(Color.GREEN);
mFrontPaint.setAntiAlias(true);
mFrontPaint.setStyle(Paint.Style.STROKE);
mFrontPaint.setStrokeWidth(mStrokeWidth);
// 文本畫筆
mTextPaint = new Paint();
mTextPaint.setColor(Color.GREEN);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(80);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = getRealSize(widthMeasureSpec);
mHeight = getRealSize(heightMeasureSpec);
setMeasuredDimension(mWidth, mHeight);
}
// 計算真實大小
private int getRealSize(int measureSpec) {
int result = 1;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
result = (int) (mRadius * 2 + mStrokeWidth);
} else {
result = size;
}
return result;
}
// 設置當前進度
public void setProgress(int progress) {
mProgress = progress;
invalidate();
}
private void initRect() {
if (mRect == null) {
mRect = new RectF();
int viewSize = (int) (mRadius * 2);
int left = (mWidth - viewSize) / 2;
int top = (mHeight - viewSize) / 2;
int right = left + viewSize;
int bottom = top + viewSize;
mRect.set(left, top, right, bottom);
}
}
@Override
protected void onDraw(Canvas canvas) {
initRect();
float angle = mProgress / (float) mMax * 360;
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth, mHeight / 2 + mHalfStrokeWidth, mTextPaint);
if (mProgress < mTargetProgress) {
mProgress += 1;
// 延遲100毫秒更新
postInvalidateDelayed(100);
}
}
}
關于使用Canvas繪制圖形, 這里又一篇 博客推薦大家看看
