Android使用Xfermode图形渲染方法实现自定义圆形、圆角和椭圆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的实现

import java.lang.ref.WeakReference;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;

public class CustomImageView extends ImageView {
	
	public final static int TYPE_CIRCLE = 0;
	public final static int TYPE_ROUND = 1;
	public final static int TYPE_OVAL = 2;
	
	private int mType;
	private int mRoundBorderRadius;
	
	private Paint mPaint;
	private Bitmap mMaskBitmap;
	private WeakReference mBufferBitmap;
	private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
	

	public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
		super(context, attrs, defStyleAttr, defStyleRes);
		mPaint = new Paint();
	}

	public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
		this(context, attrs, defStyleAttr, 0);
	}

	public CustomImageView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

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

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		//如果类型是圆形，则强制设置view的宽高一致，取宽高的较小值 
		if (mType == TYPE_CIRCLE) {
			int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
			setMeasuredDimension(width, width);
		}
	}

	@Override
	protected void onDraw(Canvas canvas) {
		//		super.onDraw(canvas);
		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(bmp);
			}

		} else {
			//如果缓存还存在的情况
			mPaint.setXfermode(null);
			canvas.drawBitmap(bmp, 0.0f, 0.0f, mPaint);
			return;
		}
	}

	@Override
	public void invalidate() {
		super.invalidate();
		mBufferBitmap = null;
		if (mMaskBitmap != null) {
			mMaskBitmap.recycle();
			mMaskBitmap = null;
		}
		super.invalidate();
	}
	

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

}