美文网首页android
为RecyclerView点击添加Ripple波纹效果

为RecyclerView点击添加Ripple波纹效果

作者: err0r | 来源:发表于2016-03-06 00:47 被阅读7453次

Demo代码
MD的特色之一就是"有意义的动画效果",让动画符合物理世界的规律,而不是杂乱无章,华而不实。
点击事件产生的波纹效果就是其中之一。
那么,先让我们看一下什么是波纹效果:

touch_feedback.gif

可以看出,点击变得更具有质感而不是简单的使条目变色。

让我们在RecyclerView上做下实验
RecyclerView默认点击是没有任何效果的

touch1.gif

MD之前,我们为条目添加点击效果是这样的
新建drawable/touch_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/super_light_grey" android:state_pressed="true"/>
    <item android:drawable="@color/super_light_grey" android:state_focused="true"/>
    <item android:drawable="@color/white"/>
</selector>

然后为点击的条目设置android:background="@drawable/touch_bg"
在点击条目的时候便可以看到条目变色

touch2.gif

但是我们现在想要的是波纹效果,这里要注意,波纹效果只在5.0以上的设备生效
所以我们需要新建drawable-v21/touch_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/line_grey">
    <item android:drawable="@color/white"/>
</ripple>

之后,便可以看到期待的波纹效果。

touch3.gif

代码以及第一张图片均参考项目Animate
希望能够对你有所帮助

相关文章

网友评论

  • 精灵又来了:如果把背景设置为透明,就没有水波纹效果出来了
    7d3e86233c76:@精灵又来了 我也遇到相同的问题了,背景透明,没有效果。该怎么解决?
  • 空城新月:在控件上面添加
    android:clickable="true"
    android:foreground="?attr/selectableItemBackground" android:background="?attr/selectableItemBackground" android:background="?attr/selectableItemBackgroundBorderless"
    这一类的属性也可以实现,默认ListView的item是有这个效果的,要是考虑兼容的话其实也没多少必要关注的
    空城新月:@err0r Ripple是没有低版本兼容的,5.0以上才有效果。有些不能在xml中直接使用ripple的控件如ImageView可以设置背景,然后在drawable文件下建立xml设置ripple。网上的栗子还是比较多的。实现方式很多,不过原理都是一样的。
    err0r:@空城新月 但是 `android:foreground` 的话低版本是不兼容的,添加Ripple是为了在高版本上有更好的显示效果
  • MarcoWong:晕 好奇怪 ,我设置selector点击也没反应,ripple.xml波纹效果也没反应。。
    err0r:@MarcoWong 加了Demo,在文章开头 :blush:
    MarcoWong:@err0r 嗯嗯,有时间看看
    err0r:@MarcoWong 监听一下点击事件看是不是被拦截了。我这两天写个Demo项目贴上来吧

本文标题:为RecyclerView点击添加Ripple波纹效果

本文链接:https://www.haomeiwen.com/subject/wfkakttx.html