Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Wheel ProgressBar 實現之一——畫一條弧

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

編輯:關於Android編程

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


 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved