Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）

 

很久很久没有写博客了，说来也有点惭愧。正好最近整理自己的项目工程目录，看到一些值得分享的控件，准备在之后的几篇博客中准备把它们陆续搬运上来。

 

这篇博客准备整理一下Android Material Design自带的点击水波纹扩散的效果。话不多说，开始正题。

水波纹效果分为两种：有界水波纹和无界水波纹。都通过系统自带的动画文件实现。

有界水波纹：

有界水波纹通过系统自带的动画文件 selectableItemBackground 实现只要将其设置为控件的背景即可。简单写几句代码：

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="15dp"
    android:background="?android:attr/selectableItemBackground"
    android:text="Button" />

效果如下：

无界水波纹：

无界水波纹通过动画文件 selectableItemBackgroundBorderless 实现，用法和有界水波纹一样，修改一下上面的代码：

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="15dp"
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:text="Button" />

效果：

可以看到，所谓的有界和无界的区别就在于，有界水波纹扩散不会超出控件自身的边界，而无界水波纹扩散范围是一个正方形区域，正方形的边长取控件高宽的较大值。

当然这样的效果还是太单调，有时我们需要自定义水波纹的颜色，方法也很简单。

有界水波纹：
要自定义有界水波纹的颜色，只需要创建drawable文件，添加ripple节点，将节点的color属性设置为你想要的颜色，再在其下添加item节点，指定该item的id属性为mask即可。
比如说我们定义“button_red_mask”文件：

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

item节点中的drawable属性另有用处，之后再讲，但这里并不影响水波纹的颜色，我这里就随便设了一个。之后再将这个文件设置为控件的背景即可：

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="15dp"
    android:background="@drawable/button_red_mask"
    android:text="Button" />

看看效果：

无界水波纹：
无界水波纹要自定义波纹颜色就更简单了，连上述的item节点都不需要，只需要ripple节点指定其color属性即可。

定义“button_red_mask “文件：

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

</ripple>

再将其设置为控件的背景：

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="15dp"
    android:background="@drawable/button_red_unmask"
    android:text="Button" />

效果：

除了自定义波纹颜色，你甚至可以自定义波纹的扩散边界。做法也不复杂，就是我们之前提到的item节点中的drawable属性，只需要将drawable属性设置为指定的图片，就可以将该图片作为扩散边界。来试一试。

定义“button_red_mask_icon“文件：

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

将其设置为控件的背景：

<Button
    android:id="@+id/button"
    android:layout_width="350dp"
    android:layout_height="350dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/button_red_mask_icon"
    android:text="Button" />

看看效果：

当然自定义边界所指定的图片，除了真实的图片，自定义的drawble资源也是可以的。

比如说我们先定义一个圆角矩形资源“button_red_up”

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

    <solid android:color="#ff5151" />

    <corners android:radius="40dp" />

</shape>

再定义一个“button_red_mask_shape”文件，将item节点的drawable属性设置为上面的“button_red_up”：

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