昨天簡(jiǎn)單熟悉了下canvas的API，今天來(lái)做個(gè)小demo鞏固下
回顧完全自定義控件-Canvas之繪制基本形狀

簡(jiǎn)單環(huán)形進(jìn)度條制作

本文實(shí)現(xiàn)一個(gè)自定義的加載進(jìn)度條，效果如下圖所示：

效果

實(shí)現(xiàn)步驟：

1. 新建CircleProgressView類繼承View
2. 在構(gòu)造函數(shù)中初始化畫筆

private void init() {
       mPaint = new Paint();
       mPaint.setColor(Color.BLACK);
       mPaint.setStyle(Paint.Style.STROKE);//繪圖為描邊模式
       mPaint.setStrokeWidth(20);//畫筆寬度
       mPaint.setAntiAlias(true);//抗鋸齒
   }

2. 重寫onDraw
   主要邏輯為先繪制一個(gè)圓環(huán)，然后在它上面根據(jù)進(jìn)度來(lái)繪制圓弧

//進(jìn)度
private int mProgress;
//是否到下一圈
private boolean mChanged;
protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       //得到畫布一半的寬度
       int center = getWidth() / 2;
       //定義圓的半徑
       int radius = 100;
       //定義一個(gè)圓
       mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
       if (!mChanged) {
           //設(shè)置畫筆的顏色
           mPaint.setColor(Color.BLUE);
           //畫一個(gè)圓，由于畫筆是描邊模式，所以展現(xiàn)的是個(gè)圓環(huán)
           canvas.drawCircle(center, center, radius, mPaint);
           //設(shè)置畫筆的顏色
           mPaint.setColor(Color.RED);
           //繪制圓弧，從12點(diǎn)方向（-90度）開始繪制，偏移角度為進(jìn)度
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       } else {
           mPaint.setColor(Color.RED);
           canvas.drawCircle(center, center, radius, mPaint);
           mPaint.setColor(Color.BLUE);
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       }
       //進(jìn)度更新方法
       startProgress();
   }

進(jìn)度更新方法

private void startProgress() {
       //當(dāng)view控件可見時(shí)，每50毫秒更新一次視圖
       if (isShown()) {
           postDelayed(new Runnable() {
               @Override
               public void run() {
                   mProgress += 10;
                   //如果偏移角度超過(guò)360，則至為0，并且跟換繪制顏色
                   if (mProgress >= 360) {
                       mProgress = 0;
                       mChanged = !mChanged;
                   }

                  //請(qǐng)求重繪View樹，調(diào)用draw()方法
                   invalidate();
               }
           }, 50);
       }
   }

自定義屬性

• 很明顯，我們不可能在代碼中寫死控件的參數(shù)，我們需要提供一些可定制屬性，方便在XML布局文件中對(duì)控件進(jìn)行設(shè)置。

為控件添加自定義屬性的幾個(gè)步驟。

1. 在values目錄下新建一個(gè)attrs.xml文件，內(nèi)容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="CircleProgressView">
       <attr name="firstColor" format="color"/> <!--圓環(huán)顏色-->
       <attr name="secondColor" format="color"/> <!--圓環(huán)顏色-->
       <attr name="circleWidth" format="dimension"/><!--色帶寬度-->
   </declare-styleable>
</resources>

不同的屬性對(duì)應(yīng)不同的format，屬性對(duì)應(yīng)的format可以參考
http://blog.csdn.net/pgalxx/article/details/6766677

3. 獲取屬性
   在CircleProgressView的構(gòu)造方法中獲取布局文件中的屬性

//獲取TypedArray
context.obtainStyledAttributes(attrs,R.styleable.RoundProgressBar)

然后從TypedArray獲取我們定義的屬性

public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr, 0);

       //獲取自定義屬性和默認(rèn)值
       //getColor方法的第一個(gè)參數(shù)是我們?cè)赬ML文件中定義的顏色，如果我們沒有給我們自定義的View定義顏色，他就會(huì)使用第二個(gè)參數(shù)中的默認(rèn)值
       mFirstColor = ta.getColor(R.styleable.CircleProgressView_firstColor, Color.RED);
       mSecondColor = ta.getColor(R.styleable.CircleProgressView_secondColor, Color.BLUE);
       mCircleWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleWidth,
               (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics()));
       
       //釋放該實(shí)例，從而使其可被其他模塊復(fù)用
       ta.recycle();
       init();
   }

3. 在onDraw()中使用

protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       //得到畫布一半的寬度
       int center = getWidth() / 4;
       //定義圓的半徑
       int radius = 100;
       //定義一個(gè)圓
       mRectF = new RectF(center - radius, center - radius, center + radius, center + radius);
       if (!mChanged) {
           //設(shè)置畫筆的顏色
           mPaint.setColor(mFirstColor);
           //畫一個(gè)圓，由于畫筆是描邊模式，所以展現(xiàn)的是個(gè)圓環(huán)
           canvas.drawCircle(center, center, radius, mPaint);
           //設(shè)置畫筆的顏色
           mPaint.setColor(mSecondColor);
           //繪制圓弧，從12點(diǎn)方向（-90度）開始繪制，偏移角度為進(jìn)度
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       } else {
           mPaint.setColor(mSecondColor);
           canvas.drawCircle(center, center, radius, mPaint);
           mPaint.setColor(mFirstColor);
           canvas.drawArc(mRectF, -90, mProgress, false, mPaint);
       }
       //進(jìn)度更新方法
       startProgress();
   }

2. 在布局中使用
   第二個(gè)控件使用了自定義屬性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context="zhj.progressbardemo.MainActivity">

   <zhj.progressbardemo.CircleProgressView
       android:layout_width="match_parent"
       android:layout_height="259dp"
       />

   <zhj.progressbardemo.CircleProgressView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginTop="50dp"
       app:circleWidth="30dp"
       app:firstColor="#f58a47"
       app:secondColor="#5be9d8"
       />
</LinearLayout>

效果展示

效果

這里是項(xiàng)目地址

參考
https://segmentfault.com/a/1190000004624339
http://blog.csdn.net/lmj623565791/article/details/24500107