Android 自定义控件－－圆形进度条

旧城等待， 2022-05-31 05:37 350阅读 0赞

先上效果图：  
![这里写图片描述][70]  
[原文地址][Link 1]

## 前期参考文章 ##

[Android自定义View的官方套路][Android_View]  
[我奶奶都能懂的UI绘制流程（上）！][UI]  
[我奶奶都能懂的UI绘制流程（下）！][UI 1]  
[53.自定义View练习（一）圆形百分比控件][53._View]

## 1.自定义属性 ##

在res/values/ 下创建 attire.xml文件

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <declare-styleable name="CirclePercentBar">
            <attr name="arcColor" format="color"/>
            <attr name="arcWidth" format="dimension"/>
            <attr name="centerTextColor" format="color"/>
            <attr name="centerTextSize" format="dimension"/>
            <attr name="circleRadius" format="dimension"/>
            <attr name="arcStartColor" format="color"/>
            <attr name="arcEndColor" format="color"/>
        </declare-styleable>
    </resources>

## 2.自定义View类 ##

public class CirclePercentBar extends View{ 
    
        public CirclePercentBar(Context context) {
            this(context, null);
        }
    
        public CirclePercentBar(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public CirclePercentBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }

添加了3个构造函数，这个地方需要注意一下（对于初学者有坑）：

如果不需要在xml文件中使用控件，就实现第一个构造函数即可；  
如果需要在xml中定义，需要传入属性值的时候，系统将调用第二个构造函数；  
第三个系统不会自动去调用，而是用户自己需要的时候去主动调用。  
针对这个坑按照习惯（我看都这样写的，所以就叫习惯了…哈哈哈）做了相应的修改，就如上面的代码所示，第一个构造函数去调用第二个，第二个调用第三个，然后把我们初始化的操作都写在第三个构造函数中，别问为什么，我也不知道…以后知道了再来补充,当然就规矩点儿写在第二个里面也应该是不会错的。

## 3.获取属性值 ##

既然自定义了属性值，而且用户在xml文件中也做了相应的属性设置，自然要拿到代码中来使用这些属性值了，获取的过程也很简单，都是套路

TypedArray typedArray=context.obtainStyledAttributes(attrs
                    , R.styleable.CirclePercentBar, defStyleAttr,0);
            mArcColor = typedArray.getColor(R.styleable.CirclePercentBar_arcColor
                    ,0xff0000);
            mArcWidth = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_arcWidth
                    , DisplayUtil.dp2px(context, 20));
            mCenterTextColor = typedArray.getColor(R.styleable.CirclePercentBar_centerTextColor
                    , 0x0000ff);
            mCenterTextSize = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_centerTextSize
                    , DisplayUtil.dp2px(context, 20));
            mCircleRadius = typedArray.getDimensionPixelSize(R.styleable.CirclePercentBar_circleRadius
                    , DisplayUtil.dp2px(context, 100));
            arcStartColor = typedArray.getColor(R.styleable.CirclePercentBar_arcStartColor
                    , ContextCompat.getColor(mContext, R.color.colorStart));
            arcEndColor = typedArray.getColor(R.styleable.CirclePercentBar_arcEndColor
                    , ContextCompat.getColor(mContext, R.color.colorEnd));
            typedArray.recycle();

利用TypeArray对象来获取属性值，根据自定义属性的类型，定义的是颜色属性，就用它的getcolor方法，获取的是尺寸属性，就用getDimensionPixelSize属性，这里尺寸方法需要注意第二个默认值参数需要把dp转为px

## 4.初始化画笔 ##

因为draw方法会被调用很多次，肯定不能在画的时候才初始化画笔，这样会很消耗内存，影响性能，所以选择在构造函数中初始化。

