ImageView的圆形图片显示

http://blog.csdn.net/doublefi123/article/details/8795282

在很多应用中，我们看到，个人主页里面的头像一般都是圆的，设计成圆的会使整个界面布局变的优雅漂亮。那么，怎么使头像变圆呢？有的人说可以在上面加一个中间为透明圆形的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。代码如下：

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&quot;
xmlns:tools="http://schemas.android.com/tools&quot;
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>
如此即可