首页 >Android相关

Android 水波纹效果的探究

2018-05-28 12:03 编辑: CuiTong 分类:Android相关 来源:Jingbin_

1354448-8f11f2c691d43da9.gif

长按水波纹扩展效果

前言

水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用:

  • 1、基本使用

  • 2、水波纹效果与布局绘制之间的问题

  • 3、长按水波纹扩散效果

  • 4、Button点击的水波纹效果

基本使用

系统自带水波纹实现方式

有界水波纹

android:background="?android:attr/selectableItemBackground"

无界水波纹

以控件宽高中最大的数值作为水波纹效果所在正方形的边界进行绘制

android:background="?android:attr/selectableItemBackgroundBorderless"

自定义水波纹实现方式

无界水波纹

   

有界水波纹

                

水波纹效果与布局绘制之间的问题

1354448-37ff47faeefa1837.png

在使用了以上的自定义有界水波纹点击效果后,使用[开发者选项 - 调试GPU过渡绘制]得到下面的视图

1354448-d64a1d0d128a14f4.png

自定义有界水波纹

对比后,发现绿色的文字部分经过了二重绘制,因为布局的白色背景和文字自身颜色的原因。如果布局背景能去掉还能实现水波纹的效果就好了,这样就只有文字一层的颜色。

有两种方案可以达到想要的这种效果:

1、使用系统自带有界水波纹实现方式,因为系统本身的默认背景是透明色的。

android:background="?android:attr/selectableItemBackground"

系统的默认水波纹颜色是灰色,如果需要使用对应的高亮色来作为ripple的背景色,我们可以在styles-v21系统主题里加入这个:@color/colorAccent

2、使用自定义有界水波纹效果,使其默认背景色为透明色。
写法:

                

添item时,如果指定id为@android:id/mask,那么不点击时不会显示出该item指定的color。
可以设置指定子层item的android:id="@android:id/mask"来设定当前Ripple的Mask。
Mask的内容并不会被绘制到屏幕上,它的作用是限定Ripple效果的绘制区域。

最后可以得到我们想要的效果:

1354448-d64a1d0d128a14f4.png

image.png

长按水波纹扩散效果

1354448-8f11f2c691d43da9.gif

长按水波纹扩展效果

在使用小红书时,我们可以看到关于“笔记”的item长按会展示扩散的效果,其实原理也很简单。无边界的水波纹可以达到长按扩散的效果,只是它会超出边界,那我们就在对应的父布局加一层有边界的水波纹背景即可。就像这样:

        
        

Button点击的水波纹效果

1354448-5d195c450d541d19.gif

button阴影与点击效果


The Widget.AppCompat.Button.Colored 继承了 Widget.AppCompat.Button style并且根据你选择的主题应用最接近的颜色。

参考资料

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:性能优化之布局优化记录
下一篇:【Android】打造下拉放大效果
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部