Android 为控件添加点击涟漪效果

Posted 2020-10-11 微啊微末

      android在5.0版为Button默认添加了点击时的涟漪效果，而且在其他的控件上也可以轻松的实现这种炫酷的效果。涟漪效果可以分为两种，一种时有边界的涟漪，另一种时无边界的涟漪。所谓的有边界，即涟漪的效果展现不会超过控件的大小；另一种无边界效果，涟漪在越过控件边界之后还会继续扩散，然后逐渐消失。

实现涟漪效果，我们只需要在控件的android:backgroud 属性上进行设置即可。两种效果的设置如下 ：

有边界的涟漪效果：

android:background="?android:attr/selectableItemBackground"

无边界的涟漪效果：

android:background="?android:attr/selectableItemBackgroundBorderless"

除了进行上面的设置之外，还要记得设置控件为可点击的

android:clickable="true"

     

       如果控件已经使用了android:background属性去设置背景色或者背景图片，但是有想要有点击时的涟漪效果。那么我们可以考虑在android:foreground属性中设置涟漪效果，这样同样可以达到点击时产生涟漪，也不会影响我们对控件背景的设置。不过对于默认无法点击的控件，还要记得设置android:clickable为true。另外还要注意，如果Android版本过低，无边界的涟漪效果可能无法很好的展现。

 

除了使用上述方法设置涟漪效果外，我们也可以考虑自定义涟漪效果，比如自定义涟漪的颜色，自定义涟漪的边界等，使UI的展现更加丰富。

想要自定义涟漪效果，就要使用到Ripple。我们可以在xml中使用ripple标签来设置涟漪的效果 ：

1）自定义涟漪的颜色：

创建xml文件custom_bg.xml，内容如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
</ripple>

这里指定了涟漪的颜色为 #000000，即黑色。使用该xml文件作为背景后，当点击控件时，涟漪的颜色就会变为黑色。

也就是说，我们在ripple标签的color中指定的颜色，就是涟漪的颜色。

 

2）自定义涟漪的边界：

假设我们想要涟漪的边界为一个椭圆，对上面的custom_bg.xml文件进行修改，我们只需要在ripple标签里再添加一个item标签，再在item标签里设置边界的形状（shape）大小即可。item里的设置和我们平常为drawable设置形状大小的操作类似：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item >
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</ripple>

在item标签中指定了一个oval（椭圆），它的颜色为白色，大小不超过控件（和控件四边相切）。当我们设置该xml为控件背景后，控件上面会显示一个白色的椭圆，当我们点击之后，会在椭圆上产生一个逐渐扩散的黑色涟漪，这个涟漪慢慢扩散消失，但不会超出椭圆的范围。

虽然涟漪有边界了，但这不是我们想要的效果，我们只希望为涟漪指定一个椭圆的边界，但不希望这个白色的椭圆会显示在控件上。那么如果我们去掉里面的

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

这一行就可以了吗？答案是不行的。当我们不为椭圆填充颜色之后，就没有涟漪效果了。原因是如果不为椭圆设置颜色，那么椭圆就默认没有大小，这样涟漪的显示范围就为零。想要只设定涟漪的边界，而不影响控件的显示，可以为item标签设置id为@android:id/mask 。如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
        </shape>
    </item>
</ripple>

这样设置之后，相当于设置了一个椭圆的遮罩，点击控件之后，涟漪扩散的边界就是一个椭圆。

 

3）为涟漪设定更复杂的边界

我们用shape为涟漪设置边界形状，只有rectangle，oval等几个基本形状。想要使涟漪的效果更加炫酷，可以使用图片来作为涟漪的边界，显示时，图片的不透明部分就是涟漪的可扩散区域。当我们点击控件时，可以清楚的显示出图片的轮廓，能得到更好的视觉效果。

修改custom_bg.xml文件，如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
    <item android:id="@android:id/mask" android:drawable="@drawable/ic_launcher">
    </item>
</ripple>

我们设定涟漪的颜色为#000000（黑色），在item标签中通过android：drawable指定了涟漪的边界为ic_launcher这张图片，即涟漪以该图片的轮廓作为边界，只会在该图片不透明部分扩散。另外设置了android:id/mask，表示图片只作为蒙版，不显示出来。当我们点击控件时，可以看到一个炫酷的安卓的涟漪效果。