自定义RelativeLayout 实现图片圆角背景

公司做的应用有个需求，ListView item 的背景是一张图片，而且还要是圆角，没想到其他法子，只好写自定义了。

先上图，



实现思路，

1，继承RelativeLayout

2，定义自定义属性（背景图片，圆角半径）

3，构造函数中初始化自定义属性

4，处理背景图片适应控件宽高和圆角

5，绘制背景图片

6，调用super.onDraw绘制其他内容

写自定义控件，我的方法是，一开始不定义自定义属性，需要的属、资源性全部在构造方法里面初始化，等实现想要的效果以后再去添加自定义属性，初始化自定义属性。

接下来上代码

/**
* 圆角图片背景的相对布局
* @author Vitor Lee
*/
public class RoundBGRelativeLayout extends RelativeLayout {
/**默认圆角半径*/
private static final int DEFAULT_CORNER_RADIUS=6;
/**背景图片*/
private Bitmap mBg;
/**圆角半径*/
private int mCornerRadius=DEFAULT_CORNER_RADIUS;

public RoundBGRelativeLayout(Context context) {
this(context,null);
}

public RoundBGRelativeLayout(Context context, AttributeSet attrs) {
this(context, attrs,0);
}

public RoundBGRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setWillNotDraw(false);//设置调用onDraw方法
init(context,attrs,defStyle);
}

/**
* 得到自定义属性
* @param context
* @param attrs
* @param defStyle
*/
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundBGRelativeLayout,defStyle,0);
int indexCount = ta.getIndexCount();
for (int i = 0; i < indexCount; i++) {
int index = ta.getIndex(i);
switch (index) {
case R.styleable.RoundBGRelativeLayout_custom_background://得到自定义背景图片
int resourceId = ta.getResourceId(index,0);
mBg=BitmapFactory.decodeResource(getResources(), resourceId);
break;
case R.styleable.RoundBGRelativeLayout_corner_radius://得到自定义圆角半径
mCornerRadius= (int) ta.getDimension(index,DEFAULT_CORNER_RADIUS);
}
}
}

@Override
protected void onDraw(Canvas canvas) {
if (mBg!=null) {
int width = getMeasuredWidth();//得到测量的高度
int height = getMeasuredHeight();//得到测量的宽度
mBg=Bitmap.createScaledBitmap(mBg, width,height	,false);//创建一个缩放到指定大小的bitmap
canvas.drawBitmap(createRoundImage(mBg,width,height), 0,0,null);//绘制圆角背景
}
super.onDraw(canvas);//让RelativeLayout绘制自己
}

/**
* 创建圆角图片
* @param bitmap 源图片
* @param width 高度
* @param height 宽度
* @return 圆角图片
*/
private Bitmap createRoundImage(Bitmap bitmap,int width,int height) {
Paint paint=new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿画笔
Bitmap target = Bitmap.createBitmap(width,height,Config.ARGB_8888);//创建一个bigmap
Canvas canvas=new Canvas(target);//创建一个画布
RectF rectF=new RectF(0, 0,width,height);//矩形
//绘制圆角矩形
canvas.drawRoundRect(rectF,mCornerRadius,mCornerRadius,paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));//画笔模式
canvas.drawBitmap(bitmap,0,0, paint);//将画笔
return target;
}

/**
* 设置背景图片
* @param r 资源ID
*/
public void setBGResource(int r){
this.mBg=BitmapFactory.decodeResource(getResources(),r);
invalidate();
}

/**
* 设置背景图片
* @param b bitmap
*/
public void setBGBitmap(Bitmap b){
this.mBg=b;
invalidate();
}

}

注释写得很详细，我就不赘述了，需要的注意的是画圆角的原理，这里请参考Android 完美实现图片圆角和圆形（对实现进行分析）

接下自定义属性res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RoundBGRelativeLayout">
<attr name="custom_background" format="reference"></attr>
<attr name="corner_radius" format="dimension"></attr>
</declare-styleable>
</resources>

接下来布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:lwd="http://schemas.android.com/apk/res/com.example.background"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >

<com.example.background.RoundBGRelativeLayout
android:id="@+id/container"
android:layout_width="fill_parent"
android:layout_height="300dp"
lwd:custom_background="@drawable/bg"
lwd:corner_radius="16dp"
>
<TextView
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hahahaha"
/>
</com.example.background.RoundBGRelativeLayout>
</RelativeLayout>

在代码中使用

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RoundBGRelativeLayout container=(RoundBGRelativeLayout) this.findViewById(R.id.container);
//		container.setBGResource(R.drawable.bg);
}
}

好了，自定义RelativeLayout的图片圆角背景完成了。