自定义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);}}}@Overrideprotected void onDraw(Canvas canvas) {if (mBg!=null) {int width = getMeasuredWidth();//得到测量的高度int height = getMeasuredHeight();//得到测量的宽度mBg=Bitmap.createScaledBitmap(mBg, width,height,false);//创建一个缩放到指定大小的bitmapcanvas.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);//创建一个bigmapCanvas 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 {@Overrideprotected 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的图片圆角背景完成了。