Android實現自訂圓形、圓角和橢圓ImageView（使用Xfermode圖形渲染方法）

標籤：

一：簡介：

在上一篇《Android實現圓形、圓角和橢圓自訂圖片View（使用BitmapShader圖形渲染方法）》博文中，採用BitmapShader方法實現自訂的圓形、圓角等自訂ImageView，這篇我們將採用更為常見的Xfermode渲染模式方案來實現圓形、圓角和橢圓樣式的ImageView，同樣本執行個體也是直接繼承ImageView，

這樣可以省很多事情，比如測量步驟，以及不需要自己去寫設定圖片的方法，本文使用Xfermode模式中的DST_IN模式來實現要達到的效果，當然大家也可以採用其他的模式，比如SRC_IN等都可以實現該效果。

（照例完整原始碼在文章的最後給出哈）

二：：

三、Xfermode渲染模式簡介：

xfermode影響在Canvas已經有的映像上繪製新的顏色的方式 
* 正常的情況下,在映像上繪製新的形狀,如果新的Paint不是透明的,那麼會遮擋下面的顏色. 
* 如果新的Paint是透明的,那麼會被染成下面的顏色 

下面的Xfermode子類可以改變這種行為： 

AvoidXfermode  指定了一個顏色和容差，強制Paint避免在它上面繪圖(或者只在它上面繪圖)。 

PixelXorXfermode  當覆蓋已有的顏色時，應用一個簡單的像素XOR操作。 

PorterDuffXfermode  這是一個非常強大的轉換模式，使用它，可以使用映像合成的16條Porter-Duff規則的任意一條來控制Paint如何與已有的Canvas映像進行互動。

這裡不得不提到那個經典的圖：

上面的16種模式的說明如下：

從上面我們可以看到PorterDuff.Mode為枚舉類,一共有16個枚舉值:

1.PorterDuff.Mode.CLEAR  

  所繪製不會提交到畫布上。
2.PorterDuff.Mode.SRC

   顯示上層繪製圖片
3.PorterDuff.Mode.DST

  顯示下層繪製圖片
4.PorterDuff.Mode.SRC_OVER

  正常繪製顯示，上下層繪製疊蓋。
5.PorterDuff.Mode.DST_OVER

  上下層都顯示。下層居上顯示。
6.PorterDuff.Mode.SRC_IN

   取兩層繪製交集。顯示上層。
7.PorterDuff.Mode.DST_IN

  取兩層繪製交集。顯示下層。
8.PorterDuff.Mode.SRC_OUT

 取上層繪製非交集部分。
9.PorterDuff.Mode.DST_OUT

 取下層繪製非交集部分。
10.PorterDuff.Mode.SRC_ATOP

 取下層非交集部分與上層交集部分
11.PorterDuff.Mode.DST_ATOP

 取上層非交集部分與下層交集部分
12.PorterDuff.Mode.XOR

  異或：去除兩圖層交集部分
13.PorterDuff.Mode.DARKEN

  取兩圖層全部地區，交集部分顏色加深
14.PorterDuff.Mode.LIGHTEN

  取兩圖層全部，點亮交集部分顏色
15.PorterDuff.Mode.MULTIPLY

  取兩圖層交集部分疊加後顏色
16.PorterDuff.Mode.SCREEN

  取兩圖層全部地區，交集部分變為透明色

四、自訂圓形、圓角和橢圓的ImageView的實現

1、測量View的大小,對圓形作特殊處理

