Android自定义View：掌握Canvas和Paint实现精美UI效果

一、Canvas和Paint基础

Canvas和Paint是Android自定义View中最为基础的两个类。Canvas类表示一个绘图面，可以在其上面执行各种绘制操作。Paint类则表示绘制的笔刷，可以设置其粗细、颜色、线条样式等。因此，我们在自定义View时需要了解Canvas和Paint的基础使用方法。

首先，在自定义View的onDraw()方法中创建一个Canvas对象，并用Paint对象设置绘图选项。接着，通过Canvas的绘制方法绘制我们希望看到的图形。最后，将绘制好的图形显示在屏幕上。

public class MyView extends View {
    private Paint mPaint; // 画笔
    private Canvas mCanvas; // 画布

    public MyView(Context context) {
        super(context);
        mPaint = new Paint();
        mCanvas = new Canvas();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        mPaint.setColor(Color.RED); // 设置画笔颜色
        mPaint.setStrokeWidth(5); // 设置画笔宽度

        // 在画布上绘制圆形
        mCanvas.drawCircle(100, 100, 50, mPaint);
        
        // 将画布显示在屏幕上
        canvas.drawBitmap(mCanvasBitmap, 0, 0, null);
    }
}

二、自定义形状绘制

在Android自定义View中，我们可以通过Canvas和Paint类实现各种自定义形状的绘制。例如线条、矩形、圆形、椭圆以及各种不规则图形等等。

下面以绘制一个扇形为例，展示具体的实现过程：

public class ArcView extends View {
    private Paint mPaint; // 画笔
    private RectF mRectF; // 矩形
    private int mWidth, mHeight; // 控件宽高

    public ArcView(Context context) {
        super(context);
        mPaint = new Paint();
        mRectF = new RectF();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        mRectF.set(0, 0, mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        mPaint.setColor(Color.RED); // 设置画笔颜色
        mPaint.setStyle(Paint.Style.FILL); // 设置画笔样式为实心
        canvas.drawArc(mRectF, -45, 90, true, mPaint); // 绘制扇形
    }
}

三、高级特效实现

使用Canvas和Paint结合其他的特效类库，能够产生一些非常精美的UI效果。例如水波纹效果、模糊效果、圆角矩形等等。

现在以绘制一个带水波纹的圆形按钮为例：

public class RippleButtonView extends View {
    private Paint mPaint; // 画笔
    private Bitmap mBitmap; // Bitmap
    private BitmapShader mBitmapShader; // BitmapShader
    private int mRadius; // 圆的半径
    private Shader mShader; // 渲染器
    private PorterDuffXfermode mPorterDuffXfermode; // 混合模式

    public RippleButtonView(Context context) {
        super(context);
        mPaint = new Paint();
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
        mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        
        mPaint.setShader(mShader);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

        mPaint.setShader(null);
        mPaint.setXfermode(mPorterDuffXfermode);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

        mPaint.setXfermode(null);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                createShader();
                break;
            case MotionEvent.ACTION_UP:
                mShader = null;
                break;
        }

        return true;
    }

    private void createShader() {
        mShader = new RadialGradient(mRadius, mRadius, mRadius,
                new int[]{Color.TRANSPARENT, Color.parseColor("#66FFFFFF")},
                null, Shader.TileMode.CLAMP);

        mPaint.setShader(mShader);
        invalidate();
    }
}