自定义圆形头像

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

 

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

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

 

[java] view plaincopyprint?
  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 print?在CODE上查看代码片派生到我的代码片
  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 plaincopyprint?
  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 print?在CODE上查看代码片派生到我的代码片
  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>  
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;
	}
}


新建一个MainActivity，代码如下：

 

 

[java] view plaincopyprint?
  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 print?在CODE上查看代码片派生到我的代码片
  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 plaincopyprint?
  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 print?在CODE上查看代码片派生到我的代码片
    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>  
posted on 2016-11-15 16:57  巫山码农  阅读(459)  评论(0)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 巫山码农
Powered by .NET 8.0 on Kubernetes