1. 實現原理:
Wheel ProgressBar(滾動式進度條),在原生的 android 進度條中隻有 indeterminate 式的滾動進度條,現在我們來實現一個 determinate 式進度條,就是可以顯示具體進度的滾動式進度條,實現的效果形如下圖所示:
我們分三個步驟來講解:
1、如何準確畫一條弧;
2、如何準確畫出進度文本;
3、如何動態模擬進度過程。
這三個步驟基本已經說明瞭確定型滾動進度條的實現原理:根據進度動態地畫出圓弧並顯示進度文本。
2. 畫弧原理:
在 android 中畫出一條弧,需要先給出一個矩形區域,然後在限定的矩形區域內按照設定的畫筆參數、起點度數、弧的跨度就可以畫出一條需要的弧來。具體的接口是 android.graphics.Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) (https://developer.android.com/reference/android/graphics/Canvas.html#drawArc(android.graphics.RectF, float, float, boolean, android.graphics.Paint))
這裡著重需要講解的是如何準確畫出一條限定區域內的弧。為瞭描述方便,我們以一個360度的弧(即一個圓)為例,先看一個示意圖:
如圖所示,假設我們要畫一個寬度為 w1 那麼粗的圓弧 Arc,那麼我們知道要先設定一個正方形的區域 R_XX,如圖中有兩個區域:R_out 和 R_in,R_out 和 R_in 之間的間隔為 w2 = w1/2。相信不少人一開始就會選擇 R_out,而事實上,在 android 中畫圓弧時,R_in 才是正確的選擇,即,我們要畫一個直徑為 d,粗度為 w 的圓弧,與必須設定的繪畫正方形區域的大小 size 的關系為:
size = d – w
即在上圖中有如下關系:
R_in_size = R_out_size – w1
3. 具體實現:
1、自定義一個類 CustomArc,繼承自 View;
2、重寫 onAttachedToWindow() 方法,設置圓弧正方形區域(RectF mArcBounds;)和畫筆參數(Paint mArcPaint;):
@Override
public void onAttachedToWindow() {
super.onAttachedToWindow();
mArcBounds = new RectF((mArcWidth+1)/2, (mArcWidth+1)/2,
getLayoutParams().width – (mArcWidth+1)/2,
getLayoutParams().height – (mArcWidth+1)/2);
mArcPaint.setColor(mArcColor);
mArcPaint.setAntiAlias(true);
mArcPaint.setStyle(Style.STROKE);
mArcPaint.setStrokeWidth(mArcWidth);
invalidate();
}
特別註意其中的粗體代碼部分:mArcWidth+1,由於像素值是整數,當畫筆的粗度(即圓弧的粗度 mArcWidth)為奇數時,設定的正方形區域與實際理想的區域的寬高值會有一個像素的誤差,這時我們應當取偏小的區域,以保證畫出的圓弧四周不會向外溢出一個像素。
3、重寫 onDraw() 方法,畫出圓弧:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(mArcBounds, -90, 360, false, mArcPaint);
}