Android自定义圆环进度条/刻度仪表盘(单环单点带进度动画)

效果图:

1.自定义SleepDashBoardView

/**
 * 睡眠刻度仪表盘
 */
public class SleepDashBoardView extends View {
    private static final float START_ANGLE = 135f;
    private static final float MAX_ANGLE = 270f;
    private float progress = 0;
    private float centerX;
    private float centerY;
    private float width;
    private float height;
    private int lineWidth = dp2px(8); // 绘制圆环的线宽
    private int pointWidth = dp2px(2); // 绘制圆点线宽
    private int rectangleWidth = dp2px(1); // 绘制矩形的线宽

    private SweepGradient sweepGradient;

    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint rectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint pointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private ObjectAnimator animator;

    private int[] colors = {
            Color.parseColor("#C6BCFF"),
            Color.parseColor("#C6BCFF"),//浅色
            Color.parseColor("#C6BCFF"),
            Color.parseColor("#C6BBFF"),
            Color.parseColor("#AEA0F6"),
            Color.parseColor("#9A8AEF"),
            Color.parseColor("#9888EF"),
            Color.parseColor("#9888EF"),//深色
    };

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

    public SleepDashBoardView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SleepDashBoardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStrokeWidth(lineWidth);

        bgPaint.setColor(Color.parseColor("#F6F6F6"));
        bgPaint.setStyle(Paint.Style.STROKE);
        bgPaint.setStrokeCap(Paint.Cap.ROUND);
        bgPaint.setStrokeWidth(lineWidth);

        pointPaint.setColor(Color.WHITE);
        pointPaint.setStyle(Paint.Style.STROKE);
        pointPaint.setStrokeWidth(pointWidth);

        rectPaint.setColor(Color.WHITE);
    }

    private void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    public void setSleepProgress(float progress) {
        animator = ObjectAnimator.ofFloat(this, "progress", 0, progress);
        animator.setDuration(2000);
        animator.setInterpolator(new FastOutSlowInInterpolator());
        animator.start();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        width = getWidth();
        height = getHeight();
        centerX = getWidth() / 2;
        centerY = getHeight() / 2;
        sweepGradient = new SweepGradient(centerX, centerY, colors, null);
        //改变开始渐变的角度(默认从右边开始画圆渐变,旋转90度就从下方开始画圆渐变,旋转之后更好设置颜色渐变值)
        Matrix matrix = new Matrix();
        matrix.setRotate(90, centerX, centerY);
        sweepGradient.setLocalMatrix(matrix);
        paint.setShader(sweepGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制环形
        drawArc(canvas);
        // 绘制矩形白条
//        draRectangle(canvas);
        // 绘制末尾圆点
        drawPoint(canvas);
    }

    private void drawArc(Canvas canvas) {
        float sweepAngle = MAX_ANGLE * progress / 100;
        int padding = lineWidth + pointWidth;
        canvas.drawArc(padding, padding, width - padding, height - padding, START_ANGLE, MAX_ANGLE, false, bgPaint);
        canvas.drawArc(padding, padding, width - padding, height - padding, START_ANGLE, sweepAngle, false, paint);
    }

    private void draRectangle(Canvas canvas) {
        float sweepAngle = MAX_ANGLE * progress / 100;
        if (sweepAngle > 70) {
            // 旋转到左侧
            canvas.save();
            canvas.rotate(-80f, centerX, centerY);
            canvas.drawRect(centerX - rectangleWidth, rectangleWidth, centerX + rectangleWidth, ConvertUtils.dp2px(20), rectPaint);
            canvas.restore();
        }
        if (sweepAngle > 150f) {
            //绘制中间矩形
            canvas.drawRect(centerX - rectangleWidth, 0, centerX + rectangleWidth, ConvertUtils.dp2px(20), rectPaint);
        }
        if (sweepAngle > 230f) {
            // 旋转到右侧
            canvas.save();
            canvas.rotate(80f, centerX, centerY);
            canvas.drawRect(centerX - rectangleWidth, 0, centerX + rectangleWidth, ConvertUtils.dp2px(20), rectPaint);
            canvas.restore();
        }
    }

    private void drawPoint(Canvas canvas) {
        Path path = new Path();
        float sweepAngle = MAX_ANGLE * progress / 100;
        int padding = lineWidth + pointWidth;
        path.addArc(padding, padding, width - padding, height - padding, START_ANGLE, sweepAngle);
        PathMeasure measure = new PathMeasure(path, false);
        float[] pos = new float[2];
        measure.getPosTan(measure.getLength() - 1, pos, null);
        pointPaint.setColor(Color.parseColor("#7F43FB"));
        pointPaint.setStyle(Paint.Style.FILL);//仅填充内部
        canvas.drawCircle(pos[0], pos[1], lineWidth - pointWidth, pointPaint);

        pointPaint.setColor(Color.WHITE);
        pointPaint.setStyle(Paint.Style.STROKE);//仅描边
        canvas.drawCircle(pos[0], pos[1], lineWidth - pointWidth, pointPaint);
    }

    public int dp2px(final float dpValue) {
        final float scale = Resources.getSystem().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

2.布局中使用

            <com.hwd.flowfit.ui.widget.SleepDashBoardView
                android:id="@+id/sleepChart"
                android:layout_width="130dp"
                android:layout_height="130dp"
                android:layout_marginStart="30dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

3.设置进度

sleepChart.setSleepProgress(75F)