Android 自定义View练手Demo（一）实现圆角遮罩效果

Android 自定义View系列文章

Android 自定义View练手Demo（一）实现圆角遮罩效果
Android 自定义View练手Demo（二）实现圆形头像效果
Android 自定义View练手Demo（三）实现微信拍一拍的动画效果

Android自定义View实现圆角遮罩效果

一图胜千言，有一个遮罩就会凸显出重点区域

本文通过两种方式来实现这种效果，来达到自定义View练手的效果

此效果的用途

• 在裁剪图片，确定裁剪范围
• 在APP中引导用户，突显某个区域

这是一个麻雀虽小五脏俱全的小Demo了，非常适合练手。

1.引言

通过本文可以学习到

• Canvas和Paint 的常用且实用的 API
• Xfermode的使用
• View级别的离屏缓冲的开启方式
• Canvas的离屏缓冲和View的离屏缓冲的区别
• 如何给自定义View设置自定义属性的使用

2.第一种实现方式

class RoundRectCoverView(context: Context, attrs: AttributeSet) : View(context, attrs) {
     
  
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
  	private var mPadding = 40.dp //间距
    private var mRoundCorner = 10.dp //圆角矩形的角度
    private var mCoverColor = "#99000000".toColorInt()//遮罩的颜色
    private val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)
  
   	init {
     
        //开启View级别的离屏缓冲,并关闭硬件加速，使用软件绘制
        setLayerType(LAYER_TYPE_SOFTWARE, null)
    }
    override fun onDraw(canvas: Canvas) {
     
        //先画一个圆角矩形,也就是透明区域(Destination image)
        canvas.drawRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, paint)
        //设置遮罩的颜色
        paint.color = mCoverColor
        //设置paint的 xfermode 为PorterDuff.Mode.SRC_OUT
        paint.xfermode = porterDuffXfermode
        //画遮罩的矩形(Source image)
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
        //清空paint 的 xfermode
        paint.xfermode = null
    }

上面代码中的注释已经写的很清楚了，这里说一下 setLayerType(LAYER_TYPE_SOFTWARE, null) 是开启View级别的离屏缓冲，就是拿出整个View大小的一块区域，这块区域是透明的。那么你就可能会好奇，为啥要拿出这么一块透明的区域呢？因为使用PorterDuff.Mode时候需要用到。

什么是PorterDuff.Mode

这里面我们用到的是PorterDuff.Mode.SRC_OUT，正好对应的是Source Out这种模式是我们想要的

• 注意Destination image是第一次画的圆角矩形，需要画在一个透明的View中，这就需要离屏缓冲
• Source image是画的带颜色的遮罩也就是整个View
• PorterDuff.Mode.SRC_OUT，类似于把后画的和先前画的重叠的部分，抠出去扔掉，结果就是我们要的效果

3.第二种实现方式

class RoundRectCoverView(context: Context, attrs: AttributeSet) : View(context, attrs) {
     

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)

    private var mPadding = 40.dp //间距
    private var mRoundCorner = 10.dp //圆角矩形的角度
    private var mCoverColor = "#99000000".toColorInt()//遮罩的颜色

    private val bounds = RectF()
    private val porterDuffXfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)
    private val clipPath = Path()

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     
        //设置离屏缓冲的范围
        bounds.set(0f, 0f, width.toFloat(), height.toFloat())
        //设置Clip Path的矩形区域
        clipPath.addRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, Path.Direction.CW)
    }

    override fun onDraw(canvas: Canvas) {
     
         //Canvas的离屏缓冲
          val count = canvas.saveLayer(bounds, paint)
          //KTX的扩展函数相当于对Canvas的 save 和 restore 操作
          canvas.withSave {
     
              //画遮罩的颜色
              canvas.drawColor(mCoverColor)
              //按Path来裁切
              canvas.clipPath(clipPath)
              //画镂空的范围
              canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.SRC)
          }
          //把离屏缓冲的内容,绘制到View上去
          canvas.restoreToCount(count)
    }
  
}

解释一下，在onSizeChanged方法中，我们设置了离屏缓冲的范围，注意这个范围够用就行，太大了耗费性能。同时设置了Clip Path裁剪的矩形区域。

onDraw方法中

• 首先开启离屏缓冲**(注意这里开启的是Canvas的离屏缓冲)**这范围就是bounds的范围

• 画出完整的遮罩的颜色

• 然后把Canvas裁切出一个圆角矩形

• 然后在话一个透明的颜色，模式指定为PorterDuff.Mode.SRC

• 把离屏缓冲的内容,绘制到View上去

注意：记得开离屏缓冲，否则结果可能不是你想要的

4.设置自定义属性

4.1首先在values文件夹下，创建一个attrs.xml的文件（当然你也可以叫别的名字，但这个是规范）

<resources>
    <declare-styleable name="RoundRectCoverView">
        <attr name="roundCorner" format="dimension" />
        <attr name="roundPadding" format="dimension" />
        <attr name="roundCoverColor" format="color" />
    declare-styleable>
resources>

声明你想再xml中能设置的属性，比如我这里声明了，圆角的大小，圆角矩形的padding值，以及遮罩的颜色

4.2在代码中动态获取xml中设置的值

init {
     

    //通过TypeArray 获取 xml 配置的属性
    val ta = context.obtainStyledAttributes(attrs, R.styleable.RoundRectCoverView)
    mPadding = ta.getDimension(R.styleable.RoundRectCoverView_roundPadding, 40.dp)
    mRoundCorner = ta.getDimension(R.styleable.RoundRectCoverView_roundCorner, 10.dp)
    mCoverColor = ta.getColor(R.styleable.RoundRectCoverView_roundCoverColor, "#99000000".toColorInt())

    ta.recycle()

}

• 通过TypeArray获取，声明的属性值
• 赋值给成员变量，下面使用的时候就直接使用了
• 回收TypeArray

4.3在xml代码直接使用

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/captain_america"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    

androidx.constraintlayout.widget.ConstraintLayout>

5.总结

• 离屏缓冲的两种方式区别以及开启方式
  • Canvas.saveLayer() 可以做短时的离屏缓冲，Google不建议使用，因为每次绘制都需要拿出一块来，耗费性能
  • View.setLayerType()是直接把整个 View 都绘制在离屏缓冲中，Google建议这样做。setLayerType(LAYER_TYPE_HARDWARE) 是使用 GPU 来缓冲， setLayerType(LAYER_TYPE_SOFTWARE) 是直接直接用一个 Bitmap 来缓冲。
• PorterDuff.Mode的类型，已经使用，需要有透明的背景色
• 自定义属性的方式

这是一个简单且使用的Demo，很适合练手！

6.源码地址

RoundRectCoverView.kt

7.原文地址

Android自定义View实现圆角遮罩效果

8.参考文章

hencoder

PorterDuff.Mode