RippleDrawable是Android 5.0之后添加了一种触摸反馈动画,在控件被触摸时触发水波纹效果。此效果只在Android 5.0以上设备上生效。
系统自带效果
Android 5.0之后Button默认自带Ripple效果,同时系统提供了2个默认的Ripple效果。
//有边界
android:background="?android:attr/selectableItemBackground"
//无边界
android:background="?android:attr/selectableItemBackgroundBorderless"
通过设置为background或者foreground属性来即可,Ripple的颜色受Theme的colorAccent属性影响。
自定义Ripple效果
自定义TouchFeedback需要通过Ripple标签进行实现,虽然说Ripple是一种动画效果,但通过上面的设置方式也可以看出,其实本质上还是Drawable,所以需要放到drawable/文件夹下。根据Ripple的效果不同,分成以下几种情况来说明用法:
简单无边界效果
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000">
</ripple>
color
属性用于指定波纹的颜色值,还有一个radius
属性用于设置波纹的半径,此半径默认为控件宽度的一半,若设置的radius
值小于控件宽度的一半,波纹效果居中显示。触摸半径之外的控件区域无波纹效果。具体效果可自行通过设置此值进行摸索,可以更直观的看到效果。
有边界,有背景效果
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000">
<item android:drawable="@color/colorPrimary"/>
</ripple>
添加<item>
设置drawable
属性设置控件背景,通过设置背景波纹效果会被限定在背景范围内,注意是背景范围内而不是控件范围内,有什么区别呢?看下图:
设置方式如下:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000">
<item android:drawable="@drawable/logo" />
</ripple>
我们只是把原来的颜色背景换成了一张log图片,而且通过上图我们可以发现,水波纹效果竟然只在logo图片区域显示,logo的间隙空白处竟然没有波纹效果。这就是我们上面说的波纹效果只叠加显示在背景图的范围内。
带mask的效果
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent" >
<item
android:id="@android:id/mask"
android:drawable="@drawable/logo" />
</ripple>
与设置背景图的方式类似添加<item>
并设置属性drawble
属性,但是注意drawable
的id必须设置为@android:id/mask
。效果就是当控件被触摸时才显示mask对应的drawable
,并且水波纹效果只能mask范围内叠加显示。
ripple与shape配合使用
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FF0000">
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
</item>
</ripple>
没啥好解释的,看下实现很容易明白。
ripple与select配合使用
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFFFF">
<item>
<selector>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="@color/colorAccent" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="@color/colorPrimaryDark" />
</shape>
</item>
</selector>
</item>
<item
android:id="@android:id/mask"
android:drawable="@drawable/logo" />
</ripple>
ripple小结
所有的效果基本都列举了,总结一下就是:
ripple
便签下的color
属性用于控制水波纹的颜色。- 不带id的
<item>
标签,用于设置控件背景,支持shape
和select
,若设置背景则水波纹只在背景范围内显示。 - id为mask的
item
标签,用于设置当控件被触摸时显示的drawable
,若设置mask则水波纹只在mask范围内显示。 - mask与背景可同时设置。