Android：圆形头像

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



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





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