Android自定義控制元件系列之圓形進度條的實現

一、概述

在上一篇博文中，我們給大家介紹了Android自定義控制元件系列的基礎篇。連結：http://www.codeceo.com/article/android-basic.html

這一篇博文中，我們將在基礎篇的基礎上，再通過重寫ondraw（）方法和自定義屬性實現圓形進度條，效果如圖所示：

二、實現步驟

1、  編寫自定義元件MyCircleProgress擴充套件View

public class MyCircleProgress extends View {
…    
}

2、  在MyCircleProgress類中，定製屬性

    public int progress  = 0;//進度實際值,當前進度
    /**
     * 自定義控制元件屬性，可靈活的設定圓形進度條的大小、顏色、型別等
     */
    private int mR;//圓半徑，決定圓大小
    private int bgColor;//圓或弧的背景顏色
    private int fgColor;//圓或弧的前景顏色，即繪製時的顏色
    private int drawStyle; //繪製型別 FILL畫圓形進度條，STROKE繪製弧形進度條
            private int strokeWidth;//STROKE繪製弧形的弧線的寬度
    private int max;//最大值，設定進度的最大值
  /** 
     * 設定進度，此為執行緒安全控制元件，由於考慮多線的問題，需要同步 
     */  
    public synchronized void setProgress(int progress) {
        if(progress<0){
            progress=0;
        }else if(progress>max){
            progress=max;
        }else{
            this.progress = progress;
        }        
    }
    public int getMax() {
        return max;    }

3、  為定製的屬性編寫attrs.xml資源，該資原始檔放在res/values目錄下，內容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressBar">
        <attr name="bgColor" format="color"/>
        <attr name="fgColor" format="color"/>
        <attr name="r" format="integer"/>
        <attr name="strokeWidth" format="integer"/>
        <attr name="drawStyle">
            <enum name="STROKE" value="0"></enum>
            <enum name="FILL" value="1"></enum>
        </attr>
        <attr name="max" format="integer"/>
    </declare-styleable>
</resources>

4、  在MyCircleProgress類中定義建構函式，初始化屬性

    private void initProperty(AttributeSet attrs){
    TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
        mR=tArray.getInteger(R.styleable.CircleProgressBar_r,10);
        bgColor=tArray.getColor(R.styleable.CircleProgressBar_bgColor, Color.GRAY);
        fgColor=tArray.getColor(R.styleable.CircleProgressBar_fgColor, Color.RED);
        drawStyle=tArray.getInt(R.styleable.CircleProgressBar_drawStyle, 0);
        strokeWidth=tArray.getInteger(R.styleable.CircleProgressBar_strokeWidth, 10);
        max=tArray.getInteger(R.styleable.CircleProgressBar_max, 100);
    }    
public MyCircleProgress(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.paint = new Paint();
        this.paint.setAntiAlias(true); // 消除鋸齒
        this.paint.setStyle(Style.STROKE); // 繪製空心圓或 空心矩形
        initProperty(attrs);    
    }

5、  在MainActivity中佈局檔案中新增MyCircleProgress元件，如下所示

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res/com.jereh.mydrawcircleprogress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
     >   
 <com.jereh.views.MyCircleProgress
        android:id="@+id/MyCircleProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:r="45"
        app:strokeWidth="10"
        app:bgColor="#cccccc"
        app:fgColor="#ff0000"
        app:drawStyle="FILL"
        app:max="50"
        />
</RelativeLayout>

6、  自定義元件MyCircleProgress中重寫onDraw方法：

    protected  void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int center = getWidth() / 2; // 圓心位置
        this.paint.setColor(bgColor);
        this.paint.setStrokeWidth(strokeWidth);
        canvas.drawCircle(center, center, mR, this.paint);
        // 繪製圓環
        this.paint.setColor(fgColor);
        if(drawStyle==0){
            this.paint.setStyle(Style.STROKE);
            opt=false;
        }else{
            this.paint.setStyle(Style.FILL);
            opt=true;
        }
        int top = (center - mR);
        int bottom = (center + mR);
        RectF oval = new RectF(top, top, bottom, bottom);
        canvas.drawArc(oval, 270, 360*progress/max, opt, paint);

    }

7、編寫MainActivity

public class MainActivity extends Activity {
    private MyCircleProgress progressView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressView = (MyCircleProgress) findViewById(R.id.MyCircleProgress);
        new ProgressAnimation().execute();
    }
    class ProgressAnimation extends AsyncTask<Void, Integer, Void> {
        @Override
        protected Void doInBackground(Void... params) {
            //進度值不斷的變化
            for (int i = 0; i < progressView.getMax(); i++) {
                try {
                    publishProgress(i);
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {
            //更新進度值
            progressView.setProgress(values[0]);
            progressView.invalidate();
            super.onProgressUpdate(values);
        }
    }
}