Contents

1. 思路
2. 实现
3. 使用

微信等很多软件都有使用圆形头像，圆形头像的确挺好看的，之前都是直接 P 一个圆形图片头像上去骗骗人家，不过时间长了，总得升升级来弄个真的吧。
这次就把这个圆形头像效果加进我的毕设实际。

思路

自定义一个圆形 ImageView.
写一个方法来专门剪切图片.

其实两种方法的实现都差不多，把剪切的方法放到 ImageView 的 onDraw 方法里面去，再作修正，就 OK 了。

实现

下面我们来开始实现，上代码

package com.bookingSystem.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
 * 自定义圆形 ImageView
 * @author 钟买能
 * @version 1.0
 * @since 2014-5-30
 */
public class RoundImageView extends ImageView {
	
	public RoundImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public RoundImageView(Context context, AttributeSet attrs) {
		super(context, attrs);

	}

	public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

	}

	@Override
	protected void onDraw(Canvas canvas) {
		
		// 获取当前控件的 drawable
		Drawable drawable = getDrawable();

		if (drawable == null) {
			return;
		}

		// 这里 get 回来的宽度和高度是当前控件相对应的宽度和高度（在 xml 设置）
		if (getWidth() == 0 || getHeight() == 0) {
			return; 
		}
	
		// 画笔
		Paint paint = new Paint();
		// 颜色设置
		paint.setColor(0xff424242);
		// 抗锯齿
		paint.setAntiAlias(true);
		//Paint 的 Xfermode，PorterDuff.Mode.SRC_IN 取两层图像的交集部门, 只显示上层图像。 
		PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
		// 获取 bitmap，即传入 imageview 的 bitmap
		Bitmap bitmap =  ((BitmapDrawable)drawable).getBitmap() ;

		// 标志
		int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
		canvas.saveLayer(0, 0, getWidth(), getHeight(), null, saveFlags);
		
		// 画遮罩，画出来就是一个和空间大小相匹配的圆
		canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2, paint);
		paint.setXfermode(xfermode);
		
		// 空间的大小 /bitmap 的大小 =bitmap 缩放的倍数
		float scaleWidth = ((float) getWidth()) / bitmap.getWidth();
		float scaleHeight = ((float) getHeight()) / bitmap.getHeight();
		
	    Matrix matrix = new Matrix();
	    matrix.postScale(scaleWidth, scaleHeight); 
	    
	    //bitmap 缩放
	    bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
	    
	    //draw 上去
		canvas.drawBitmap(bitmap, 0, 0, paint);
//		paint.setXfermode(null);
		canvas.restore();

	}

}

使用

        <com.bookingSystem.widget.RoundImageView
            android:id="@+id/comment_from_image"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/ic_launcher" />

com.bookingSystem.widget.RoundImageView：自定义控件所在的包名

效果：

其中有点不是很明白的就是，以下这两句的真正用处。

1
2

int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
canvas.saveLayer(0, 0, getWidth(), getHeight(), null, saveFlags);

若把这两行代码删掉的话，会出现圆形头像闪现现象，圆形会出现一秒钟立刻打回原型。
这里是参考

http://blog.csdn.net/xyz_lmn/article/details/22745997

自定义控件实现圆形头像

思路

实现

使用

你可能感兴趣的:(自定义控件实现圆形头像)