Android自定义view动态绘制百分比圆环进度条

之前写了渐变进度条百分比的实现，今天我们来写下圆环百分比进度条。有时候我们需要自定义View才能满足我们的需求，首先，自定义View我们需要先继承View，添加类的构造方法，重写父类View的一些方法，例如onDraw，为了我们自定义的View在一个项目中能够重用，有时候我们需要自定义其属性，举个很简单的例子，我在项目中的多个界面使用我自定义的View，每个界面该自定义View的颜色都不相同，这时候如果没有自定义属性，那我们是不是需要构建不同颜色的View出来呢，这样子我们的代码就会显得很沉厄，所以这时候我们就需要自定义其属性来满足我们不同的需求，自定义属性呢，我们需要在values下新建立一个attrs.xml文件，在其中定义我们需要定义的属性，然后在自定义View中也要做相对应的修改，我们还是用一个小例子来看看自定义View和自定义属性的使用

咱们先看下效果

1、其实上面的圆环的颜色，圆环进度的颜色，是否显示进度的百分比，进度百分比的颜色，以及进度是实心还是空心等等这些都可以实现，只需要改下一下的代码就可以。我只显示上面的一种，相信各位都能实现出来。接下来我们就来教大家怎么来定义

attrs.xml文件

xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PercentageRing">
        <attr name="circleColor" format="color"/>
        <attr name="radius" format="integer"/>
        <attr name="circleBackground" format="color"/>
        <attr name="ringColor" format="color"/>
        <attr name="textColor" format = "color"/>
    declare-styleable>
resources>

2、 自定义View的属性我们算是定义好了，相信大家也会获取该属性，我们直接使用context.obtainStyledAttributes(attrs, R.styleable.PercentageRing)来获取TypedArray，然后从TypedArray获取我们定义的属性，例如

// 自定义属性，attr
// 使用TypedArray
//自定义属性 values/attrs
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PercentageRing);
//中间圆的背景颜色  默认 - 白色
mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xff000000);
//外圆环的颜色  默认 - 灰色
roundColor = typedArray.getColor(R.styleable.PercentageRing_circleColor, 0xfff5f5f5);
//外圆环的颜色  动态画圆 - 默认-红色
mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xfff5f5f5);
//中间圆的半径 默认为80
mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 80);
//字体颜色 默认 - 灰色
mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xff999999);
//最后一定要调用这个 释放掉TypedArray
typedArray.recycle();

属性颜色，大家可以根据需求是定义，里面的注释也写得很明白。

3、下面是自定义View的全部代码

public class CircleProgressBar extends View {
    /**
     * 绘制百分比的圆，一共有四部分，分别是里面的文字、背景圆、默认圆环、开始绘制的圆环；
     * 思路：首先需要四支画笔, 设置画笔对应的属性等；
     */
    private Paint roundColorPaint;//外圆画笔
    private Paint mCirclePaint;//中心园的画笔
    private Paint mTextPaint;//文字的画笔
    private Paint mArcPaint;//外圆环的画笔
    private int mCircleX;//设置圆心x坐标
    private int mCircleY;//设置圆心y坐标
    private float mCurrentAngle;//当前角度
    private RectF mArcRectF;//画中心园的外接矩形，用来画圆环用
    private float mStartSweepValue;//圆环开始角度
    private float mTargetPercent;//设置目标的百分比(也就是后台返回的数据)
    private float mCurrentPercent;//当前百分比