/**     * 測量view的大小     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        // TODO Auto-generated method stub        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        //如果類型是圓形，則強制設定view的寬高一致，取寬高的較小值         if(mType == TYPE_CIRCLE){            int width = Math.min(getMeasuredWidth(),getMeasuredHeight());            setMeasuredDimension(width, width);        }    }

2、繪製不同圖形的Bitmap，供onDraw()繪製的時候用

/**     * 繪製不同的圖形Bitmap     */    private Bitmap getDrawBitmap(){        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(mType == TYPE_CIRCLE)        {//繪製圓形             canvas.drawCircle(getWidth() / 2, getWidth() / 2, getWidth() / 2,                      paint);         }else if(mType == TYPE_ROUND)          {//繪製圓角矩形            canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()),                      mRoundBorderRadius, mRoundBorderRadius, paint);          }else if(mType == TYPE_OVAL ){         //繪製橢圓            canvas.drawOval(new RectF(0, 0, getWidth(), getHeight()), mPaint);        }          return bitmap;      }

3、在onDraw（）中繪製出來

/**     * 繪製view的內容     */    @Override    protected void onDraw(Canvas canvas) {        // TODO Auto-generated method stub        //從緩衝中取出bitmap        Bitmap bmp = (mBufferBitmap == null ? null:mBufferBitmap.get());        if(bmp == null || bmp.isRecycled()){            //如果沒有緩衝存在的情況            //擷取drawable            Drawable drawable = getDrawable();            //擷取drawable的寬高            int dwidth = drawable.getIntrinsicWidth();            int dheight = drawable.getIntrinsicHeight();            Log.v("czm","dwidth="+dwidth+",width="+getWidth());            if(null != drawable){                bmp = Bitmap.createBitmap(getWidth(), getHeight(),                          Config.ARGB_8888);                 float scale = 1.0f;                //建立畫布                Canvas drawCanvas = new Canvas(bmp);                //按照bitmap的寬高，以及view的寬高，計算縮放比例；因為設定的src寬高                //比例可能和imageview的寬高比例不同，這裡我們不希望圖片失真；                                  if(mType == TYPE_CIRCLE)                  {//如果是圓形                      scale = getWidth() * 1.0F / Math.min(dwidth, dheight);                  }else if (mType == TYPE_ROUND || mType == TYPE_OVAL)                  {//如果是圓角矩形或橢圓                     // 如果圖片的寬或者高與view的寬高不匹配，計算出需要縮放的比例；                    //縮放後的圖片的寬高，一定要大於我們view的寬高；所以我們這裡取大值；                      scale = Math.max(getWidth() * 1.0f / dwidth, getHeight()                              * 1.0f / dheight);                  }                Log.v("czm","scale="+scale);                //根據縮放比例，設定bounds，即相當於做縮放圖片                  drawable.setBounds(0, 0, (int)(scale * dwidth), (int)(scale * dheight));                drawable.draw(drawCanvas);                //擷取bitmap，即圓形、圓角或橢圓的bitmap                if(mMaskBitmap == null || mMaskBitmap.isRecycled()){                    mMaskBitmap = getDrawBitmap();                }                //為paint設定Xfermode 渲染模式                mPaint.reset();                mPaint.setFilterBitmap(false);                mPaint.setXfermode(mXfermode);                //繪製不同形狀                drawCanvas.drawBitmap(mMaskBitmap, 0, 0,mPaint);                mPaint.setXfermode(null);                                //將準備好的bitmap繪製出來                  canvas.drawBitmap(bmp, 0, 0, null);                  //bitmap緩衝起來，避免每次調用onDraw，分配記憶體                  mBufferBitmap = new WeakReference<Bitmap>(bmp);             }                    }else{            //如果緩衝還存在的情況            mPaint.setXfermode(null);              canvas.drawBitmap(bmp, 0.0f, 0.0f, mPaint);              return;         }    }

4、因為使用了弱引用的緩衝技術，所以需要在重寫invalidate（）方法中做些釋放回收資源等處理：

/**     * 因為使用了緩衝技術，所以需要在invalidate中做些回收釋放資源的處理     */    @Override    public void invalidate() {        // TODO Auto-generated method stub        mBufferBitmap = null;        if(mMaskBitmap != null){            mMaskBitmap.recycle();            mMaskBitmap = null;        }        super.invalidate();    }

五、視圖布局的實現：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"     >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:layout_marginTop="10dp"        android:layout_marginBottom="55dp"        android:orientation="vertical" >        <com.czm.myroundimageview.XCRoundImageViewByXfermode            android:id="@+id/cicleImageView"            android:layout_width="150dp"            android:layout_height="150dp"            android:src="@drawable/img1" />        <com.czm.myroundimageview.XCRoundImageViewByXfermode            android:id="@+id/roundRectImageView"            android:layout_width="125dp"            android:layout_height="145dp"            android:layout_marginTop="15dp"            android:src="@drawable/img2" />        <com.czm.myroundimageview.XCRoundImageViewByXfermode            android:id="@+id/ovalImageView"            android:layout_width="140dp"            android:layout_height="184dp"            android:layout_marginTop="15dp"            android:src="@drawable/img3" />    </LinearLayout></ScrollView>

六、使用和測試自訂ImageView

上面直接繪製的自訂ImageView寫完了，下面就是使用這個自訂的ImageView了，使用方法和普通的ImageView一樣，當作普通控制項使用即可。

package com.czm.myroundimageview;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity {    private XCRoundImageViewByXfermode circleImageView;//圓形圖片    private XCRoundImageViewByXfermode roundRectImageView;//圓角矩形圖片    private XCRoundImageViewByXfermode ovalImageView;//橢圓圖片    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initViews();    }    /**     * 初始化Views     */    private void initViews(){        circleImageView = (XCRoundImageViewByXfermode)findViewById(R.id.cicleImageView);        roundRectImageView = (XCRoundImageViewByXfermode)findViewById(R.id.roundRectImageView);        ovalImageView = (XCRoundImageViewByXfermode)findViewById(R.id.ovalImageView);                roundRectImageView.setType(XCRoundImageViewByXfermode.TYPE_ROUND);        roundRectImageView.setRoundBorderRadius(100);                ovalImageView.setType(XCRoundImageViewByXfermode.TYPE_OVAL);        ovalImageView.setRoundBorderRadius(50);            }   }

七、照例，最後提供完整源碼下載

真題園網：http://www.zhentiyuan.com

立即下載：http://download.csdn.net/detail/jczmdeveloper/8311659

Android實現自訂圓形、圓角和橢圓ImageView（使用Xfermode圖形渲染方法）