自定义view （三） 用view圆环进度条

参考的鸿扬大神的博客 博客地址
做了一个圆环进度条，感觉可以深入下，做一个环形的饼状图；

---

照着他的代码，敲了一遍，初步理解了，代码里面给了非常详细的注释，主要看代码；
步骤还是一样
- 1、自定义View的属性
- 2、在View的构造方法中获得我们自定义的属性
- 3、重写onMesure
- 4、重写onDraw

---

新建view类

package com.xunku.basetest.customView;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.xunku.basetest.R;

/**
 * Created 郑贤鑫 on 2017/2/13.
 */

public class CircleView extends View{

    /**
     * 第一圈的颜色
     */
    private int mFirstColor;

    /**
     * 第二圈的颜色
     */
    private int mSecondColor;

    /**
     * 圈的宽度
     */
    private int mCircleWidth;

    /**
     * 画笔
     */
    private Paint mPaint;

    /**
     * 当前进度
     */
    private int mProgress;

    /**
     * 速度
     */
    private int mSpeed;

    /**
     * 是否应该开始下一个
     */
    private boolean isNext = false;

    public CircleView(Context context) {
//        super(context);
        this(context,null);
    }

    public CircleView(Context context, AttributeSet attrs) {
//        super(context, attrs);
        this(context,attrs,0);
    }

    public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleView, defStyleAttr, 0);
        int n = a.getIndexCount();

        //得到各种属性
        for (int i = 0; i < n; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
                case R.styleable.CircleView_firstColor:
                    mFirstColor = a.getColor(attr, Color.GREEN);
                    break;
                case R.styleable.CircleView_secondColor:
                    mSecondColor = a.getColor(attr, Color.RED);
                    break;
                case R.styleable.CircleView_circleWidth:
                    mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CircleView_speed:
                    mSpeed = a.getInt(attr, 20);// 默认20
                    break;
            }
        }
        //回收资源
        a.recycle();

        mPaint = new Paint();

        //绘图线程
        new Thread(){
            @Override
            public void run() {
//                super.run();
                while (true){
                    //进度
                    mProgress++;
                    if(mProgress == 360){
                        mProgress = 0;
                        if(!isNext){
                            isNext=true;
                        }else {
                            isNext=false;
                        }
                    }
                    //Invalidate()不能直接在线程中调用
                    //postInvalidate()可以直接在工作线程中刷新view
                    postInvalidate();
                    try {
                        Thread.sleep(mSpeed);
                    }catch (Exception e){
                        e.printStackTrace();
                    }
                }
            }
        }.start();

    }

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

        int center = getWidth() / 2;            //获取圆心的 X 左边
        int radius = center-mCircleWidth / 2;   //半径
        mPaint.setStrokeWidth(mCircleWidth);    //环形的宽度
        mPaint.setAntiAlias(true);              //抗锯齿
        mPaint.setStyle(Paint.Style.STROKE);    //设置样式  空心

        // Rect和RecF的用法基本类似 , Rect的参数为int类型，而RectF的参数类型为float类型
        // 用于定义的圆弧的形状和大小的界限
        RectF oval=new RectF(center - radius, center - radius, center + radius, center + radius);

        if(!isNext){
            // 第一颜色的圈完整，第二颜色跑
            //设置颜色
            mPaint.setColor(mFirstColor);                   //设置颜色
            canvas.drawCircle(center,center,radius,mPaint); //画出圆环

            mPaint.setColor(mSecondColor);                  //设置颜色

            //oval :指定圆弧的外轮廓矩形区域。
            //startAngle: 圆弧起始角度，单位为度。
            //sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度,从右中间开始为零度。
            //useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。关键是这个变量，
            canvas.drawArc(oval,-90,mProgress,false,mPaint);//根据进度画圆弧

        }else
        {
            mPaint.setColor(mSecondColor); // 设置圆环的颜色
            canvas.drawCircle(center, center, radius, mPaint); // 画出圆环

            mPaint.setColor(mFirstColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
        }

    }
}

2.在style中加入自定义属性值

<attr name="firstColor" format="color" />
    <attr name="secondColor" format="color" />
    <attr name="circleWidth" format="dimension" />
    <attr name="speed" format="integer" />

    <declare-styleable name="CircleView">
        <attr name="firstColor" />
        <attr name="secondColor" />
        <attr name="circleWidth" />
        <attr name="speed" />
    </declare-styleable>

3.使用

<com.xunku.basetest.customView.CircleView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:firstColor="@color/app_golden"
        app:secondColor="@color/blue"
        app:circleWidth="20dp"
        app:speed="1"/>