自定義實現圓形播放進度條（Android，飛一般的感覺）。

廢話不多說，先上效果圖：

Android提供了很多基本的控制元件實現，但不是一個完整、強大的實現。

幸運的是，Android提供了自定義控制元件的實現，有了自定義控制元件，我們就可以再Android的基礎控制元件上實現我們想要的功能或者自定義的外觀。

以ProgressBar為例，對於可調節的進度條似乎只有長條形的ProgressBar（圓形的都是不停轉動的那種）

假如我們想要一個可調節進度的圓形進度條呢。。。

Ok，下面我們直接切入主題(關於自定義控制元件的相關實現細節就不多說了，還不太清楚的童鞋先找相關資料補習一下)

該自定義控制元件的實現思路是繼承自View，然後重寫onDraw

先看看該類有哪些成員變數：

1. public class CircleProgress extends View{  
2.      private  static final int DEFAULT_MAX_VALUE = 100;         // 預設進度條最大值   
3.      private  static final int DEFAULT_PAINT_WIDTH = 10;            // 預設畫筆寬度   
4.      private  static final int DEFAULT_PAINT_COLOR = 0xffffcc00
   ;        // 預設畫筆顏色   
5.      private  static final boolean DEFAULT_FILL_MODE = true;        // 預設填充模式   
6.      private  static final int DEFAULT_INSIDE_VALUE = 0;            // 預設縮排距離   
7.      private CircleAttribute mCircleAttribute;              // 圓形進度條基本屬性   
8.      private int mMaxProgress;                      // 進度條最大值                                                                                                                        
     
9.      private int mMainCurProgress;                      // 主進度條當前值    
10.      private int mSubCurProgress;                       // 子進度條當前值    
11.      private CartoomEngine mCartoomEngine;                  // 動畫引擎   
12.      private Drawable mBackgroundPicture;                   // 背景圖  

1. class CircleAttribute  
2.     {  
3.          public RectF   mRoundOval;             // 圓形所在矩形區域   
4.          public boolean mBRoundPaintsFill;          // 是否填充以填充模式繪製圓形   
5.          public int     mSidePaintInterval;         // 圓形向裡縮排的距離   
6.          public int     mPaintWidth;                // 圓形畫筆寬度（填充模式下無視）   
7.          public int     mPaintColor;                // 畫筆顏色  （即主進度條畫筆顏色，子進度條畫筆顏色為其半透明值）    
8.          public int     mDrawPos;               // 繪製圓形的起點（預設為-90度即12點鐘方向）   
9.          public Paint   mMainPaints;                // 主進度條畫筆          
10.          public Paint   mSubPaint;                  // 子進度條畫筆    
11.          public Paint   mBottomPaint;               // 無背景圖時繪製所用畫筆  

1. class CartoomEngine  
2. {  
3.     public Handler mHandler;   
4.     public boolean mBCartoom;               // 是否正在作動畫    
5.     public Timer   mTimer;                  // 用於作動畫的TIMER    
6.     public       MyTimerTask    mTimerTask;     // 動畫任務   
7.     public int   mSaveMax;              // 在作動畫時會臨時改變MAX值，該變數用於儲存值以便恢復      
8.     public int     mTimerInterval;              // 定時器觸發間隔時間(ms)        
9.     public float   mCurFloatProcess;            // 作動畫時當前進度值   

下面看看onDraw的程式碼片段：

1. public void onDraw(Canvas canvas) {  
2.         // TODO Auto-generated method stub   
3.         super.onDraw(canvas);  
4.         if (mBackgroundPicture == null)                                 // 沒背景圖的話就繪製底色   
5.         {  
6.             canvas.drawArc(mCircleAttribute.mRoundOval, 0, 360, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mBottomPaint);  
7.         }  
8.         float subRate = (float)mSubCurProgress / mMaxProgress;  
9.         float subSweep = 360 * subRate;  
10.         canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, subSweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mSubPaint);  
11.         float rate = (float)mMainCurProgress / mMaxProgress;  
12.         float sweep = 360 * rate;  
13.         canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, sweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mMainPaints);  
14.     }  

canvas的drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 方法是關鍵
相關引數說明大家詳看SDK文件

控制元件大小決定oval
畫筆屬性設定paint
useCenter表示是否填充
startAngle是繪製圓弧的起點，我們使用-90度，即12點鐘方向
sweepAngle是從起點順時針繪製覆蓋的角度，意味著進度值為30%的話，就是 360 * 30%

設定進度的程式碼片段：

1. public synchronized void setMainProgress (int progress)  
2.  {  
3.         mMainCurProgress = progress;  
4.         if (mMainCurProgress < 0)  
5.         {  
6.             mMainCurProgress = 0;  
7.         }  
8.         if (mMainCurProgress > mMaxProgress)  
9.         {  
10.             mMainCurProgress = mMaxProgress;  
11.         }  
12.         invalidate();  
13. }  

設定進度值之後觸發重繪，計算sweepAngle的值，最後完成繪製效果，怎麼樣，是不是就對上了
 
該控制元件的自定義屬性如下：

1. <?xml version="1.0" encoding="utf-8"?>    
2. lt;resources>   
3.    <declare-styleable name="CircleProgressBar">    
4.        <attr name="max" format="integer"/>                <!-- 進度條最大值 -->  
5.        <attr name="fill" format="boolean"/>           <!-- 是否填充圓形區域 -->  
6.        <attr name="Paint_Width" format="integer"/>        <!-- 畫筆寬度，填充模式下無效，會被重置為0 -->  
7.        <attr name="Paint_Color" format="integer"/>        <!-- 畫筆顏色 -->  
8.        <attr name="Inside_Interval" format="integer"/> <!-- 圓形區域向裡縮排的距離 -->   
9.    </declare-styleable>    
10. lt;/resources>   

再貼上本例的佈局檔案：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
3.     xmlns:roundProgress="http://schemas.android.com/apk/res/com.genius.progress"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:orientation="vertical"   
7.     android:background="#ffffff">  
8.     <LinearLayout   
9.     android:layout_height="wrap_content"   
10.     android:layout_width="match_parent"   
11.     android:id="@+id/linearLayout1"  
12.     android:orientation="horizontal"  
13.     android:gravity = "center_horizontal">  
14.         <Button   
15.         android:text="增加主進度條"   
16.         android:id="@+id/buttonAddMainPro"   
17.         android:layout_width="wrap_content"   
18.         android:layout_height="wrap_content"  
19.         android:layout_weight="1">  
20.         </Button>  
21.         <Button   
22.         android:text="增加子進度條"   
23.         android:id="@+id/buttonAddSubPro"   
24.         android:layout_width="wrap_content"   
25.         android:layout_height="wrap_content"  
26.         android:layout_weight="1">  
27.         </Button>   
28.         <ImageButton  
29.         android:id="@+id/buttonImage"   
30.         android:layout_width="wrap_content"  
31.         android:layout_height="wrap_content"  
32.         android:src="@drawable/background2"  
33.         android:layout_weight="1" />   
34.     </LinearLayout>  
35.     <LinearLayout   
36.         android:layout_height="wrap_content"   
37.         android:layout_width="match_parent"   
38.         android:id="@+id/linearLayout2"  
39.         android:orientation="horizontal"  
40.         android:background="#ff0000"  
41.         android:gravity = "center_horizontal">  
42.         <com.genius.circle.CircleProgress  
43.         android:id="@+id/roundBar1"  
44.         android:layout_width="wrap_content"    
45.         android:layout_height="wrap_content"  
46.         android:background="@drawable/background1"     
47.         roundProgress:max="100"  
48.         roundProgress:fill = "false"      
49.         roundProgress:Inside_Interval="5"  
50.         roundProgress:Paint_Width = "4"  
51.         roundProgress:Paint_Color = "0xff0000ff"   
52.         />  
53.         <com.genius.circle.CircleProgress   
54.          android:id="@+id/roundBar2"  
55.          android:layout_width="wrap_content"    
56.          android:layout_height="wrap_content"  
57.          android:background="@drawable/background3"        
58.          roundProgress:max="100"  
59.          roundProgress:Inside_Interval="8"  
60.          roundProgress:fill = "true"      
61.          roundProgress:Paint_Width = "4"                   
62.          roundProgress:Paint_Color = "0xffaa5500"   
63.         />  
64.         <com.genius.circle.CircleProgress   
65.          android:id="@+id/roundBar3"  
66.          android:layout_width="96dp"    
67.          android:layout_height="96dp"     
68.          roundProgress:max="100"  
69.          roundProgress:fill="false"  
70.           roundProgress:Paint_Width="40"        
71.          roundProgress:Inside_Interval="20"  
72.         />  
73.     </LinearLayout>  
74.     <LinearLayout   
75.     android:layout_height="wrap_content"   
76.     android:layout_width="match_parent"   
77.     android:id="@+id/linearLayout3"  
78.     android:orientation="horizontal"  
79.     android:gravity = "center_horizontal|center_vertical"  
80.     android:background="#00ff00">    
81.             <Button   
82.             android:text="啟動動畫"   
83.             android:id="@+id/buttonStart"   
84.             android:layout_width="100dip"   
85.             android:layout_height="wrap_content">  
86.             </Button>  
87.             <com.genius.circle.CircleProgress   
88.              android:id="@+id/roundBar4"  
89.              android:layout_width="wrap_content"    
90.              android:layout_height="wrap_content"  
91.              android:background="@drawable/background1"        
92.              roundProgress:Inside_Interval="6"  
93.              roundProgress:Paint_Color = "0xff0000ff"   
94.             />  
95.             <Button   
96.             android:text="停止動畫"   
97.             android:id="@+id/buttonStop"   
98.             android:layout_width="100dip"   
99.             android:layout_height="wrap_content">  
100.             </Button>  
101.     </LinearLayout>  
102. </LinearLayout>  

大家比對下效果圖就明白了

此外該控制元件中有兩個介面是作動畫相關的

public synchronized void  startCartoom(int time)

public synchronized void  stopCartoom()

比如你想播放一個10秒的聲音片段，同時用進度條來表示播放進度，那麼直接呼叫 startCartoom(10)來開啟動畫即可

其他的似乎沒啥好說的了，原始碼工程裡的註釋也寫很清楚了，有興趣的童鞋下下來看看就明白了

附屬工程連結：

具體下載目錄在 /2012年資料/6月/23日/Android自定義實現圓形播放進度條