private void initPaint() {
    
            startCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            startCirclePaint.setStyle(Paint.Style.FILL);
            //startCirclePaint.setStrokeWidth(mArcWidth);
            startCirclePaint.setColor(arcStartColor);
    
            arcCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            arcCirclePaint.setStyle(Paint.Style.STROKE);
            arcCirclePaint.setStrokeWidth(mArcWidth);
            arcCirclePaint.setColor(ContextCompat.getColor(mContext,R.color.colorCirclebg));
            arcCirclePaint.setStrokeCap(Paint.Cap.ROUND);
    
            arcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            arcPaint.setStyle(Paint.Style.STROKE);
            arcPaint.setStrokeWidth(mArcWidth);
            arcPaint.setColor(mArcColor);
            arcPaint.setStrokeCap(Paint.Cap.ROUND);
    
            centerTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            centerTextPaint.setStyle(Paint.Style.STROKE);
            centerTextPaint.setColor(mCenterTextColor);
            centerTextPaint.setTextSize(mCenterTextSize);
    
            //圆弧的外接矩形
            arcRectF = new RectF();
    
            //文字的边界矩形
            textBoundRect = new Rect();
    
        }

这里初始化了4个画笔，第一个画笔是用来画圆环顶部的一个圆的，这个到后面再说为什么我选择画了一个圆；第二个画笔是用来画未填充状态的背景圆环的；第三个画笔用来画百分比占据的彩色弧形环的，也就是效果图中动起来的圆弧部分，类型采用了描边，圆角；第四个画笔用来写中间的百分比文字。

另外还在这里初始化了一个定位圆弧的外界矩形和定位文字的边界矩形

## 5.重写onMeasure ##

到这构造函数需要做的初始化工作就基本做好了，接下来的工作就是自定义控件必要的重写onMeasure方法

@Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            setMeasuredDimension(measureView(widthMeasureSpec), measureView(heightMeasureSpec));
        }
    
        private int measureView(int measureSpec) {
            int result;
            int specMode=MeasureSpec.getMode(measureSpec);
            int specSize=MeasureSpec.getSize(measureSpec);
            if(specMode==MeasureSpec.EXACTLY){
                result=specSize;
            }else{
                result=mCircleRadius*2;
                if(specMode==MeasureSpec.AT_MOST){
                    result=Math.min(result,specSize);
                }
            }
            return result;
        }

关于为什么要重写onMeasure方法，还有测量都是些什么鬼，我相信很多初学者都会感到持续懵b，如果你想详细了解下可以看看这篇文章  
[为什么重写onMeasure()以及怎么重写][onMeasure]

不想细看的可以看看我下面简单的解释

测量就是为了告诉系统我这个控件该画多大，如果是给了确定的值比如设置的是Match\_parent或者特定的dp值就很简单了，即按照measureSpec给出的大小返回就行，如果设置的是wrap\_content，系统本身是不知道你的控件内部元素到底有多大的，所以就需要计算出一个最小值告诉给系统

如上述代码所示，如果判断得到设置的模式是MeasureSpec.EXACTLY，就把MeasureSpec中的尺寸值返回就行，如果判断得到设置的模式是MeasureSpec.AT\_MOST，也就是代码中设置的 wrap\_content，就比较圆环的直径和MeasureSpec中给出的尺寸值，取最小的一个返回，最后调用setMeasuredDimension方法，传入处理后的长宽值。

## 6.重写onDraw方法 ##

这里就到了核心的地方了，画我们要展示的view了，先上代码：

canvas.rotate(-90, getWidth()/ 2, getHeight()/ 2);
    
            arcRectF.set(getWidth()/2-mCircleRadius+mArcWidth/2,getHeight()/2-mCircleRadius+mArcWidth/2
                    ,getWidth()/2+mCircleRadius-mArcWidth/2,getHeight()/2+mCircleRadius-mArcWidth/2);
            canvas.drawArc(arcRectF, 0,360,false,arcCirclePaint);
    
            arcPaint.setShader(new SweepGradient(getWidth()/2,getHeight()/2,arcStartColor,arcEndColor));
            canvas.drawArc(arcRectF, 0,360* mCurData /100,false,arcPaint);
    
            canvas.rotate(90, getWidth()/ 2, getHeight()/ 2);
            canvas.drawCircle(getWidth()/2,getHeight()/2-mCircleRadius+mArcWidth/2,mArcWidth/2,startCirclePaint);
    
            String data= String.valueOf(mCurData) +"%";
            centerTextPaint.getTextBounds(data,0,data.length(),textBoundRect);
            canvas.drawText(data,getWidth()/2-textBoundRect.width()/2,getHeight()/2+textBoundRect.height()/2,centerTextPaint);

