圆形头像的做法

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

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

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

 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。代码如下：

 "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;
     }
 }

新建一个MainActivity，代码如下：

 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布局文件为：

 <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啦。哈哈

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