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

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

2020年08月14日

| 萬仟网移动技术

 | a48e1d17a2b0511faa7da7240b1971f6.png我要评论

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

圆角遮罩效果

一图胜千言

android 自定义圆角view,Android自定义View实现圆角遮罩效果_第1张图片

这种效果用于在裁剪图片,确定裁剪范围;或者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="http://schemas.android.com/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.源码地址

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

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实将立刻删除。

相关文章:

gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg

当一个视图控制器被创建,并在屏幕上显示的时候。 代码的执行顺序alloc ...

listview 控件可使用四种不同视图显示项目。通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本。

最近在...

1.某个控件要放在Linearlayout布局的底部(底部导航条) ...//嵌套的其他布局…… ...//嵌套的其他布局 简单说明一下,上面的代码...

android开发四大组件分别是:活动(activity):用于表现功能。服务(service):后台运行服务,不提供界面呈现。广播...

简介:前些天使用Unity打Android包的时候,安装到手机上,出现了两个icon一样的引用,分别点开后,启动...

gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg

Windows系统上面修改了flutter sdk的环境变量地址之后Android studio上面运行flut...

闪屏:在打开app时,展示,持续数秒后,自动关闭,进入另外的一个界面,splashactivity跳转到mainactivity ...

消水果游戏大家都玩过吧,今天小编给大家分享实现消水果游戏的代码,废话不多说了,具体代码如下所示:

#include "i...

gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg

什么是JDK? JDK 即 Java Development Kit,Java开发工具包,用来编译 Java 程序。JRE 在接触JDK的过程中,同...

最近做的类似于微博的项目中,有个android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更...

网友评论

387afa1e91d68b43eca6c11dc07bf577.gif

验证码:

你可能感兴趣的:(android,自定义圆角view)