【android】環形進度條實現

先上效果圖（壓縮尺寸后出現鋸齒,原圖邊緣很細膩的喂~）

特性：

1：支持環形帶字 、環形不帶字（中間蓋上圓形圖片，實現天天動聽播放器在通知欄播放進度的效果）、實心

2：線程安全，不需要寫handler來改變UI

3:自定義大小、顏色、邊框粗細

代碼來源於網上，並在此基礎上加以修改

 

思路如下，創建一個View的子類，在OnDraw方法里面

1：第一次繪畫，畫出圓形背景

2：第二次繪畫，按照百分比畫出弧形進度（）

 如果顯示文字，則居中畫出文字。

 

幸運的是canvas對象已經給我們提供了繪制各種形狀的方法了

畫圓：drawCircle

畫字：drawText

畫弧度：drawArc

 

因此繪制核心代碼如下：完整項目下載

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //刻度背景
        int center = (int) (getWidth() * 0.5f);
        int radius = (int) (center - mHalfBorder); //圓環的半徑
        mPaint.setColor(mBackColor); //設置圓環的顏色
        mPaint.setStyle(style); //設置空心
        mPaint.setStrokeWidth(mBorderWidth); //設置圓環的寬度
        mPaint.setAntiAlias(true);  //消除鋸齒
        canvas.drawCircle(center, center, radius, mPaint); //畫出圓環

        int percent = (int) (value * 100f / max);
        //文本
        if (mMode == STROKE_TEXT) {
            mPaint.setStrokeWidth(0);
            mPaint.setColor(mTextColor);
            mPaint.setTextSize(mTextSize);
            mPaint.setTypeface(Typeface.DEFAULT_BOLD); //設置字體

            float textHalfWidth = mPaint.measureText(percent + "%")*0.5f;
            canvas.drawText(percent + "%", center - textHalfWidth, center +textHalfSize,
            mPaint);
        }

        //進度
        if (value>0) {

            mPaint.setStrokeWidth(mBorderWidth);
            mPaint.setColor(mFontColor);
            RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
            int angle = (int) (360 * percent / 100f);
            mPaint.setStyle(style);
            canvas.drawArc(oval, startPos, angle, isFill, mPaint);
        }
    }