上次看了鴻洋的部落格，其中有一篇部落格實現的是字型逐漸變色的效果，不過其使用的是clipRect實現的，今天給大家帶來另一種實現方式，通過XferMode來實現。先看效果吧。

先說下實現原理：我們首先繪製當前顯示的文字內容，然後設定xfermode的值為PorterDuff.Mode.SRC_IN，然後子啊繪製一個和我們當前view高度相同，並且寬度不斷增大的綠色矩形。廢話不多說，下面看具體實現：

自定義屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="text_value"
 
 format="string"/>
    <attr name="text_size" format="dimension"/>
    <declare-styleable name="filter_text">
        <attr name="text_value" />
        <attr name="text_size" />
    </declare-styleable>

</resources>

這裡我只定義了兩個屬性：

• text_value 表示需要繪製的文字內容
• text_size 表示繪製的文字字型的大小

獲取自定義屬性並且初始化

在構造方法中，獲取自定義的屬性，並且進行必要的初始化工作。

public FilterText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //獲取自定義屬性的值
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.filter_text);
        mTextValue = array.getString
 
(R.styleable.filter_text_text_value);
        mTextSize = array.getDimensionPixelSize(R.styleable.filter_text_text_size, (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
        //TypedArray用完記得回收
        array.recycle();

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //設定文字的字型大小
        mPaint.setTextSize(mTextSize);
        mBound = new Rect();
        //用來計算當前mTextValue的寬度和高度
        mPaint.getTextBounds(mTextValue, 0, mTextValue.length(),mBound);

    }

這裡需要注意，由於我們等下對於該自定義view的寬高會設定為wrap_content,所以需要重寫onMeasure方法來測量我們當前的view的寬高，所以需要在測量之前設定好字型的大小，否則會影響測量值。

重寫onMeasure方法

    /**
     * 測量當前view的大小
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int finalWidth = 0;
        int finalHeight = 0;

        if (widthMode == MeasureSpec.EXACTLY) {
            //如果測量模式是EXACTLY型別，則直接使用推薦值加上padding的值
            finalWidth = widthSize + getPaddingLeft() + getPaddingRight();
        } else {
            finalWidth = getPaddingLeft() + getPaddingRight() + mBound.width();
            if (widthMode == MeasureSpec.AT_MOST) {
                //如果測量模式是AT_MOST，則取期望值和我們計算出的最小值
                finalWidth = Math.min(finalWidth, widthSize);
            }
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            finalHeight = heightSize + getPaddingBottom() + getPaddingTop();
        } else {
            finalHeight = getPaddingTop() + getPaddingBottom() + mBound.height();
            if (heightMode == MeasureSpec.AT_MOST) {
                finalHeight = Math.min(finalHeight, heightSize);
            }
        }
        //記得呼叫setMeasuredDimension方法
        setMeasuredDimension(finalWidth, finalHeight);
    }

這裡首先獲得寬高的測量模式和推薦的值，然後根據具體的測量模式來計算當前view的寬度和高度。最後記得呼叫setMeasuredDimension方法。

重寫onDraw方法

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

        int width = getWidth();
        int height = getHeight();

        Paint paint = new Paint();

        //建立一個圖層，在圖層上演示圖形混合後的效果
        int sc = canvas.saveLayer(0, 0, width, height, null, Canvas.MATRIX_SAVE_FLAG |
                Canvas.CLIP_SAVE_FLAG |
                Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                Canvas.CLIP_TO_LAYER_SAVE_FLAG);

        //先繪製“dest
        canvas.drawBitmap(getDesBitmap(width,height), 0 , 0 , paint);
        //設定Paint的Xfermode
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        mRectWidth += 10;
        canvas.drawBitmap(getSrcBitmap(mRectWidth,height), 0 , 0, paint);
        //重置當前Xfermode
        paint.setXfermode(null);
        // 還原畫布
        canvas.restoreToCount(sc);

        if (mRectWidth < width) {//不斷重繪當前view
            try {
                Thread.sleep(300);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            invalidate();
        }

    }

主要分為以下幾步：

• 首先獲得當前view的寬度和高度

int width = getWidth();
int height = getHeight();

• 建立一個圖層，在圖層上演示圖形混合後的效果，注意一定要建立該圖層，否則會出現兩個圖形交集之外部分為黑色

int sc = canvas.saveLayer(0, 0, width, height, null, Canvas.MATRIX_SAVE_FLAG |
                Canvas.CLIP_SAVE_FLAG |
                Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                Canvas.CLIP_TO_LAYER_SAVE_FLAG);

• 繪製src和dst

//先繪製src
canvas.drawBitmap(getSrcBitmap(width,height), 0 , 0 , paint);
//設定Paint的Xfermode
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
//每次繪製之前將dst的寬度加上10個畫素，高度保持和src相同
mRectWidth += 10;
canvas.drawBitmap(getDesBitmap(mRectWidth,height), 0 , 0, paint);
//重置當前Xfermode
paint.setXfermode(null);
// 還原畫布
canvas.restoreToCount(sc);

這裡的getSrcBitmap和getDesBitmap就是我們分別繪製的文字和過濾的背景色矩形，如下：

// 建立一個矩形bitmap，作為src的bitmap
private Bitmap getSrcBitmap(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        //繪製邊框
        p.setStrokeWidth(3);
        p.setColor(Color.RED);
        p.setStyle(Paint.Style.STROKE);
        c.drawRect(0, 0, w, h, p);

        //繪製文字
        p.setColor(Color.BLACK);
        p.setStyle(Paint.Style.FILL);
        p.setTextSize(mTextSize);
        c.drawText(mTextValue,w / 2 - mBound.width() / 2, h / 2 + mBound.height() / 2, p);
        return bm;
}


// 建立一個矩形bitmap，作為dst的bitmap
private Bitmap getDesBitmap(int w, int h) {
        //首先建立一個位圖
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        //建立一個和當前點陣圖相同大小的canvas物件
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(Color.GREEN);
        c.drawRect(0,0,w,h ,p);
        return bm;
}

總結以下：

• 測量當前view的寬和高，如果有字型大小需要在onMeasure測量之前就設定其大小，否則影響測量值
• 在onDraw方法中具體的繪製工作：
  
• 建立一個圖層，在圖層上演示圖形混合後的效果
• 先繪製src
• 設定Paint的Xfermode,PorterDuff.Mode.SRC_IN
• 繪製dst
• 重置當前Xfermode

• 還原畫布

  ok，今天就到這裡了，希望大家喜歡。

原始碼下載