1、首先将画布绕中心点逆时针旋转了90度，做这个是因为在后面画渐变色的圆弧时，drawArc和SweepGradient这两个类的起始点0度不是在我们习惯的圆环最上面那个点，而是从圆环最右边那个点开始，所以逆时针旋转90度就能让它从最上面的点开始

![这里写图片描述][70 1]

2、接下来首先要画未填充状态的圆环，这个很简单，用drawArc方法从0度到360度就好了，这个地方的坑点在于调用之前给圆环定位的外接矩形，这个地方稍微有点儿绕，看图说话

![这里写图片描述][70 2]

如图所示，红色的矩形就是该圆环的外接矩形，而圆环的边是有宽度的，所以这样就有一问题了

需要发挥一点儿想象力，想一下假设我们设置的该控件的大小是wrap或者特定的大小，反正就是当控件的长宽小于2r+width这个长度，而这个时候我们一般会把外接矩形长宽直接设置为2r，觉得正好，然而，当运行出来的时候就傻眼了，圆环上下左右四个地方缺少了一块儿，因为圆环的边是有宽度的，半径相当于多了width/2的宽度

所以为了避免这种情况，我们在设置外接矩形的时候，提前把我们要画的圆环半径缩小width/2就好了，所以就有了代码中设置外接矩形时参数里包括width/2的设置

3、紧接着要画的就是百分比填充的彩色圆环，外接矩形就可以用上面设置好的，唯一的不同就是画笔需要设置一个渐变色的渲染效果，利用setShader方法

4、然后在圆环的顶部起始位置又画了一个实心圆。  
因为画圆弧的画笔是圆头类型的，在起始地方0度偏左还会有一个半圆，但是我们又采用了渐变色渲染，所以圆头部分就变成了结束的颜色值，就是这样

![这里写图片描述][70 3]

这效果简直不能忍，我也尝试了补偿起始角度来改变这种情况，但效果都不理想，所以最后找了一个最暴力的解决方式，用一个圆直接覆盖起始部分就好了…

5、最后就是添加中间的百分比文字就，这里没啥说的，定位到文字起始的位置，用drawText就好

## 7.暴露设置百分比的方法 ##

这么一个控件，自然要暴露给用户一个动态设置百分比的方法

public void setPercentData(float data, TimeInterpolator interpolator){
            ValueAnimator valueAnimator=ValueAnimator.ofFloat(mCurData,data);
            valueAnimator.setDuration((long) (Math.abs(mCurData-data)*30));
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    float value= (float) valueAnimator.getAnimatedValue();
                    mCurData=(float)(Math.round(value*10))/10;
                    invalidate();
                }
            });
            valueAnimator.setInterpolator(interpolator);
            valueAnimator.start();
        }

这个地方用到了ValueAnimator，然后监听valueAnimaer数值的更新，在回调中设置相应百分比参数，调用invalidate，重绘view，这样就达到了动画改变的效果了

[github源码][github]

[70]: /images/20220531/0b90b6f238a2463b94741ab3fe8f5628.png
[Link 1]: https://www.jianshu.com/p/daf009dd04a5
[Android_View]: http://blog.csdn.net/yissan/article/details/51136088
[UI]: https://www.jianshu.com/p/0bd672626c8d
[UI 1]: https://www.jianshu.com/p/112eab224239
[53._View]: http://blog.csdn.net/qq_31715429/article/details/53894623#comments
[onMeasure]: http://blog.csdn.net/chziroy/article/details/43069975
[70 1]: /images/20220531/96467def82ac4143aefb951a60486f02.png
[70 2]: /images/20220531/fbe408daaaae48ceb746ab556cfef9b7.png
[70 3]: /images/20220531/6f380cc49b0c4c3ab2418d37db8044da.png
[github]: https://github.com/gittjy/CirclePercentBar/tree/master