先看下效果圖

         

             我們再來看一張CSDN的圓角圖片

            

             從佈局可以看出csdn app 的頭像也是圓角的Image,但可以看到,有明顯的毛刺感,不知道是csdn 程式設計師的疏忽還是 我手機的問題,本人手機(小米note)。不知道其他的小夥伴顯示效果也是這樣。

             好回到主題。其實實現圓角Image的方式有很多,今天所講的是我認為比較簡單的一種。首先我們需要了解Xfermode屬性,什麼意思呢?看一張圖你就明白了

            

                  這是Xfermode屬性的幾種模式和效果,簡單說明一下

                   Src和Dst分別是一張矩形和原型圖片,當我們設定不同的模式,顯示的效果就如上圖所示。關於Xfermode這裡不過多闡述,免得把大家繞暈了,我們這裡只需要關注其中的SrcIn模式,可以看到這個模式取的是兩張圖片的交集部分。這就好辦了,我們通常拿到img圖片都是矩形,我們可以利用canvas畫一個圓,然後利用SrcIn屬性,取img和圓的交集,那麼圓角ImageView是不是就輕易實現了呢?

                   這裡先理一下思路,1、自定義兩個屬性來設定圓角的弧度,以及當前是否畫純圓。2、設定Xfermode屬性為SrcIn 。就這簡單兩步圓角ImageView就實現了,接下來直接上程式碼。



import wu.han.himan_library.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * 
 * @author Mr.Himan
 * @version 1.0<br>
 *          2015年12月16日 09:28:25<br>
 *          圖片圓角實現
 * 
 */
public class CustomImageView extends ImageView {
	private Paint paint;
	private Paint paintBorder;
	private Bitmap mSrcBitmap;
	/**
	 * 圓角的弧度
	 */
	private float mRadius;
	private boolean mIsCircle;

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

	public CustomImageView(Context context, AttributeSet attrs) {
		this(context, attrs, R.attr.customImageViewStyle);
	}

	public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		TypedArray ta = context.obtainStyledAttributes(attrs,
				R.styleable.CustomImageView, defStyle, 0);
		mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);
		mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);
		int srcResource = attrs.getAttributeResourceValue(
				"http://schemas.android.com/apk/res/android", "src", 0);
		if (srcResource != 0)
			mSrcBitmap = BitmapFactory.decodeResource(getResources(),
					srcResource);
		ta.recycle();
		paint = new Paint();
		paint.setAntiAlias(true);
		paintBorder = new Paint();
		paintBorder.setAntiAlias(true);
	}

	@Override
	public void onDraw(Canvas canvas) {
		int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
		int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
		Bitmap image = drawableToBitmap(getDrawable());
		if (mIsCircle) {
			Bitmap reSizeImage = reSizeImageC(image, width, height);
			canvas.drawBitmap(createCircleImage(reSizeImage, width, height),
					getPaddingLeft(), getPaddingTop(), null);

		} else {

			Bitmap reSizeImage = reSizeImage(image, width, height);
			canvas.drawBitmap(createRoundImage(reSizeImage, width, height),
					getPaddingLeft(), getPaddingTop(), null);
		}
	}

	/**
	 * 畫圓角
	 * 
	 * @param source
	 * @param width
	 * @param height
	 * @return
	 */
	private Bitmap createRoundImage(Bitmap source, int width, int height) {
		Paint paint = new Paint();
		paint.setAntiAlias(true);
		Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
		Canvas canvas = new Canvas(target);
		RectF rect = new RectF(0, 0, width, height);
		canvas.drawRoundRect(rect, mRadius, mRadius, paint);
		// 核心程式碼取兩個圖片的交集部分
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		canvas.drawBitmap(source, 0, 0, paint);
		return target;
	}

	/**
	 * 畫圓
	 * 
	 * @param source
	 * @param width
	 * @param height
	 * @return
	 */
	private Bitmap createCircleImage(Bitmap source, int width, int height) {

		Paint paint = new Paint();
		paint.setAntiAlias(true);
		Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);
		Canvas canvas = new Canvas(target);
		canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,
				paint);
		// 核心程式碼取兩個圖片的交集部分
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		canvas.drawBitmap(source, (width - source.getWidth()) / 2,
				(height - source.getHeight()) / 2, paint);
		return target;

	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int width = MeasureSpec.getSize(widthMeasureSpec);
		int height = MeasureSpec.getSize(heightMeasureSpec);
		setMeasuredDimension(width, height);
	}

	/**
	 * drawable轉bitmap
	 * 
	 * @param drawable
	 * @return
	 */
	private Bitmap drawableToBitmap(Drawable drawable) {
		if (drawable == null) {
			if (mSrcBitmap != null) {
				return mSrcBitmap;
			} else {
				return null;
			}
		} else if (drawable instanceof BitmapDrawable) {
			return ((BitmapDrawable) drawable).getBitmap();
		}
		Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
				drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
		drawable.draw(canvas);
		return bitmap;
	}

	/**
	 * 重設Bitmap的寬高
	 * 
	 * @param bitmap
	 * @param newWidth
	 * @param newHeight
	 * @return
	 */
	private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {
		int width = bitmap.getWidth();
		int height = bitmap.getHeight();
		// 計算出縮放比
		float scaleWidth = ((float) newWidth) / width;
		float scaleHeight = ((float) newHeight) / height;
		// 矩陣縮放bitmap
		Matrix matrix = new Matrix();

		matrix.postScale(scaleWidth, scaleHeight);
		return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
	}

	/**
	 * 重設Bitmap的寬高
	 * 
	 * @param bitmap
	 * @param newWidth
	 * @param newHeight
	 * @return
	 */
	private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {
		int width = bitmap.getWidth();
		int height = bitmap.getHeight();
		int x = (newWidth - width) / 2;
		int y = (newHeight - height) / 2;
		if (x > 0 && y > 0) {
			return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);
		}

		float scale = 1;

		if (width > height) {
			// 按照寬度進行等比縮放
			scale = ((float) newWidth) / width;

		} else {
			// 按照高度進行等比縮放
			// 計算出縮放比
			scale = ((float) newHeight) / height;
		}
		Matrix matrix = new Matrix();
		matrix.postScale(scale, scale);
		return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
	}
}
attr.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="Theme">
        <attr name="customImageViewStyle" format="reference" />
    </declare-styleable>
    <!-- 自定義圓角ImageView -->
    <declare-styleable name="CustomImageView">
        <attr name="circle" format="boolean" />
        <attr name="radius" format="dimension" />
    </declare-styleable>

</resources>

到這裡圓角ImageView就實現了,程式碼比較簡單,同樣的我們可以根據Xfermode設定不痛的模式,來實現不同的效果。需要注意的是,在上面程式碼中我做了圖片的壓縮和縮放操作,當我們有時在載入網路圖片的時候,圖片寬高往往是不確定的,所以這裡的壓縮和縮放處理,需要大家根據自己的業務需求進行相應的改動
.