Android自訂控制項系列之應用篇——圓形進度條

標籤：

一、概述

　　在上一篇博文中，我們給大家介紹了Android自訂控制項系列的基礎篇。連結：http://www.cnblogs.com/jerehedu/p/4360066.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);        }    }}

Android自訂控制項系列之應用篇——圓形進度條