Android中水波纹效果的快速实现及使用

背景

Android 5.0 以上引入了控件点击的水波纹效果，为了用户体验和相关需求需要。下面我们来一起实现。提前告知一下，实现起来相对是简单的，大家放松心态。

---

xml布局

这里先拿一个Button（按钮）控件来演示一下效果。具体在xml中引入一个button如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:foreground="@drawable/ripple_foreground"
        android:background="@drawable/button_drawable"
        android:textColor="@android:color/darker_gray"
        android:layout_centerInParent="true"
        android:id="@+id/btn_ripple"
        android:text="水波纹按钮"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />



RelativeLayout>

显示的xml界面如下：

xml显示界面就一个按钮，到时候通过运行应用程序，手机上点击这个按钮的时候就可以看到水波纹效果了。

这里有两个关键的属性：

• background属性

android:background="@drawable/button_drawable"

这个属性是设置button的背景，因为原生按钮的样式一般来说不符合用户的审美，所以都会自定义drawable文件，来定义新的button背景显示。对应的drawable文件会在下面给出。

• foreground属性

android:foreground="@drawable/ripple_foreground"

这个属性很关键，实现按钮的水波纹效果就是根据这个属性来实现的。 这也是一个drawable资源文件，下面会跟大家再细说。

---

background属性资源文件代码实现

这个是在drawable目录下，然后命名是button_drawable.xml，如下：

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    
    <corners android:radius="6dp"/>
    
    <solid android:color="@android:color/white"/>
    
    <stroke android:width="1px" android:color="@android:color/darker_gray"/>

shape>

这是最基本的一个ShapeDrawable实现，也就是一种很常见的Drawable。设置button控件的background属性后就如上图种显示的效果一样：带圆角，描边设置，还有填充颜色的设置，能达到许多背景样式，很符合用户审美。

---

foreground属性资源文件代码实现

这个需要在res资源目录下新建 drawable-v21 文件夹，然后在这里面创建ripple_foreground.xml资源文件，如下：

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

ripple>

这里新建的drawable-v21文件夹就是为了Android5.0专门新建的，当你的手机Android版本是5.0及以上的时候就会引用该文件夹下的资源文件，相应的控件的这个属性也会生效，也就可以看到水波纹效果。如果是Android 5.0版本以下，那么控件设置该foreground属性就无效，引用相关的资源文件也不起作用。

---

效果展示

这里用的是几张静态图显示的，大家可能看不到实际演示的效果，但是能展示基本的水波纹动画，也就是从点击处往四周扩散，效果确实棒棒的。

ps：本人最近好想学习ps，以后会尽量给出更加棒的图片，需要用到gif图片展示的也会相应的给出gif图片。这几张静态图还是我通过屏幕录制然后截图获取的，真是要了我的小心脏了。想说演示不易啊！

---

扩展使用及注意事项

首先，跟大家说明一下。水波纹不只是能在按钮button上面实现，在所有可以点击的控件上也是可以实现的。

所以大家所熟知的：RelativeLayout、LinearLayout都是可以实现该效果的。布局其实也可以叫做Android中的控件，只不过这些父控件还可以包含一些其他控件。

实现的话也是通过设置foreground属性来实现的。但是有一点需要特别注意，当控件本身不带点击效果的时候，不设置click属性为true或者在代码中没有设置该控件的单击事件的话，那么你是看不到水波纹效果的。而button是自带点击属性的，所以不用设置click属性为true也能看到水波纹效果。

这里就不做验证了，讲的很细，大家可以结合上面的实现自己去实践。

---

A little bit of progress every day!Come on!