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

Android 自定义View系列文章

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

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

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

Android 自定义View练手Demo(一)实现圆角遮罩效果_第1张图片

本文通过两种方式来实现这种效果,来达到自定义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

你可能感兴趣的:(Android,自定义View,android,canvas,自定义View,Bitmap)