DialogFragment实现带数字倒计时和小圆点进度的圆形进度条

DialogFragment实现带数字倒计时和小圆点进度的圆形进度条

最近公司项目需要添加一个在网络不理想时，支付等待倒计时的弹框。开始想通过自定义view画出来，结果因为多个控件都有动画效果宣告失败。 最后利用继承Drawable再加上动画效果得以实现，效果如下：

实现步骤

没有交互的自定义view，可以实现一个drawable作为Imageview的背景

view的构成：

• 外围圆环进度条
• 圆环内倒计时数字
• 圆环下方文字
• 文字右边小圆点进度条

1. 自定义Drawable并初始化变量

public class CountDownView extends Drawable {
   
    private static final String TAG = "CountDownView";
    private final static int PROGRESS_FACTOR = -360;
    private Paint mPaint;
    private Paint textPaint;
    private RectF mArcRect;
    private float radius;

    //当前进度条进度
    private float progress;
    //进度条颜色
    private int ringColor;
    //进度条宽度
    private int ringWidth;
    //倒计时数字
    private int showNumber;
    //字符串颜色
    private int textColor;
    //数字颜色
    private int numColor;

    private String showText = "正在支付";

    private int MAX_DOTS_COUNT = 3;

    Paint numPaint;


    //小圆点数量
    private int circularCount;

    private Paint dotPaint;

    private static final float PERCENT_CIRCLER_TO_HEIGHT = 3 / 14f;//半径占父控件高度的比例

    public CountDownView(int ringWidth, int ringColor, int showNumber, int textColor, int numColor) {
        mPaint = new Paint();
        numPaint = new Paint();
        mArcRect = new RectF();

        this.ringWidth = ringWidth;
        this.ringColor = ringColor;