android随笔之自定义圆形刻度条

多的不说，少的不唠，上图 Screenshot_1601283851.png

自定义view的流程就不多说了，网上一大堆，直接上代码。

1，自定义style

    <declare-styleable name="CircleProgressView">
        <attr name="circleStartColor" format="color" />
        <attr name="circleCenterColor" format="color" />
        <attr name="circleEndColor" format="color" />
         //半径
        <attr name="circleRadiusWidth" format="dimension" />
        //外环宽
        <attr name="circleRingWidth" format="dimension" />
        //外环高
        <attr name="circleRingHeight" format="dimension" />

    </declare-styleable>

2，自定义view

public class CircleProgressView extends View implements ValueAnimator.AnimatorUpdateListener {
    //默认颜色
    private int defaultColor = 0xffC71585;
    //圆环开始颜色
    private int circleStartColor = 0xffC71585;
    //圆环中间颜色
    private int circleCenterColor = 0xffDA70D6;
    //圆环结束颜色
    private int circleEndColor = 0xffD8BFD8;
    //圆环半径
    private float circleRadiusWidth;
    //刻度条长度
    private float circleRingWidth;
    //刻度条长度
    private float circleRingHeight;
    //画笔
    private Paint mPaint;

    private int defaultSize = 100;

    private int width = 0;

    private int height = 0;

    private int circleAlpha = 0;
    private ValueAnimator animator;

    public CircleProgressView(Context context) {
        this(context, null);
    }

    public CircleProgressView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
        circleStartColor = ta.getColor(R.styleable.CircleProgressView_circleStartColor, defaultColor);
        circleCenterColor = ta.getColor(R.styleable.CircleProgressView_circleCenterColor, defaultColor);
        circleEndColor = ta.getColor(R.styleable.CircleProgressView_circleEndColor, defaultColor);
        circleRadiusWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleRadiusWidth, 100);
        circleRingWidth = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleRingWidth, 10);
        circleRingHeight = ta.getDimensionPixelSize(R.styleable.CircleProgressView_circleRingHeight, 40);
        ta.recycle();
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getSize(widthMeasureSpec);
        height = getSize(heightMeasureSpec);
        if (width < height) {
            height = width;
        } else {
            width = height;
        }
        setMeasuredDimension(width, height);
    }

    private int getSize(int measureSpec) {
        int mySize = defaultSize;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (mode) {
            case MeasureSpec.UNSPECIFIED: {//如果没有指定大小，就设置为默认大小
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {//如果测量模式是最大取值为size
                //我们将大小取最大值,你也可以取其他值
                mySize = size;
                break;
            }
            case MeasureSpec.EXACTLY: {//如果是固定的大小，那就不要去改变它
                mySize = size;
                break;
            }
        }
        return mySize;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 画里面的圆
        drawCircle(canvas);
        //画外层刻度
        drawGraduation(canvas);
    }


    private void drawCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);//去锯齿
        mPaint.setColor(Color.parseColor("#ff99cc00"));//颜色
        canvas.drawCircle(width / 2, height / 2, circleRadiusWidth, mPaint);
    }

    private void drawGraduation(Canvas canvas) {
        mPaint.setColor(circleStartColor);
        canvas.translate(width / 2, height / 2);
        //60等分
        for (int i = 0; i < 60; i++) {
            canvas.save();
            canvas.rotate(360 + i * 6);
            int alpha = (int) ((i / 60f * 255 + circleAlpha) % 255);
            mPaint.setAlpha(alpha);
            canvas.translate(circleRadiusWidth + circleRingHeight / 3, 0);
            canvas.drawLine(0, 0, circleRingHeight, 0, mPaint);
            canvas.restore();
        }
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(circleRingWidth);

        animator = ValueAnimator.ofInt(0, 255);
        animator.setInterpolator(new LinearInterpolator());
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setRepeatCount(-1);
        animator.setDuration(3000L);
        animator.addUpdateListener(this);
    }


    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (animator != null) {
            animator.start();
        }
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (animator != null) {
            animator.cancel();
        }
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        this.circleAlpha = (int) animation.getAnimatedValue();
        invalidate();
    }
}

3，xml布局引用

    <com.rsw.rswtestdemo.views.CircleProgressView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:circleRadiusWidth="100dp"
        app:circleRingHeight="30dp"
        app:circleRingWidth="5dp">

    </com.rsw.rswtestdemo.views.CircleProgressView>

4，完事了