Android 自绘控件

下面是详细讲解“Android 自绘控件”的完整攻略：

什么是自绘控件

自绘控件是指需要自己实现 onDraw() 方法来实现自定义绘制的控件。在 Android 中，几乎所有控件都是由系统提供的，它们的样式和尺寸都是固定的，但这样的控件往往不能满足我们的需求，因此我们需要自己定义和修改控件的样式和行为。

自绘控件的基本原理

Android 中的 View 类是所有控件的基类，每一个 View 在显示时都需要经过测量(measure)、布局(layout)和绘制(draw)三个过程，其中绘制过程是用于绘制控件的图像。在 View 中，onDraw() 方法是绘制图像的核心方法，使用 Canvas 可以绘制基本图形、文本、图像等等。

自绘控件的实现流程如下：

继承 View 或其子类，复写 onDraw() 方法；
在 onDraw() 方法中绘制自定义的图像；
在布局文件或代码中使用自定义控件。

自绘控件的实现步骤

1. 继承 View 或其子类，并复写 onDraw() 方法

public class CustomView extends View {
    public CustomView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        // 在这里绘制自定义的图像
    }
}

2. 在 onDraw() 方法中绘制自定义图像

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

    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);
    // 绘制一个半径为 100 的红色实心圆形
}

3. 在布局文件或代码中使用自定义控件

<com.example.myapp.CustomView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

示例说明

示例1：自定义一个带文字的圆形进度条

新建一个继承自 View 的类 CircleProgressBar；
在 onDraw() 方法中绘制圆形及进度条；
用属性控制进度条进度。

示例代码：

public class CircleProgressBar extends View {

    private int mProgress = 0;
    private Paint mPaint;
    private RectF mRectF;
    private int mStrokeWidth = 40;

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

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

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(mStrokeWidth);

        mRectF = new RectF();
    }

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

        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2 - mStrokeWidth / 2;

        mRectF.set(width / 2 - radius, height / 2 - radius, width / 2 + radius, height / 2 + radius);
        mPaint.setColor(Color.parseColor("#E3E3E3"));
        canvas.drawArc(mRectF, 0, 360, false, mPaint);

        mPaint.setColor(Color.BLUE);
        canvas.drawArc(mRectF, -90, mProgress * 360 / 100, false, mPaint);

        mPaint.setColor(Color.BLACK);
        String text = mProgress + "%";
        float textWidth = mPaint.measureText(text);
        float x = width / 2 - textWidth / 2;
        float y = height / 2 + mPaint.getTextSize() / 2;
        canvas.drawText(text, x, y, mPaint);
    }

    public void setProgress(int progress) {
        if (progress >= 0 && progress <= 100) {
            mProgress = progress;
            invalidate();
        }
    }
}

示例2：自定义一个带波浪的音量条

新建一个继承自 View 的类 VolumeView；
在 onDraw() 方法中绘制静态的音量条和波浪线；
在 updateWave() 方法中更新波浪线的位置，并定时调用该方法，让波浪线动起来。