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.