Android之圆头像

摘抄至：http://blog.csdn.net/doublefi123/article/details/8795282

在很多应用中，我们看到，个人主页里面的头像一般都是圆的，设计成圆的会使整个界面布局变的优雅漂亮。那么，怎么使头像变圆呢？有的人说可以在上面加一个中间为透明圆形的png图，用它来遮盖住头像不就行了嘛，但是png四周始终始终是不透明的，怎么做也达不到如下的效果图的。

下面我们讲讲怎么做成的吧。

首先创建一个继承ImageView的抽象类MaskedImage。让他重写onDraw方法。代码如下

[java] view plain copy print ?

1. public abstract class MaskedImage extends ImageView { 
2.     private static final Xfermode MASK_XFERMODE; 
3.     private Bitmap mask; 
4.     private Paint paint; 
5.  
6.     static { 
7.         PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN; 
8.         MASK_XFERMODE = new PorterDuffXfermode(localMode); 
9.     } 
10.  
11.     public MaskedImage(Context paramContext) { 
12.         super(paramContext); 
13.     } 
14.  
15.     public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) { 
16.         super(paramContext, paramAttributeSet); 
17.     } 
18.  
19.     public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { 
20.         super(paramContext, paramAttributeSet, paramInt); 
21.     } 
22.  
23.     public abstract Bitmap createMask(); 
24.  
25.     protected void onDraw(Canvas paramCanvas) { 
26.         Drawable localDrawable = getDrawable(); 
27.         if (localDrawable == null) 
28.             return; 
29.         try { 
30.             if (this.paint == null) { 
31.                 Paint localPaint1 = new Paint(); 
32.                 this.paint = localPaint1; 
33.                 this.paint.setFilterBitmap(false); 
34.                 Paint localPaint2 = this.paint; 
35.                 Xfermode localXfermode1 = MASK_XFERMODE; 
36.                 @SuppressWarnings("unused") 
37.                 Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1); 
38.             } 
39.             float f1 = getWidth(); 
40.             float f2 = getHeight(); 
41.             int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31); 
42.             int j = getWidth(); 
43.             int k = getHeight(); 
44.             localDrawable.setBounds(0, 0, j, k); 
45.             localDrawable.draw(paramCanvas); 
46.             if ((this.mask == null) || (this.mask.isRecycled())) { 
47.                 Bitmap localBitmap1 = createMask(); 
48.                 this.mask = localBitmap1; 
49.             } 
50.             Bitmap localBitmap2 = this.mask; 
51.             Paint localPaint3 = this.paint; 
52.             paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3); 
53.             paramCanvas.restoreToCount(i); 
54.             return; 
55.         } catch (Exception localException) { 
56.             StringBuilder localStringBuilder = new StringBuilder() 
57.                     .append("Attempting to draw with recycled bitmap. View ID = "); 
58.             System.out.println("localStringBuilder=="+localStringBuilder); 
59.         } 
60.     } 
61. } 

public abstract class MaskedImage extends ImageView {
	private static final Xfermode MASK_XFERMODE;
	private Bitmap mask;
	private Paint paint;

	static {
		PorterDuff.Mode localMode = PorterDuff.Mode.DST_IN;
		MASK_XFERMODE = new PorterDuffXfermode(localMode);
	}

	public MaskedImage(Context paramContext) {
		super(paramContext);
	}

	public MaskedImage(Context paramContext, AttributeSet paramAttributeSet) {
		super(paramContext, paramAttributeSet);
	}

	public MaskedImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
		super(paramContext, paramAttributeSet, paramInt);
	}

	public abstract Bitmap createMask();

	protected void onDraw(Canvas paramCanvas) {
		Drawable localDrawable = getDrawable();
		if (localDrawable == null)
			return;
		try {
			if (this.paint == null) {
				Paint localPaint1 = new Paint();
				this.paint = localPaint1;
				this.paint.setFilterBitmap(false);
				Paint localPaint2 = this.paint;
				Xfermode localXfermode1 = MASK_XFERMODE;
				@SuppressWarnings("unused")
				Xfermode localXfermode2 = localPaint2.setXfermode(localXfermode1);
			}
			float f1 = getWidth();
			float f2 = getHeight();
			int i = paramCanvas.saveLayer(0.0F, 0.0F, f1, f2, null, 31);
			int j = getWidth();
			int k = getHeight();
			localDrawable.setBounds(0, 0, j, k);
			localDrawable.draw(paramCanvas);
			if ((this.mask == null) || (this.mask.isRecycled())) {
				Bitmap localBitmap1 = createMask();
				this.mask = localBitmap1;
			}
			Bitmap localBitmap2 = this.mask;
			Paint localPaint3 = this.paint;
			paramCanvas.drawBitmap(localBitmap2, 0.0F, 0.0F, localPaint3);
			paramCanvas.restoreToCount(i);
			return;
		} catch (Exception localException) {
			StringBuilder localStringBuilder = new StringBuilder()
					.append("Attempting to draw with recycled bitmap. View ID = ");
			System.out.println("localStringBuilder=="+localStringBuilder);
		}
	}
}