    private int mRadius;//圆的半径
    private int mCircleBackground;//中间圆的背景颜色
    private int mRingColor;//外圆环的颜色  第二次画圆的颜色
    private int roundColor; //外圆环的颜色 第一次画圆的颜色
    private int mTextSize;//字体大小
    private int mTextColor;//字体颜色
    public CircleProgressBar(Context context) {
        super(context);
        //初始化数据
        init(context);
    }

    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 自定义属性，attr
        // 使用TypedArray
        //自定义属性 values/attr
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PercentageRing);
        //中间圆的背景颜色  默认 - 白色
        mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xff000000);
        //外圆环的颜色  默认 - 灰色
        roundColor = typedArray.getColor(R.styleable.PercentageRing_circleColor, 0xfff5f5f5);
        //外圆环的颜色  动态画圆 - 默认-红色
        mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xfff5f5f5);
        //中间圆的半径 默认为80
        mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 80);
        //字体颜色 默认 - 灰色
        mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xff999999);
        //最后一定要调用这个 释放掉TypedArray
        typedArray.recycle();
        //初始化数据
        init(context);
    }

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

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context);
    }
    private void init(Context context){
        //圆环开始角度 -90° 正北方向
        mStartSweepValue = -90;
        //当前角度
        mCurrentAngle = 0;
        //当前百分比
        mCurrentPercent = 0;
        //设置中心园的画笔
        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(Paint.Align.CENTER);
        //设置外圆环的画笔
        mArcPaint = new Paint();
        roundColorPaint = new Paint();
        roundColorPaint.setColor(roundColor);
        mArcPaint.setAntiAlias(true);
        mArcPaint.setColor(mRingColor);
        mArcPaint.setStyle(Paint.Style.STROKE);
        mArcPaint.setStrokeWidth((float) (0.075*mRadius));

        //获得文字的字号 因为要设置文字在圆的中心位置
        mTextSize = (int) mTextPaint.getTextSize();

    }
    //主要是测量wrap_content时候的宽和高，因为宽高一样，只需要测量一次宽即可，高等于宽
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));
        //设置圆心坐标
        mCircleX = getMeasuredWidth()/2;
        mCircleY = getMeasuredHeight()/2;
        //如果半径大于圆心横坐标，需要手动缩小半径的值，否则就画到外面去了
        if (mRadius>mCircleX) {
            //设置半径大小为圆心横坐标到原点的距离
            mRadius = mCircleX;
            mRadius = (int) (mCircleX-0.075*mRadius);
            //因为半径改变了，所以要重新设置一下字体宽度
            mTextPaint.setStrokeWidth((float) (0.025*mRadius));
            //重新设置字号
            mTextPaint.setTextSize(mRadius/2);
            //重新设置外圆环宽度
            mArcPaint.setStrokeWidth((float) (0.075*mRadius));
            //重新获得字号大小
            mTextSize = (int) mTextPaint.getTextSize();
        }
        //画中心园的外接矩形，用来画圆环用
        mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);
    }

    //当wrap_content的时候，view的大小根据半径大小改变，但最大不会超过屏幕
    private int measure(int measureSpec){
        int result=0;
        //1、先获取测量模式 和 测量大小
        //2、如果测量模式是MatchParent 或者精确值，则宽为测量的宽
        //3、如果测量模式是WrapContent ，则宽为 直径值 与 测量宽中的较小值；否则当直径大于测量宽时，会绘制到屏幕之外；
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }else {
            result =(int) (1.075*mRadius*2);
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;

    }

    //开始画中间圆、文字和外圆环
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画中间圆
        canvas.drawCircle(mCircleX, mCircleY, mRadius, mCirclePaint);
        //画圆环
        roundColorPaint.setStyle(Paint.Style.STROKE);
        //设置外圆环的宽度（默认灰色的圆环）
        roundColorPaint.setStrokeWidth((float) (0.075*mRadius));
        canvas.drawCircle(mCircleX, mCircleY, mRadius, roundColorPaint);
        //动态绘制红色的圆环
        canvas.drawArc(mArcRectF, mStartSweepValue ,mCurrentAngle, false, mArcPaint);
        //画文字 -  此处可以注销(原因：不能绘制有小数的百分比，例如：1.4%   如果是5%、12%这些可以不用注销下面代码)，自定义布局将获取的值写在Textview上，
        // 再使用下面的setTargetPercent方法获取数据动态画圆
        canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);
        //判断当前百分比是否小于设置目标的百分比
        if (mCurrentPercent<mTargetPercent) {
            //当前百分比+1
            mCurrentPercent+=1;
            //当前角度+360
            mCurrentAngle+=3.6;
            //每10ms重画一次
            postInvalidateDelayed(10);
        }
    }
    //设置目标的百分比
    public void setTargetPercent(float percent){
        this.mTargetPercent = percent;
    }
}

此时对应的布局为：

<com.ky.circleprogressbar.CircleProgressBar
    android:id="@+id/recommend_progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:circleBackground="#00000000"
    android:layout_centerHorizontal="true"
    app:ringColor="#ffea4745"
    app:textColor="#ff999999"/>

该布局的缺点是  圆环里面画出的百分比数字只能为整数(34%、77%)，我试过没改过来。大家可以试下。

下面是我自定义 一个显示百分比数字的布局来代替画笔画的百分比：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="40dp"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <com.ky.circleprogressbar.CircleProgressBar
            android:id="@+id/recommend_progressBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:circleBackground="#00000000"
            android:layout_centerHorizontal="true"
            app:ringColor="#ffea4745"
            app:textColor="#ff999999"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="visible">

            <TextView
                android:id="@+id/recommend_rate_circle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text=""
                android:textColor="#ff999999"
                android:textSize="14.0sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="%"
                android:textColor="#ff999999"
                android:textSize="12.0sp" />
        LinearLayout>
    RelativeLayout>
LinearLayout>

使用自定义显示数字百分比需要注释掉下面的代码：

canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);

这样就显示这样(34.5%、55.8%)的百分比了。

本库的地址：https://github.com/kongyuaner/CircleProgressBar