Android自定义View实现圆角遮罩效果
08月14日
|萬仟网移动技术
|我要评论
圆角遮罩效果一图胜千言这种效果用于在裁剪图片，确定裁剪范围；或者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代码
2.3xml代码
xmlns:app="/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
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" />
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" />
3.源码地址
本文地址：/jhbxyz/article/details/107940531
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@ 举报，一经查实将立刻删除。
相关文章:
当一个视图控制器被创建，并在屏幕上显示的时候。 代码的执行顺序alloc ...
listview 控件可使用四种不同视图显示项目。通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。
最近在...
1.某个控件要放在Linearlayout布局的底部(底部导航条) ...//嵌套的其他布局…… ...//嵌套的其他布局 简单说明一下，上面的代码...
android开发四大组件分别是：活动(activity)：用于表现功能。服务(service)：后台运行服务，不提供界面呈现。广播...
简介：前些天使用Unity打Android包的时候，安装到手机上，出现了两个icon一样的引用，分别点开后，启动...
Windows系统上面修改了flutter sdk的环境变量地址之后Android studio上面运行flut...
闪屏：在打开app时，展示，持续数秒后，自动关闭，进入另外的一个界面,splashactivity跳转到mainactivity ...
消水果游戏大家都玩过吧，今天小编给大家分享实现消水果游戏的代码，废话不多说了，具体代码如下所示：
#include "i...
什么是JDK？ JDK 即 Java Development Kit，Java开发工具包，用来编译 Java 程序。JRE 在接触JDK的过程中，同...
最近做的类似于微博的项目中，有个android功能要使用到listview的向下拉刷新来刷新最新消息，向上拉刷新(滑动分页)来加载更...
网友评论
验证码：
