Android Paint API之—— Xfermode與PorterDuff詳解(三)

本節(jié)引言：

上一節(jié)，我們學(xué)習(xí)了Xfermode中的三兒子：PorterDuffXfermode構(gòu)造方法中的為一個(gè)參數(shù)：PorterDuff.Mode，我們?cè)谟^看了16種圖片混排模式后，又自己寫代碼來驗(yàn)證了一下文檔中 18種不同的混排模式，18種是新增了ADD和OVERLAY兩種模式！當(dāng)然，僅僅驗(yàn)證知道是不夠的， 本節(jié)我們來寫個(gè)例子，幫助我們熟悉下實(shí)際當(dāng)中我們?nèi)绾稳ナ褂肞orterDuff.Mode為我們提供的 這些混排模式！本節(jié)帶來的例子是：圓形&圓角圖形的實(shí)現(xiàn)！

在2.3.4 ImageView(圖像視圖)我們最后就講解了一個(gè)最簡(jiǎn)單 繪制圓形ImageView的實(shí)現(xiàn)，原理是在圖片上調(diào)用clipPath切出一個(gè)圓形！

而這節(jié)則是利用PorterDuff.Mode中的DST_IN模式來實(shí)現(xiàn),話不多說，開始本節(jié)內(nèi)容！ PS：本節(jié)例子采自弘洋大神的——Android Xfermode 實(shí)戰(zhàn) 實(shí)現(xiàn)圓形、圓角圖片 另外，還是要貼下PorterDuff.Mode的效果圖：

1.要實(shí)現(xiàn)的效果圖以及實(shí)現(xiàn)流程分析：

運(yùn)行后的效果圖：

嗯，上述就是我們要實(shí)現(xiàn)的一個(gè)效果，通過這個(gè)PorterDuff.Mode.DST_IN模式來實(shí)現(xiàn)！ 我們來分析分析實(shí)現(xiàn)流程：

Step 1： Xfermode無非是兩層圖構(gòu)成，先繪制的叫DST圖(目標(biāo)圖)，后繪制的叫SRC圖(原圖)，我們要實(shí)現(xiàn) 圓形或者圓角，我們可以先把要顯示的圖片繪制出來(DST)，這里我們通過src的屬性進(jìn)行了設(shè)置； 接著再繪制出圓形和圓角(SRC)，我們想顯示的部分是他們相交的地方，而且是圖片部分的內(nèi)容， 所以選擇：DST_IN模式！Step 2： 嗯，知道了原理，接下來我們要考慮自定義ImageView相關(guān)的問題了：我們是想繪制的View是圓角或者圓形，那就需要加個(gè)屬性來判斷，而圓角也需要一個(gè)圓角半徑的 參數(shù)，于是乎我們可以通過自定義屬性(attrs.xml)的方式，然后再自定義View的構(gòu)造方法中，將 這些參數(shù)取出來！接著到圖片大小的計(jì)算了： 首先假如我們?cè)O(shè)置的是圓形的話，則需要讓寬高一致，以最小值為準(zhǔn)，我們可以在onMesure()方法 調(diào)用getMeasuredXxx()獲得寬高，看誰(shuí)小一點(diǎn)，調(diào)用setMeasuredDimension(x, x)；設(shè)置寬高！ 然后，我們?cè)趏nDraw()方法中獲取圖片寬高，接著按照?qǐng)D片寬高，以及View寬高，計(jì)算縮放比例， 假如圖片寬高與View的寬高不匹配，所犯后的圖片寬高一定要大于View的寬高，so，取大值！再接著就到圖片的繪制了，定義一個(gè)繪制圖形的方法，接著初始化畫筆后，設(shè)置setXfermode為 PorterDuff.Mode.DST_IN，先繪制圖片，再繪制圖形最后是圖片緩存的一些東西，這里用了WeakReference來緩存圖片，避免每次onDraw都分配內(nèi)存 與重繪，最后在invalidate中清楚緩存！

大體的實(shí)現(xiàn)流程如上述，知道流程再看代碼就簡(jiǎn)單很多了！

2.代碼實(shí)現(xiàn)：

自定義控件屬性：res/attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleImageView">
        <attr name="Radius" format="dimension"/>
        <attr name="type">
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>
    </declare-styleable>
</resources>

接著是自定義ImageView：CircleImageView.java：

/**
 * Created by Jay on 2015/10/25 0025.
 */
public class CircleImageView extends ImageView {

    private Paint mPaint;
    private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
    private Bitmap mMaskBitmap;
    private WeakReference<Bitmap> mWeakBitmap;

