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...
圆角遮罩效果
一图胜千言
这种效果用于在裁剪图片,确定裁剪范围;或者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.源码地址
本文地址:https://blog.csdn.net/jhbxyz/article/details/107940531
上一篇: 吴三桂发动三藩之乱后,为何没有直捣黄龙?
下一篇: 线程与共享的麻烦事.