自定义控件实现圆形头像

Contents

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

思路

---

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

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

实现

---

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

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

使用

---

1 2 3 4 5 6

<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