Android開發自定義控制元件實現一個圓形進度條【帶數值和動畫】

實現一個如下圖所示的自定義控制元件，可以直觀地展示某個球隊在某個賽季的積分數和勝場、負場、平局數

首先對畫布進行區域劃分，整個控制元件分上下兩部分

上邊是個大的圓環，圓環中間兩行文字，沒什麼難度，選好圓心座標和半徑後直接繪製即可，繪製文字也是如此。

下部分是三個小的圓弧進度條，弧的末端繪製一個小的實心圓

首先選好座標和半徑，然後先繪製三個圓環作為弧形進度條的背景

之後從12點鐘開始繪製進度弧，知道了圓環的圓心和半徑，也知道了弧對應於12點鐘和圓環圓心的偏移角度

通過三角函式可以計算出進度弧終點座標，以進度弧終點座標為圓心繪製一個小的實心圓即可

動畫效果通過Handler的postDelayed方法觸發重繪即可實現

在專案中的效果如圖所示：

測試程式碼如下：

final Random random=new Random();
final ScoreBoardView myView=(ScoreBoardView)findViewById(R.id.custom_view);
myView.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View v){
        myView.setColor(Color.BLUE);
        myView.setScore(random.nextInt(28));
        myView.setWinDrawLose(random.nextInt(12),random.nextInt(15),random.nextInt(26));
    }
});

完整程式碼如下:

public class ScoreBoardView extends View {
    private Context context;
    /*弧的顏色*/
    private int mColor;
    /*積分數，勝場數，平局數，負場數*/
    private int mScore, mWinNumber, mDrawNumber, mLoseNumber;
    /*傳入數字的最大值*/
    private final int FULL_SCORE = 30;
    /*動畫插值器*/
    DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
    /*動畫持續時間（重新整理次數）*/
    private int mDuration = 10;
    /*動畫重新整理過程中的當前值*/
    private int mCurrentTime = 0;
    private TypedValue typedValue;
    private TypedValue typedValue1;
    private Handler mHandler = new Handler();
    private Runnable mAnimation = new Runnable() {
        @Override
        public void run() {
            if (mCurrentTime < mDuration) {
                mCurrentTime++;
                /*導致重繪呼叫onDraw，onDraw最後再次postDelay執行此動畫，直到達到指定的次數*/
                ScoreBoardView.this.invalidate();
            }
        }
    };
    /*繪製圖形*/
    private Paint paint = new Paint();
    /*繪製文字*/
    private Paint paintText = new Paint();

    public ScoreBoardView(Context context) {
        super(context);
        this.context=context;
        init();
    }

