让我的头像圆起来--Android之圆头像

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



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

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

[java] view
plaincopy

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
plaincopy

<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
plaincopy

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
plaincopy

<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