Android自定義實現圓形播放進度條

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

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

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

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

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

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

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

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

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

1. public class CircleProgress extends View{
4. private static final int DEFAULT_MAX_VALUE = 100; // 默認進度條最大值
5. private static final int DEFAULT_PAINT_WIDTH = 10; // 默認畫筆寬度
6. private static final int DEFAULT_PAINT_COLOR = 0xffffcc00; // 默認畫筆顏色
7. private static final boolean DEFAULT_FILL_MODE = true; // 默認填充模式
8. private static final int DEFAULT_INSIDE_VALUE = 0; // 默認縮進距離
11. private CircleAttribute mCircleAttribute; // 圓形進度條基本屬性
13. private int mMaxProgress; // 進度條最大值
14. private int mMainCurProgress; // 主進度條當前值
15. private int mSubCurProgress; // 子進度條當前值
17. private CartoomEngine mCartoomEngine; // 動畫引擎
19. 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點鐘方向）
10. public Paint mMainPaints; // 主進度條畫筆
11. public Paint mSubPaint; // 子進度條畫筆
13. 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);
5. if (mBackgroundPicture == null) // 沒背景圖的話就繪制底色
6. {
7. canvas.drawArc(mCircleAttribute.mRoundOval, 0, 360, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mBottomPaint);
8. }
11. float subRate = (float)mSubCurProgress / mMaxProgress;
12. float subSweep = 360 * subRate;
13. canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, subSweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mSubPaint);
15. float rate = (float)mMainCurProgress / mMaxProgress;
16. float sweep = 360 * rate;
17. canvas.drawArc(mCircleAttribute.mRoundOval, mCircleAttribute.mDrawPos, sweep, mCircleAttribute.mBRoundPaintsFill, mCircleAttribute.mMainPaints);
20. }