    public ScoreBoardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        init();
    }

    public ScoreBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        init();
    }
    
    private void init() {
        /*資料初始化，預設屬性*/
        mColor = Color.rgb(95, 112, 72);
        mScore = 0;
        mWinNumber = 0;
        mDrawNumber = 0;
        mLoseNumber = 0;
        typedValue=new TypedValue();
        typedValue1=new TypedValue();
        context.getTheme().resolveAttribute(R.attr.maintextclor, typedValue, true);
        context.getTheme().resolveAttribute(R.attr.maintextclor_reverse,typedValue1,true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /*獲取控制元件總的寬高*/
        float totalWidth = getWidth();
        float totalHeight = getHeight();
        /*
        * DecelerateInterpolator：動畫從開始到結束，變化率是一個減速的過程。
        * AccelerateInterpolator：動畫從開始到結束，變化率是一個加速的過程。
        * CycleInterpolator：動畫從開始到結束，變化率是迴圈給定次數的正弦曲線
        * AccelerateDecelerateInterpolator：動畫從開始到結束，變化率是先加速後減速的過程。
        * LinearInterpolator：動畫從開始到結束，變化率是線性變化。
        * */
        /*計算當前時刻動畫進度值*/
        float AnimCurrentValue =mDecelerateInterpolator.getInterpolation(1.0f * mCurrentTime / mDuration);

        /*圖形畫筆設定*/
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);

        /*積分數，上邊的大圓*/
        paint.setStrokeWidth(4);
        paint.setColor(mColor);
        /*積分大圓的中心座標和半徑*/
        float score_radius = totalHeight * 1 / 5, score_circle_x = totalWidth / 2, score_circle_y = totalHeight / 3;
        /*繪製圓弧*/
        canvas.drawCircle(score_circle_x, score_circle_y, score_radius, paint);
        /*文字畫筆基本設定*/
        paintText.setAntiAlias(true);
        paintText.setStyle(Paint.Style.STROKE);
        /*文字從中間開始繪製*/
        /*Paint.Align.CENTER：The text is drawn centered horizontally on the x,y origin*/
        paintText.setTextAlign(Paint.Align.CENTER);
        /*文字畫筆大小和顏色設定*/
        paintText.setTextSize(score_radius * 3 / 4);
        paintText.setColor(getResources().getColor(typedValue.resourceId));
        /*圓心位置繪製積分數值*/
        canvas.drawText("" + mScore, score_circle_x, score_circle_y, paintText);
        /*縮小字型繪製文字資訊*/
        paintText.setTextSize(score_radius * 1 / 4);
        paintText.setAlpha(80);
        /*圓心下邊繪製文字*/
        canvas.drawText("積分", score_circle_x, score_circle_y + score_radius / 2, paintText);

        /*設定畫筆，畫下邊的三個小圓*/
        paint.setStrokeWidth(4);
        paint.setAlpha(255);
        /*下邊三個小圓的半徑*/
        float small_radius = totalHeight / 10;
        /*三個小圓的圓心的x座標*/
        float[] circleXs = new float[]{totalWidth / 2 - score_radius * 3 / 2,
                                        totalWidth / 2,
                                        totalWidth / 2 + score_radius * 3 / 2};
        /*三個小圓的圓心的y座標*/
        float circleY = totalHeight * 3 / 4;
        /*計算三個小圓弧掃過的角度*/
        float[] theta_values = new float[]{360 * mWinNumber / FULL_SCORE* AnimCurrentValue,
                                            360 * mDrawNumber / FULL_SCORE* AnimCurrentValue,
                                            360 * mLoseNumber / FULL_SCORE* AnimCurrentValue};
        /*設定畫筆顏色，繪製外圍圓環*/
        paint.setColor(getResources().getColor(typedValue1.resourceId));
        /*分別繪製三個外圍圓環*/
        canvas.drawCircle(circleXs[0], circleY, small_radius, paint);//畫WIN背景圓
        canvas.drawCircle(circleXs[1], circleY, small_radius, paint);//畫DRAW背景圓
        canvas.drawCircle(circleXs[2], circleY, small_radius, paint);//畫LOSE背景圓
        /*更改畫筆顏色，繪製圓弧進度條*/
        paint.setColor(mColor);
        /*drawArc的起始角度是3點鐘方向，因此要從12點鐘方向開始繪製，起始角度為270度*/
        canvas.drawArc(new RectF(circleXs[0] - small_radius,
                                 circleY - small_radius,
                                 circleXs[0] + small_radius,
                                 circleY + small_radius),
                        270, theta_values[0], false, paint);//畫WIN圓形進度條
        canvas.drawArc(new RectF(circleXs[1] - small_radius,
                                 circleY - small_radius,
                                 circleXs[1] + small_radius,
                                 circleY + small_radius),
                        270, theta_values[1], false, paint);//畫DRAW圓形進度條
        canvas.drawArc(new RectF(circleXs[2] - small_radius,
                                 circleY - small_radius,
                                 circleXs[2] + small_radius,
                                 circleY + small_radius),
                        270, theta_values[2], false, paint);//畫LOSE圓形進度條
        /*繪製圓弧結束處的小圓點，實心圓*/
        paint.setStyle(Paint.Style.FILL);
        /*已知半徑、圓心位置、便宜角度，根據三角函式很方便計算出小實心圓圓心座標*/
        canvas.drawCircle(circleXs[0] + small_radius * (float) Math.sin(theta_values[0] * Math.PI / 180),
                circleY - small_radius * (float) Math.cos(theta_values[0] * Math.PI / 180), 6, paint);//畫WIN末尾小圓點
        canvas.drawCircle(circleXs[1] + small_radius * (float) Math.sin(theta_values[1] * Math.PI / 180),
                circleY - small_radius * (float) Math.cos(theta_values[1] * Math.PI / 180), 6, paint);//畫DRAW末尾小圓點
        canvas.drawCircle(circleXs[2] + small_radius * (float) Math.sin(theta_values[2] * Math.PI / 180),
                circleY - small_radius * (float) Math.cos(theta_values[2] * Math.PI / 180), 6, paint);//畫LOSE末尾小圓點

        /*繪製文字*/
        paintText.setColor(getResources().getColor(typedValue.resourceId));
        paintText.setTextSize(small_radius * 2 / 3);
        /*測量文字大小，確定繪製文字時垂直方向的位置*/
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        /*在三個小圓的正中心位置繪製相應的數字*/
        canvas.drawText("" + (int)(mWinNumber * AnimCurrentValue), circleXs[0], circleY + textBaseLineOffset, paintText);
        canvas.drawText("" + (int)(mDrawNumber * AnimCurrentValue), circleXs[1], circleY + textBaseLineOffset, paintText);
        canvas.drawText("" + (int)(mLoseNumber * AnimCurrentValue), circleXs[2], circleY + textBaseLineOffset, paintText);
        /*調整字型大小，繪製文字資訊*/
        paintText.setTextSize(small_radius * 4 / 9);
        canvas.drawText("勝場", circleXs[0], circleY - small_radius*4/3, paintText);
        canvas.drawText("平局", circleXs[1], circleY - small_radius*4/3, paintText);
        canvas.drawText("負場", circleXs[2], circleY - small_radius*4/3, paintText);
        /*20ms重新整理一次資料*/
        mHandler.postDelayed(mAnimation, 20);//啟動動畫
    }

    public void setColor(int mColor) {
        this.mColor = mColor;
        invalidate();
    }

    public void setScore(int score) {
        this.mScore = score;
        invalidate();
    }

    public void setWinDrawLose(int win,int draw,int lose) {
        this.mWinNumber = win;
        this.mDrawNumber = draw;
        this.mLoseNumber = lose;
        mCurrentTime =0;
        invalidate();
    }
}