然后新建一个类CircularImage继承MaskedImage。代码如下：

[java] view plain copy print ?

1. <span style="font-size: 14px;">public class CircularImage extends MaskedImage { 
2.     public CircularImage(Context paramContext) { 
3.         super(paramContext); 
4.     } 
5.  
6.     public CircularImage(Context paramContext, AttributeSet paramAttributeSet) { 
7.         super(paramContext, paramAttributeSet); 
8.     } 
9.  
10.     public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) { 
11.         super(paramContext, paramAttributeSet, paramInt); 
12.     } 
13.  
14.     public Bitmap createMask() { 
15.         int i = getWidth(); 
16.         int j = getHeight(); 
17.         Bitmap.Config localConfig = Bitmap.Config.ARGB_8888; 
18.         Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig); 
19.         Canvas localCanvas = new Canvas(localBitmap); 
20.         Paint localPaint = new Paint(1); 
21.         localPaint.setColor(-16777216); 
22.         float f1 = getWidth(); 
23.         float f2 = getHeight(); 
24.         RectF localRectF = new RectF(0.0F, 0.0F, f1, f2); 
25.         localCanvas.drawOval(localRectF, localPaint); 
26.         return localBitmap; 
27.     } 
28. }</span> 

<span style="font-size:14px;">public class CircularImage extends MaskedImage {
	public CircularImage(Context paramContext) {
		super(paramContext);
	}

	public CircularImage(Context paramContext, AttributeSet paramAttributeSet) {
		super(paramContext, paramAttributeSet);
	}

	public CircularImage(Context paramContext, AttributeSet paramAttributeSet, int paramInt) {
		super(paramContext, paramAttributeSet, paramInt);
	}

	public Bitmap createMask() {
		int i = getWidth();
		int j = getHeight();
		Bitmap.Config localConfig = Bitmap.Config.ARGB_8888;
		Bitmap localBitmap = Bitmap.createBitmap(i, j, localConfig);
		Canvas localCanvas = new Canvas(localBitmap);
		Paint localPaint = new Paint(1);
		localPaint.setColor(-16777216);
		float f1 = getWidth();
		float f2 = getHeight();
		RectF localRectF = new RectF(0.0F, 0.0F, f1, f2);
		localCanvas.drawOval(localRectF, localPaint);
		return localBitmap;
	}
}</span>

新建一个MainActivity，代码如下：

[java] view plain copy print ?

1. public class MainActivity extends Activity { 
2.  
3.     @Override 
4.     protected void onCreate(Bundle savedInstanceState) { 
5.         super.onCreate(savedInstanceState); 
6.         setContentView(R.layout.activity_main); 
7.          
8.         CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo); 
9.         cover_user_photo.setImageResource(R.drawable.face); 
10.     } 
11. } 

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		CircularImage cover_user_photo = (CircularImage) findViewById(R.id.cover_user_photo);
		cover_user_photo.setImageResource(R.drawable.face);
	}
}

其XML布局文件为：

[html] view plain copy print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2.     xmlns:tools="http://schemas.android.com/tools" 
3.     android:layout_width="match_parent" 
4.     android:layout_height="match_parent" 
5.     android:gravity="center" > 
6.  
7.     <ImageView 
8.         android:layout_width="82.0dip" 
9.         android:layout_height="82.0dip" 
10.         android:layout_centerInParent="true" 
11.         android:contentDescription="@null" 
12.         android:src="@drawable/me_head_bg" /> 
13.  
14.     <com.doublefi123.diary.widget.CircularImage 
15.         android:id="@+id/cover_user_photo" 
16.         android:layout_width="74.0dip" 
17.         android:layout_height="74.0dip" 
18.         android:layout_centerInParent="true" /> 
19.  
20. </RelativeLayout> 

<RelativeLayout 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"
    android:gravity="center" >

    <ImageView
        android:layout_width="82.0dip"
        android:layout_height="82.0dip"
        android:layout_centerInParent="true"
        android:contentDescription="@null"
        android:src="@drawable/me_head_bg" />

    <com.doublefi123.diary.widget.CircularImage
        android:id="@+id/cover_user_photo"
        android:layout_width="74.0dip"
        android:layout_height="74.0dip"
        android:layout_centerInParent="true" />

</RelativeLayout>

这样就OK啦。哈哈