Android 自定义View练手Demo（一）实现圆角遮罩效果_android 圆角遮盖

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23