ripple实现点击时的水波纹效果

前言

在看网易云音乐播放器的时候，觉得它在选择音乐时候的波纹效果很好看，就想要模仿这种效果。然后在网上找了一下这方面的文章，最后被我发现了ripple，用ripple就能很好地实现这种波纹效果。所以用这篇文章记录下ripple的实现，如果发现我的代码有问题，欢迎大家指出。

实现的效果

ripple的使用

首先在res目录下新建一个drawable-v21的目录，然后在里面新建一个drawable文件ripple_style_one.xml，如图

ripple_style_one.xml

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

    <item android:drawable="@android:color/white"/>   

ripple>

在该文件中可以设置点击时的波纹颜色，然后在控件的background中设置该drawable文件就可以了

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="纯波纹"
        android:clickable="true"
        android:textSize="22sp"
        android:paddingStart="30dp"
        android:paddingEnd="30dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:focusable="true"
        android:background="@drawable/ripple_style_one"/>

除了单独使用ripple外，ripple还可以和selector结合起来，使用方法如下

ripple_style_two.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/darker_gray">		
    <item>		
        <selector>
            <item android:state_pressed="true"
                android:drawable="@android:color/darker_gray"/>		
            <item android:drawable="@android:color/white"/>		
        selector>
    item>
ripple>

同样在控件的background中设置该drawable文件

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="波纹搭配selector"
        android:clickable="true"
        android:textSize="22sp"
        android:paddingStart="30dp"
        android:paddingEnd="30dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:focusable="true"
        android:background="@drawable/ripple_style_two"/>

OK，做完这些再运行就会出现文章开头处给出的效果。

注意

• 设置了ripple的drawable文件必须放在drawable-v21文件夹中，如果放在drawable文件夹中会报错。
• drawable-v21文件夹存放的xml文件在API 21（5.0版本）以上才可使用，也就是说低于该版本的手机不能使用这种波纹效果。
• 在设置RecyclerView的item的水波纹点击效果的时候，如果item的布局在CardView中，不能在CardView中设置水波纹效果，不然会没有效果。应在对应的线性布局或相对布局中设置。