这是我这个系列的目录,有兴趣的可以看下: android 动画系列 - 目录
说波纹是动画其实是有点勉强的,应该叫波纹触摸反馈。废话不多说,先看看效果图,再细说:
看着熟悉吧,一般人很少有提到 ripple 的,我也是偶然才看到这方面的资料的。ripple 是在5.0版本才提供的交互效果,本意是优化 android 体验,以抗衡IOS。看到5.0本能的就会想到兼容问题,经过测试很遗憾,4.X 版本跑不了,ripple 是用 xml 定义的,在4.X 版本上无法解析 ripple 这个 xml 标签。
ripple 的类是 RippleDrawable,父类是 LayerDrawable,可见google 是使用多层层叠 drawable 来实现的这个波纹效果,点击时会有应该的操作,平时不显示,只显示我们的底色。
好了,来看看 ripple 的用法把,ripple 是一张 drawable 图片,作为背景色使用,系统提供了2种默认实现:
- selectableItemBackground:波纹被限制在控件的边界中
- selectableItemBackgroundBorderless:波纹会呈圆形发散出去,不会被限制
<TextView
android:id="@+id/view_test"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:gravity="center"
android:text="测试"/>
波纹被限制在控件的边界中:
波纹会呈圆形发散出去,不会被限制:
特意把控件设置成矩形,可以看到ripple 的圆形是以控件的对角线为直径的
系统提供的改不了颜色,所以我们来看看如何自定义:
ripple 既然是一个 drawable,那么我们就是可以使用 xml 来自定义的,所有的 drawable 都可以使用 xml 来自定义
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@android:id/mask" android:drawable="@color/colorAccent"></item>
<item android:drawable="@android:color/darker_gray"></item>
</ripple>
解释下,item 表示我们设置几张图片进去,当然也可以直接使用颜色,带 android:id="@android:id/mask" 的 item 表示 设置ripple 波纹图层的图片,ripple效果=限制在控件的边界中,不带 id 的 item 表示默认背景图片
效果图:
要是想用波纹散发出view 的效果:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent" >
</ripple>
在 ripple 跟标签里设置颜色就可以,但这样我们要是再添加item的话,item 是不会再显示出来的,我试过就是这样的,可能是 google 做的不就是很到位
效果图:
还有一种写法,没验证过
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#6da7ff">
<item>
<shape>
<!--点击后的颜色-->
<solid android:color="#ff1c1c"/>
<!--设置角度-->
<corners android:radius="10dp"/>
</shape>
</item>
</ripple>
ps:ripple 就这么多了,用起来挺简单,但是注意不兼容4.X版本,害的麻烦写兼容的 drawable 文件夹