Android 自定义ImageView实现圆角

需求描述：

实现一个带圆角的imageView，要求自定义view方式实现。

需求分析：

我们可以自定义一个view，继承ImageView，并只需要重写ImageView的onDraw()方法即可。带圆角意味着要把控件的四个顶角做一个裁切。由于不能影响imageview主体的正常绘制，想到了可以在执行super.onDraw()方法之前进行对画布canvas的裁切。 这样接下来绘制的控件就只会在裁切范围内。从而实现了我们的需求。

代码实现：

实现流程步骤

1、定义好自定义view用到的的属性；

2、自定义view，使之继承ImageView，并在其构造函数中获取自定义属性值；

3、重写ImageView的onDraw()方法，在执行super.onDraw()之前利用Path创建一个路径对象，然后使用画布沿着path路径裁切；

4、调用super.onDraw()绘制imageview的主体内容

1、定义自定义view属性:

在attrs.xml中声明如下

<resources><declare-styleable name="RoundImageView"><attr name="radius" format="dimension"/><attr name="leftTopRadius" format="dimension"/><attr name="rightTopRadius" format="dimension"/><attr name="leftBottomRadius" format="dimension"/><attr name="rightBottomRadius" format="dimension"/></declare-styleable>...
</resources>

这里有一点需要注意下，控件的尺寸相关属性的类型需要使用dimension，而不是int或float。

2、自定义view获取属性值 & 重写onDraw方法

class RoundImageView: AppCompatImageView {private var rightBottomRadius: Intprivate var leftBottomRadius: Intprivate var rightTopRadius: Intprivate var leftTopRadius: Intprivate var radius: Int =0constructor(context: Context): this(context, null)constructor(context: Context, attributeSet: AttributeSet?): this(context, attributeSet, 0)constructor(context: Context, attributeSet: AttributeSet?, defStyleAttr: Int):super(context, attributeSet, defStyleAttr) {var typeArray = context.obtainStyledAttributes(attributeSet, R.styleable.RoundImageView)val defaultRadius = 0radius = typeArray.getDimensionPixelOffset(R.styleable.RoundImageView_radius, defaultRadius)leftTopRadius = typeArray.getDimensionPixelOffset(R.styleable.RoundImageView_leftTopRadius,defaultRadius)rightTopRadius = typeArray.getDimensionPixelOffset(R.styleable.RoundImageView_rightTopRadius,defaultRadius)leftBottomRadius = typeArray.getDimensionPixelOffset(R.styleable.RoundImageView_leftBottomRadius,defaultRadius)rightBottomRadius = typeArray.getDimensionPixelOffset(R.styleable.RoundImageView_rightBottomRadius,defaultRadius)if (radius != 0) {if (leftTopRadius == 0) {leftTopRadius = radius}if (rightTopRadius == 0) {rightTopRadius = radius;}if (leftBottomRadius == 0) {leftBottomRadius = radius;}if (rightBottomRadius == 0) {rightBottomRadius = radius;}}typeArray.recycle()}override fun onDraw(canvas: Canvas?) {// 保证图片宽高大于圆角宽高， 获取圆角的宽高// 取横着大的长度val maxLeft = Math.max(leftTopRadius, leftBottomRadius)val maxRight = Math.max(rightTopRadius, rightBottomRadius)val minWidth = maxLeft + maxRight// 取竖着大的长度val maxTop = Math.max(leftTopRadius, rightTopRadius)val maxBottom = Math.max(leftBottomRadius, rightBottomRadius)val minHeight = maxTop + maxBottomif (width > minWidth && height > minHeight) {val path = Path()//四个角：右上，右下，左下，左上path.moveTo(leftTopRadius.toFloat(), 0F)path.lineTo((width - rightTopRadius).toFloat() , 0F)path.quadTo(width.toFloat(), 0F, width.toFloat(), rightTopRadius.toFloat())path.lineTo(width.toFloat(), (height - rightBottomRadius).toFloat())path.quadTo(width.toFloat(), height.toFloat(), (width - rightBottomRadius).toFloat(), height.toFloat())path.lineTo(leftBottomRadius.toFloat(), height.toFloat())path.quadTo(0F, height.toFloat(), 0F, (height - leftBottomRadius).toFloat())path.lineTo(0F, leftTopRadius.toFloat())path.quadTo(0F, 0F, leftTopRadius.toFloat(), 0F)canvas!!.clipPath(path)/*val paint = Paint()paint.setColor(Color.BLUE)paint.style = Paint.Style.STROKEpaint.strokeWidth = 2fcanvas!!.drawPath(path, paint)*/}super.onDraw(canvas)}}

1、当声明了radius属性，并且某个方向的radiusX属性没有声明时，则使用radius的值替代该放下的radiusX；

2、画布裁切需要在super.onDraw(canvas)之前执行；

3、本程序对裁切进行了一些限制（假如不符合你的需求，你可以去掉这些限制并写上你的限制条件）

限制1：自定义view控件的宽度必须大于（view左半边最大半径和view右半边最大半径之和），即

必须满足条件：

宽度：view的width > (maxLeft + maxRight)

高度：同理

//左半边的最大半径
val maxLeft = Math.max(leftTopRadius, leftBottomRadius)
//右半边的最大半径
val maxRight = Math.max(rightTopRadius, rightBottomRadius)//maxLeft + maxRight 就是view需要满足的最小宽度，同理height

4、创建一个Path路径对象来描述画布应该沿着什么路径进行裁切。执行canvas.clipPath()，之后在canvas上进行的绘制操作就只会在这部分区域进行绘制了。

这里强调一下绘制圆角使用的是贝塞尔曲线（没接触过的话可以参考下贝塞尔曲线简单介绍）。

3、xml中引用自定义view

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center"><com.example.helloworld.views.RoundImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:leftTopRadius="70dp"app:leftBottomRadius="60dp"app:rightTopRadius="25dp"app:rightBottomRadius="60dp"android:src="@drawable/maps"/>
</LinearLayout>

原图：

程序效果：

解释一下：

1、可以看到drawable图片的像素值为419 x 418；

2、xml中RoundImageView的宽高都是设置为wrap_content，这意味着控件的宽高是根据控件内部装载的内容大小来决定的。在onDraw方法中，已经测量出了RoundImageView的宽高，即为图片的宽高（系统在onMeasure时已经测量出来尺寸）。在xml中设置的四个方向的半径值满足程序的条件，即view的width > (maxLeft + maxRight)===>419 > (70 + 60)x2，这里要乘以2是因为xml使用的是dp作为长度单位，测试机器的1dp=2px，高度同理。所以会裁切RoundImageView的四个顶角。