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 - 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);
     }