Android自定义View之酷炫圆环（二）

我来为你详细讲解Android自定义View之酷炫圆环（二）的完整攻略。

1、前言

本文是 Android 自定义 View 系列的第二篇，主要讲解如何实现一个非常酷炫的圆环控件，使用者可以通过设置一些属性来自定义样式，比如说环的宽度、颜色、进度等。代码中会用到一些自定义属性以及一些 Canvas 的绘图技巧，用以实现一个非常酷炫的控件。

2、实现一个简单的圆环

首先，我们先来看如何在 Android 中绘制一个简单的圆环，代码如下：

public class SimpleCircleView extends View {
    private Paint mPaint;

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

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

    public SimpleCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(10f);
        mPaint.setColor(Color.RED);
    }

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

        float radius = (Math.min(getWidth(), getHeight()) - getPaddingLeft() - getPaddingRight()) / 2;

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mPaint);
    }
}

其中，我们在构造方法中初始化画笔，并设置它的一些属性，比如说画笔的样式、抗锯齿、宽度和颜色等。在 onDraw 方法中，则是通过 Canvas 绘制一个圆，圆的半径取决于 View 的宽高以及 Padding。

3、实现一个带进度的圆环

接下来，我们要实现的是一个带进度的圆环，具体思路如下：

1. 通过自定义属性设置圆环的颜色、宽度、进度颜色等；
2. 添加一个 setProgress 方法，当调用该方法时，我们就更新进度并重新绘制整个圆环。

下面是详细的实现代码：

public class ProgressCircleView extends View {
    private int mCircleColor;
    private int mCircleWidth;
    private int mProgressColor;
    private int mProgress;
    private boolean mShowProgressText;

    private Paint mCirclePaint;
    private Paint mProgressPaint;
    private Paint mTextPaint;

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

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

    public ProgressCircleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ProgressCircleView);

        mCircleColor = a.getColor(R.styleable.ProgressCircleView_circleColor, Color.RED);
        mCircleWidth = a.getDimensionPixelSize(R.styleable.ProgressCircleView_circleWidth, 10);
        mProgressColor = a.getColor(R.styleable.ProgressCircleView_progressColor, Color.BLUE);
        mProgress = a.getInt(R.styleable.ProgressCircleView_progress, 0);
        mShowProgressText = a.getBoolean(R.styleable.ProgressCircleView_showProgressText, true);

        a.recycle();

        mCirclePaint = new Paint();
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStrokeWidth(mCircleWidth);
        mCirclePaint.setColor(mCircleColor);

        mProgressPaint = new Paint();
        mProgressPaint.setStyle(Paint.Style.STROKE);
        mProgressPaint.setAntiAlias(true);
        mProgressPaint.setStrokeWidth(mCircleWidth);
        mProgressPaint.setColor(mProgressColor);

        mTextPaint = new Paint();
        mTextPaint.setStyle(Paint.Style.FILL);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(mProgressColor);
        mTextPaint.setTextSize(30f);
    }

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

        float radius = (Math.min(getWidth(), getHeight()) - getPaddingLeft() - getPaddingRight()) / 2;

        canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, mCirclePaint);

        RectF oval = new RectF(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius, getHeight() / 2 + radius);

        canvas.drawArc(oval, -90, 360 * mProgress / 100, false, mProgressPaint);

        if (mShowProgressText) {
            String progressText = mProgress + "%";
            Rect bounds = new Rect();
            mTextPaint.getTextBounds(progressText, 0, progressText.length(), bounds);
            float x = getWidth() / 2 - bounds.width() / 2;
            float y = getHeight() / 2 + bounds.height() / 2;
            canvas.drawText(progressText, x, y, mTextPaint);
        }
    }

    public void setProgress(int progress) {
        if (progress < 0 || progress > 100) {
            throw new IllegalArgumentException("progress must be between 0 and 100");
        }

        mProgress = progress;
        invalidate();
    }
}

在自定义 View 的构造方法中，我们获取自定义属性的值，并初始化画笔。在 onDraw 方法中，我们首先绘制一个圆环，然后根据进度画出圆弧，最后如果需要显示进度文字，则画出进度文字。在 setProgress 方法中，我们会对传进来的进度值进行合法性检查，然后更新进度，并调用 invalidate() 方法来重绘整个圆环。

4、总结

至此，我们已经完成了一个非常炫酷的圆环控件，并讲解了在 Android 中自定义 View 的相关技巧。希望这篇文章能给你带来一些帮助，如果你还想要了解更多关于 Android 自定义 View 的内容，可以继续关注我的博客，在博客中我会持续更新相关的文章。