Android 简单实现圆形ImageView添加双层圆形边框

项目需要，研究了下，欢迎指正。

大体思路：1.首先实现圆形ImageView，需要自定义ImageView。

2.利用shap属性实现双层边框

所用素材：左边是头像，右边是背景。



很简单，直接上代码。

自定义圆形ImageView:

package com.example.test;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class RoundImageView extends ImageView {
private Paint paint;
private Bitmap bmp;

public RoundImageView(Context context) {
super(context);
// TODO Auto-generated constructor stub
init();
}

public RoundImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}

public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public void init() {
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
}

@Override
protected void onDraw(Canvas canvas) {
int w = getWidth();
int h = getHeight();
Drawable drawable = getDrawable();
int i = canvas.saveLayer(0.0F, 0.0F, w, h, null, 31);
int j = getWidth();
int k = getHeight();
drawable.setBounds(0, 0, j, k);
drawable.draw(canvas);

if (bmp == null){
bmp = createMask();
}
canvas.drawBitmap(bmp, 0.0F, 0.0F, paint);
canvas.restoreToCount(i);

}

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

}

第一个圆形边框：round_corners_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="#7e7d7d" />

<corners
android:radius="100dp" />

</shape>

第二个圆形边框，半透明： round_corners_layout_translucent.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<solid android:color="#667e7d7d" />

<corners
android:radius="100dp" />

</shape>

布局文件：activity_main.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" >

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="@drawable/kebi_bg" />

<View
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_centerInParent="true"
android:background="@drawable/round_corners_layout" />

<View
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerInParent="true"
android:background="@drawable/round_corners_layout_translucent" />

<com.example.test.RoundImageView
android:id="@+id/ri_photo_id"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@drawable/kebi"
android:layout_centerInParent="true" />

</RelativeLayout>

效果图：



工程源码： http://download.csdn.net/detail/wblyuyang/8430671