Android 自定義View修煉-實現自定義圓形、圓角和橢圓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); 
　　　　　　　　　drawable.setCallback(null);
            }
            bmp.recycle();
        }else{
            //如果緩存還存在的情況
            mPaint.setXfermode(null);  
            canvas.drawBitmap(bmp, 0.0f, 0.0f, mPaint);  
　　　　　　　bmp.recycle();

　　　　　　  return; 
　　} 
}

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    mMaskBitmap.recycle();
    mMaskBitmap = null;
}

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