Android(安卓)水波纹效果的探究
16lz
2021-01-24
长按水波纹扩展效果
在使用了以上的 自定义有界水波纹点击效果后,使用[开发者选项 - 调试GPU过渡绘制]得到下面的视图
自定义有界水波纹
image.png
前言
水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用:
- 1、基本使用
- 2、水波纹效果与布局绘制之间的问题
- 3、长按水波纹扩散效果
- 4、Button点击的水波纹效果
基本使用
系统自带水波纹实现方式
有界水波纹
android:background="?android:attr/selectableItemBackground"
无界水波纹
以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制
android:background="?android:attr/selectableItemBackgroundBorderless"
自定义水波纹实现方式
无界水波纹
<?xml version="1.0" encoding="utf-8"?>
有界水波纹
<?xml version="1.0" encoding="utf-8"?> -
圆角背景:
<?xml version="1.0" encoding="utf-8"?> -
水波纹效果与布局绘制之间的问题
在使用了以上的 自定义有界水波纹点击效果后,使用[开发者选项 - 调试GPU过渡绘制]得到下面的视图
自定义有界水波纹
对比后,发现绿色的文字部分经过了二重绘制,因为布局的白色背景和文字自身颜色的原因。如果布局背景能去掉还能实现水波纹的效果就好了,这样就只有文字一层的颜色。
有两种方案可以达到想要的这种效果:
1、使用系统自带有界水波纹实现方式,因为系统本身的默认背景是透明色的。
android:background="?android:attr/selectableItemBackground"
系统的默认水波纹颜色是灰色,如果需要使用对应的高亮色来作为ripple的背景色,我们可以在
styles-v21
系统主题里加入这个:
- @color/colorAccent
2、使用自定义有界水波纹效果,使其默认背景色为透明色。
写法:
<?xml version="1.0" encoding="utf-8"?> -
添item时,如果指定id为@android:id/mask,那么不点击时不会显示出该item指定的color。
可以设置指定子层item的android:id="@android:id/mask"来设定当前Ripple的Mask。
Mask的内容并不会被绘制到屏幕上,它的作用是限定Ripple效果的绘制区域。
最后可以得到我们想要的效果:
image.png
长按水波纹扩散效果
长按水波纹扩展效果在使用小红书时,我们可以看到关于“笔记”的item长按会展示扩散的效果。
android:foreground="?attr/selectableItemBackgroundBorderless"
又或者,无边界的水波纹也可以达到长按扩散的效果,只是它会超出边界,那我们就在对应的父布局加一层有边界的水波纹背景即可。就像这样:
两者的区别是:长按扩散时,前者的水波纹会在图片之上,而后者在图片之下。
Button点击的水波纹效果
button阴影与点击效果
The Widget.AppCompat.Button.Colored 继承了 Widget.AppCompat.Button style并且根据你选择的主题应用最接近的颜色。
参考资料
- Ripple 水波纹效果
- 聊聊Android5.0中的水波纹效果
- 解决点击ripple水波纹无效的问题
- UI之修改Button颜色保持默认点击效果
更多相关文章
- Android(安卓)Lint使用分析
- Android开发——布局详解(上)
- Android面试总结(持续更新修改)
- Android圆角bug
- Android(安卓)对话框(Dialog)大全 建立你自己的对话框
- Android(安卓)ListView
- Android自定义Button按钮显示样式
- Android中设置theme无效
- Android(安卓)阿拉伯语言适配