欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-11 16:29:30
圆角遮罩效果一图胜千言这种效果用于在裁剪图片,确定裁剪范围;或者APP引导用户,突显某个区域,还是挺实用。1.引言这是一个自定义View练习的Demo,通过两种方式实现此效果,通过本文可以学习到Xfermode的使用View级别的离屏缓冲Canvas的离屏缓冲自定义属性的使用Canvas 的常用且实用的 API2.源码2.1.RoundRectCoverView.ktclass RoundRectCoverView(context: Context, attrs: Attrib...

圆角遮罩效果

一图胜千言
Android自定义View实现圆角遮罩效果

这种效果用于在裁剪图片,确定裁剪范围;或者APP引导用户,突显某个区域,还是挺实用。

1.引言

这是一个自定义View练习的Demo,通过两种方式实现此效果,通过本文可以学习到

  • Xfermode的使用
  • View级别的离屏缓冲
  • Canvas的离屏缓冲
  • 自定义属性的使用
  • Canvas 的常用且实用的 API

2.源码

2.1.RoundRectCoverView.kt

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()

    init {
        //开启View级别的离屏缓冲,并关闭硬件加速,使用软件绘制
        setLayerType(LAYER_TYPE_SOFTWARE, null)

        //通过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()

    }

    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) {
//        fun1(canvas)
        fun2(canvas)

    }

    /**
     * 方法一通过 paint 的 xfermode 绘制遮罩
     */
    private fun fun1(canvas: Canvas) {
        //先画一个圆角矩形,也就是透明区域
        canvas.drawRoundRect(mPadding, mPadding, width - mPadding, height - mPadding, mRoundCorner, mRoundCorner, paint)
        //设置遮罩的颜色
        paint.color = mCoverColor
        //设置paint的 xfermode 为PorterDuff.Mode.SRC_OUT
        paint.xfermode = porterDuffXfermode
      	//画遮罩的矩形
        canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
        //清空paint 的 xfermode
        paint.xfermode = null
    }

    /**
     * 方法二通过 canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.SRC)绘制遮罩
     */
    private fun fun2(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)
    }
}

重点:两种离屏缓冲的方式

2.2attr代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundRectCoverView">
        <attr name="roundCorner" format="dimension" />
        <attr name="roundPadding" format="dimension" />
        <attr name="roundCoverColor" format="color" />
    </declare-styleable>
</resources>

2.3xml代码

<?xml version="1.0" encoding="utf-8"?>
<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" />

    <com.jhb.customviewcollection.RoundRectCoverView.RoundRectCoverView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundCorner="10dp"//角度
        app:roundCoverColor="#aa000000"//遮罩颜色
        app:roundPadding="30dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.源码地址

RoundRectCoverView.kt

本文地址:https://blog.csdn.net/jhbxyz/article/details/107940531