android自定义view制作圆形进度条效果

下面我将为你详细讲解Android自定义View制作圆形进度条效果的完整攻略。

一、前置知识

在学习制作圆形进度条之前，我们需要掌握以下一些知识：

• Android自定义View的基本原理
• 画笔(Paint)的使用
• Canvas的使用

如果你对这些知识还不是很熟悉，可以查看相关的资料和学习。

二、绘制圆形进度条的原理

实现圆形进度条的关键在于理解角度的概念，以及如何绘制弧形和圆弧。

在绘制圆形进度条的过程中，我们需要分别绘制圆弧的背景和进度。

具体步骤如下：

1. 首先，我们需要定义一个Paint对象来绘制圆弧。下面是一个绘制圆弧的示例代码：

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);

1. 接下来，我们需要根据进度值计算出圆弧的起始角度和扫描角度。假设进度范围为0~100，那么圆弧的起始角度为-90度，扫描角度为当前进度值所对应的角度。

float startAngle = -90;
float sweepAngle = progress * 360 / 100;

1. 绘制圆弧背景。通过调用Canvas的drawArc()方法来绘制一个圆弧，具体如下：

canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);

其中，rectF表示我们要绘制圆弧的矩形区域，false表示绘制的是圆弧而非扇形。

1. 绘制进度圆弧。这个步骤和上面的步骤非常类似，只需要将Paint对象的颜色改为显示进度的颜色即可。

通过上面的步骤，我们就能完成绘制一个简单的圆形进度条了。

三、制作圆形进度条的示例代码

下面是一个制作圆形进度条的示例代码，供你参考：

public class CircleProgressBar extends View {

    private Paint mBgPaint;
    private Paint mProgressPaint;

    private float mProgress;   // 进度值，取值范围[0,100]

    public CircleProgressBar(Context context) {
        super(context);
        init();
    }

    public CircleProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mBgPaint = new Paint();
        mBgPaint.setColor(Color.GRAY);
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setStrokeWidth(dp2px(5));

        mProgressPaint = new Paint();
        mProgressPaint.setColor(Color.RED);
        mProgressPaint.setStyle(Paint.Style.STROKE);
        mProgressPaint.setStrokeWidth(dp2px(5));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int width = getWidth();
        int height = getHeight();
        float cx = width / 2f;
        float cy = height / 2f;

        float radius = Math.min(width, height) / 2f - dp2px(5);  // 半径

        RectF rectF = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);

        float startAngle = -90;
        float sweepAngle = mProgress * 360 / 100;

        canvas.drawArc(rectF, startAngle, 360, false, mBgPaint);   // 绘制背景圆弧
        canvas.drawArc(rectF, startAngle, sweepAngle, false, mProgressPaint);  // 绘制进度圆弧
    }

    /**
     * 设置进度值
     * @param progress 进度值，取值范围[0,100]
     */
    public void setProgress(float progress) {
        if (progress > 100) {
            progress = 100;
        } else if (progress < 0) {
            progress = 0;
        }

        mProgress = progress;
        invalidate();
    }

    /**
     * dp转换为px
     * @param dpValue dp值
     * @return px值
     */
    private float dp2px(float dpValue) {
        float density = getResources().getDisplayMetrics().density;
        return dpValue * density + 0.5f;
    }
}

上面这个示例代码中，实现了一个简单的圆形进度条。通过调用setProgress()方法设置进度值，圆形进度条会自动根据进度值绘制出相应的进度圆弧。

四、制作自定义颜色圆形进度条的示例

上面的示例代码是一个简单的圆形进度条，但是颜色比较单调。我们也可以给圆形进度条增加一个自定义的渐变色背景。

下面是一个实现自定义颜色圆形进度条的示例代码：

public class CustomProgressBar extends View {

    private Paint mBgPaint;
    private Paint mProgressPaint;

    private float mProgress;   // 进度值，取值范围[0,100]

    private int[] mBgColors = new int[]{Color.parseColor("#008080"), Color.parseColor("#7CFC00")};  // 圆形进度条背景颜色数组
    private int[] mProgressColors = new int[]{Color.parseColor("#FF6347"), Color.parseColor("#FFD700")}; // 圆形进度条进度颜色数组

    public CustomProgressBar(Context context) {
        super(context);
        init();
    }

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mBgPaint = new Paint();
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setStrokeWidth(dp2px(5));

        mProgressPaint = new Paint();
        mProgressPaint.setStyle(Paint.Style.STROKE);
        mProgressPaint.setStrokeWidth(dp2px(5));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int width = getWidth();
        int height = getHeight();
        float cx = width / 2f;
        float cy = height / 2f;

        float radius = Math.min(width, height) / 2f - dp2px(5);  // 半径

        // 绘制圆形进度条背景渐变色
        SweepGradient bgSweepGradient = new SweepGradient(
                cx, cy,
                mBgColors,
                null
        );
        mBgPaint.setShader(bgSweepGradient);

        RectF bgRectF = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);
        canvas.drawArc(bgRectF, 0, 360, false, mBgPaint);

        // 绘制进度圆弧
        SweepGradient progressSweepGradient = new SweepGradient(
                cx, cy,
                mProgressColors,
                null
        );
        mProgressPaint.setShader(progressSweepGradient);

        float startAngle = -90;
        float sweepAngle = mProgress * 360 / 100;

        RectF progressRectF = new RectF(cx - radius, cy - radius, cx + radius, cy + radius);
        canvas.drawArc(progressRectF, startAngle, sweepAngle, false, mProgressPaint);
    }

    /**
     * 设置进度值
     * @param progress 进度值，取值范围[0,100]
     */
    public void setProgress(float progress) {
        if (progress > 100) {
            progress = 100;
        } else if (progress < 0) {
            progress = 0;
        }

        mProgress = progress;
        invalidate();
    }

    /**
     * dp转换为px
     * @param dpValue dp值
     * @return px值
     */
    private float dp2px(float dpValue) {
        float density = getResources().getDisplayMetrics().density;
        return dpValue * density + 0.5f;
    }
}

上面这个示例代码中，使用SweepGradient类来绘制圆弧的渐变背景色和进度色。同时，也提供了setProgress()方法来设置进度值。

综上所述，这就是Android自定义View制作圆形进度条效果的完整攻略。