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

文章目录

• 前言
• 实现的效果
• ripple的使用
• 注意

前言

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

实现的效果

ripple的使用

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

ripple_style_one.xml

<?xml version="1.0" encoding="utf-8"?>
<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

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/darker_gray">		<!-- 波纹颜色 -->
    <item>		<!-- item中可以包含selector -->
        <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版本）以上才可使用，也就是说低于该版本的手机不能使用这种波纹效果。