Android实战之设置圆形头像

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

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

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

[java]  view plain copy

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

[java]  view plain  copy

 

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

 

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

[java]  view plain copy

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>  

[java]  view plain  copy

 

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>  

新建一个MainActivity，代码如下：

[java]  view plain copy

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

[java]  view plain  copy

 

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

 

其XML布局文件为：

[html]  view plain copy

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>  

[html]  view plain  copy

 

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>  

 

这样就OK啦。哈哈

源码在此：http://download.csdn.net/detail/doublefi123/5252186