在Api版本21及以上提供了ripple标签来实现水波纹的效果。这个效果常常被用来实现View的点击效果。
本篇文章介绍了ripple的一些基本使用，通过设置ripple背景来实现一些View点击效果。ripple的本意就是波浪/波纹，因此可以大概脑补一下画面了。

1 准备工作

ripple是5.0以上提供的，对应api21，因此首先在res资源包中建立文件夹drawable-21来存放ripple资源文件。
本文使用了三种color，在colors.xml文件中的定义如下：

    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
    <color name="blue">#0000ff</color>

需要准备一张图片

image.png

将这张图片命名为ripple.png放到drawable包中

2 Ripple的使用

在刚刚创建的drawable-v21文件夹中新建一个ripple文件，名字为ripple_test,内容如下

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

这里可以理解为创建了一个绿色的ripple。之后在布局文件中创建一个TextView，将background属性设置为刚刚创建的ripple_test。

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:background="@drawable/ripple_test"
        android:text="lalalalalalallalala"
        android:clickable="true"
        android:gravity="center"
        />

1.gif

可以看到点击后从点击位置为圆心展开一个波纹。这是一种无边界的ripple。但是在使用的大部分情况下我们需要限制点击效果在View内部。
有界限的Ripple可以在标签内部添加item来实现

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green"
    >
    <item
        android:drawable="@color/red"
        />
</ripple>

这里添加了一个红色的drawable属性的item。效果是这样的。

2.gif

可以看到view的背景变成红色了，点击后绿色的波纹和红色的背景颜色叠加，产生的点击效果限制在了View的内部。如果希望吧点击效果限制在内部，又不希望有红色的背景可以添加 android:id="@android:id/mask"属性,mask意为遮挡这里可以理解为将red背景遮挡住了。

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

3.gif

可以看到红色的背景又消失了，和最初的效果一样了。
接下来该刚刚的图片上场了，设置ripple图片

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

可以看到效果是这样的

4.gif

item中可以嵌套shape 和selector，例如设置一个椭圆形的shape如下

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/green"
    >
    <item
        android:id="@android:id/mask"
        >
        <shape android:shape="oval">
            <solid android:color="@color/red"/>
        </shape>
    </item>
</ripple>

效果是这样的

5.gif

这里同样使用android:id="@android:id/mask"来将red的背景遮挡掉。

设置selector

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

            <item android:drawable="@color/red" android:state_pressed="true"/>
             <item android:drawable="@color/blue" android:state_pressed="false"/>

        </selector>
    </item>
</ripple>

效果是这样的

6.gif

可以看到原始颜色是蓝色，按下后变成红色，同时绿色的ripple开始出现最后叠加到一起。

3 常见问题

1.ripple的点击效果是依赖Touch事件的，因此当点击效果不出现的时候可以考虑下是否存在Touch事件被底层拦截的情况。
2.ripple是针对5.0以上的机型，因此要做好api21以下的适配，通常要做两套点击效果，不能用ripple那就用原始的selector来创建点击效果吧。