Android自定义控件之百分比圆环进度条

首先我们先来看一下效果

分析

我们来看这个进度条应该分为3个小部分
1.中间的圆
2.外边的圆环
3.中间的文字

分开画

这3部分就是需要我们自己画出来的，因此我们需要3根画笔

//设置中心园的画笔
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(mCircleBackground);
        mCirclePaint.setStyle(Paint.Style.FILL);
        //设置文字的画笔
        mTextPaint = new Paint();
        mTextPaint.setColor(mTextColor);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setStrokeWidth((float) (0.025*mRadius));
        mTextPaint.setTextSize(mRadius/2);
        mTextPaint.setTextAlign(Align.CENTER);
        //设置外圆环的画笔
        mArcPaint = new Paint();
        mArcPaint.setAntiAlias(true);
        mArcPaint.setColor(mRingColor);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setStrokeWidth((float) (0.075*mRadius));

接下来我们应该在onDraw里面画这3个部分，中间圆和文字都很好画，难点在于外面的圆环应该怎么画呢？

要想画圆环，首先我们现在new出一个矩形

//画中心园的外接矩形，用来画圆环用
        mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);

这个矩形就是圆环的外接矩形，也就是说圆环是这个矩形的内切圆，这样说有点抽象，我们在画布上把这个矩形画出来大家就明白了。

canvas.drawRect(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius,mArcPaint);

看！就是这个矩形，接下来我们在画圆环的时候，这个矩形要作为第一个参数，这样系统就知道如何画这个圆环了，第二个参数为起始的角度，-90读为正北方向。第三个参数为当前的角度，第四个参数false即可，第五个参数就是画笔

 //画圆环
        canvas.drawArc(mArcRectF, mStartSweepValue ,mCurrentAngle, false, mArcPaint);

好了，最难的一个部分画完了，剩下的中间圆和文字就简单了

 //画中间圆
canvas.drawCircle(mCircleX, mCircleY, mRadius, mCirclePaint);
 //画文字      
 canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);

为了让进度条动起来，我们肯定要修改他的属性，也就是修改他的当前角度，然后再重画，这样圆就动起来了

 //判断当前百分比是否小于设置目标的百分比
        if (mCurrentPercent<mTargetPercent) {
            //当前百分比+1
            mCurrentPercent+=1;
            //当前角度+360
            mCurrentAngle+=3.6;
            //每10ms重画一次
            postInvalidateDelayed(10);
        }

在values/attr下添加自定义属性

<resources>
    <declare-styleable name="PercentageRing">
        <attr name="radius" format="integer"/>
        <attr name="circleBackground" format="color"/>
        <attr name="ringColor" format="color"/>
        <attr name="textColor" format = "color"/>

    </declare-styleable>
</resources>

我们自定义了4个属性
1.radius 半径 类型为整形
2.circleBackground 中心园背景颜色 类型为color
3.ringColor 外圆环的颜色 类型为color
4.textColor 文字颜色 类型为color

然后在带有两个参数的构造方法中获取我们自定义属性

public PercentageRing(Context context, AttributeSet attrs) {
        super(context, attrs);
        //自定义属性 values/attr
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.PercentageRing);
        //中间圆的背景颜色  默认为浅紫色
        mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xffafb4db);
        //外圆环的颜色  默认为深紫色
        mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xff6950a1);
        //中间圆的半径 默认为60
        mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 60);
        //字体颜色 默认为白色
        mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xffffffff);
        //最后一定要调用这个 释放掉TypedArray
        typedArray.recycle();
    }

我们在xml中可以为进度条设置属性

<com.zhangqi.percentagecircle.PercentageRing
        android:id="@+id/Circle2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:radius="50"
        app:circleBackground="#ff43CD80"
        app:ringColor="#ff3cb371"
        app:textColor="#ffffffff"
         />

使用起来非常简单

我们只需要在Activity中获取到实例然后设置一个目标百分比就可以了

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPercentageRing1 = (PercentageRing) findViewById(R.id.Circle);
        //设置目标百分比为30
        mPercentageRing1.setTargetPercent(30);

        mPercentageRing2 = (PercentageRing) findViewById(R.id.Circle2);
        //设置目标百分比为50
        mPercentageRing2.setTargetPercent(50);

        mPercentageRing3 = (PercentageRing) findViewById(R.id.Circle3);
        //设置目标百分比为70
        mPercentageRing3.setTargetPercent(70);

        mPercentageRing4 = (PercentageRing) findViewById(R.id.Circle4);
        //设置目标百分比为100
        mPercentageRing4.setTargetPercent(100);
    }

}

完整代码

完整代码的注释很清楚，我就不贴出来了，大家可以上我的GitHub上面下载完整代码