【自定义View】带动画的百分比圆型控件

前言

这个View其实非常的简单，之所以写这个博客，一方面是记录下所学，另一方面是开启我的博客之旅。

效果示例

效果分析

这个效果还是非常简单的，就是画圆、画字外加一个属性动画的结果

既然是自定义View，那我们就按自定义View的流程来介绍：

1.继承合适的View，复写构造方法，初始化一些变量

2.自定义view的宽高测量 onMeasure 方法

3.自定义view的绘制 onDraw 方法

4.属性动画效果

开发流程

自定义View之继承

因为本控件层级不复杂，就是一个单独的View，不需要继承ViewGroup，直接继承View就行。

在这一步，除了继承之外，还需要做一些成员变量的创建和初始化

比如控件的宽高、内圆和外圆的画笔及其画笔的颜色、线宽、比率文字的大小和颜色、动画时长等等，核心代码如下：

/**
 * 上下文
 */
private Context mContext;

/**
 * 控件的宽高
 */
private int viewHeight, viewWidth;

/**
 * 内圆和外圆的画笔
 */
private Paint outCirclePaint, innerCirclePaint;

/**
 * 内圆和外圆的颜色
 */
private int outCircleColor, innerCircleColor;

/**
 * 内圆和外圆的画笔宽度
 */
private int outCircleStrokeWidth, innerCircleStrokeWidth;

/**
 * 比率数字画笔和其他文字的画笔
 */
private Paint ratePaint, expressPaint, percentPaint;

/**
 * 比率数字画笔和其他文字的画笔的颜色
 */
private int rateColor, expressColor, percentColor;

/**
 * 比率数字和其他文字的大小
 */
private int rateSize, expressSize, percentSize;

/**
 * 比率数字  默认45
 */
private String rateText;

/**
 * 比率代表的含义  比如 正确率、签到率等等
 */
private String expressText;

/**
 * 比率对应的弧度
 */
private float sweep;

/**
 * 动画进行的时间
 */
private int duration;


public CircleRateView(Context context) {
    super(context);
    initView(context, null, -1);
}

public CircleRateView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    initView(context, attrs, -1);
}

public CircleRateView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView(context, attrs, defStyleAttr);
}

private void initView(Context context, AttributeSet attrs, int defStyleAttr) {

        ……
        
        //初始化相关画笔
        outCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        outCirclePaint.setStrokeWidth(dip2px(outCircleStrokeWidth));
        outCirclePaint.setStyle(Paint.Style.STROKE);
        outCirclePaint.setColor(outCircleColor);

        innerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG