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();
    }
}

以上是Android自定義View使用Canvas和Paint實現精美UI效果的核心內容，通過學習這些基礎並實踐，我們可以創造出更豐富獨特的自定義View。