    //圖片相關(guān)的屬性
    private int type;                           //類型，圓形或者圓角
    public static final int TYPE_CIRCLE = 0;
    public static final int TYPE_ROUND = 1;
    private static final int BODER_RADIUS_DEFAULT = 10;     //圓角默認(rèn)大小值
    private int mBorderRadius;                  //圓角大小


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

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        //取出attrs中我們?yōu)閂iew設(shè)置的相關(guān)值
        TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CircleImageView);
        mBorderRadius = tArray.getDimensionPixelSize(R.styleable.CircleImageView_Radius, BODER_RADIUS_DEFAULT);
        type = tArray.getInt(R.styleable.CircleImageView_type, TYPE_CIRCLE);
        tArray.recycle();
    }

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


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (type == TYPE_CIRCLE) {
            int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
            setMeasuredDimension(width, width);    //設(shè)置當(dāng)前View的大小
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //在緩存中取出bitmap
        Bitmap bitmap = mWeakBitmap == null ? null : mWeakBitmap.get();
        if (bitmap == null || bitmap.isRecycled()) {
            //獲取圖片寬高
            Drawable drawable = getDrawable();
            int width = drawable.getIntrinsicWidth();
            int height = drawable.getIntrinsicHeight();

            if (drawable != null) {
                bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
                Canvas drawCanvas = new Canvas(bitmap);
                float scale = 1.0f;
                if (type == TYPE_ROUND) {
                    scale = Math.max(getWidth() * 1.0f / width, getHeight()
                            * 1.0f / height);
                } else {
                    scale = getWidth() * 1.0F / Math.min(width, height);
                }
                //根據(jù)縮放比例，設(shè)置bounds，相當(dāng)于縮放圖片了
                drawable.setBounds(0, 0, (int) (scale * width),
                        (int) (scale * height));

                drawable.draw(drawCanvas);
                if (mMaskBitmap == null || mMaskBitmap.isRecycled()) {
                    mMaskBitmap = getBitmap();
                }

                mPaint.reset();
                mPaint.setFilterBitmap(false);
                mPaint.setXfermode(mXfermode);

                //繪制形狀
                drawCanvas.drawBitmap(mMaskBitmap, 0, 0, mPaint);

                //bitmap緩存起來，避免每次調(diào)用onDraw，分配內(nèi)存
                mWeakBitmap = new WeakReference<Bitmap>(bitmap);

                //繪制圖片
                canvas.drawBitmap(bitmap, 0, 0, null);
                mPaint.setXfermode(null);

            }
        }
        if (bitmap != null) {
            mPaint.setXfermode(null);
            canvas.drawBitmap(bitmap, 0.0f, 0.0f, mPaint);
            return;
        }
    }

    //緩存Bitmap，避免每次OnDraw都重新分配內(nèi)存與繪圖
    @Override
    public void invalidate() {
        mWeakBitmap = null;
        if (mWeakBitmap != null) {
            mMaskBitmap.recycle();
            mMaskBitmap = null;
        }
        super.invalidate();
    }

    //定義一個(gè)繪制形狀的方法

    private Bitmap getBitmap() {
        Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),
                Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);   //抗鋸齒
        paint.setColor(Color.BLACK);
        if (type == TYPE_ROUND) {
            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),
                    mBorderRadius, mBorderRadius, paint);
        } else {
            canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2, paint);
        }
        return bitmap;
    }
}

最后在布局文件那里調(diào)用下:activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.jay.xfermodedemo1.CircleImageView
        android:layout_width="160dp"
        android:layout_height="240dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_bg_meizi2"
        app:type="circle" />

    <com.jay.xfermodedemo1.CircleImageView
        android:layout_width="160dp"
        android:layout_height="280dp"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_bg_meizi1"
        app:Radius="30dp"
        app:type="round" />
    
</LinearLayout>

好的，代碼一次看不懂，看多兩次就懂的了~

3.本節(jié)代碼示例下載：

XfermodeDemo1.zip

本節(jié)小結(jié)：

本節(jié)我們講解了Xfermode與PorterDuff的第一個(gè)應(yīng)用例子，設(shè)置DST_IN模式來實(shí)現(xiàn) 圓形和圓角圖片ImageView的定制，相信大家對(duì)PorterDuff的簡(jiǎn)單應(yīng)用已經(jīng)有些眉目了， 打鐵趁熱，下一節(jié)我們同一會(huì)寫個(gè)例子練練手~好的，就說這么多，謝謝~