Wheel ProgressBar 實現之一——畫一條弧

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)
（http://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 - w13. 具體實現：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);     }4、完整的工程請下載：CustomArc4. 參考：ProgressWheel: https://github.com/Todd-Davies/ProgressWheel