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

 

【android】環形進度條實現