安卓-水波纹

安卓-水波纹

在开发安卓音乐播放器时，点击音乐需要水波纹效果，所以对安卓点击产生水波纹进行了学习。

标签：

ripple标签，对应一个rippledrawable，当它被设置为一个控件的background属性时，控件在被按下时（无论控件是否是按钮，这里的按下是指手指位置），即会显示水波效果。

没有边界的ripple

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

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ripple_red"
    android:clickable="true"
    android:gravity="center"
    android:text="Ripple With No Mask" />

当控件被点击时，水波纹呈现没有边界的效果。

用颜色作为边界

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

当控件被点击时，水波纹效果会被局限在控件区域中。

用图片作为边界

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

在item中引入图片资源，当控件被点击时，水波纹效果为图片。

用设定的形状作为边界

先设定形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid android:color="#ff9d77"/>
    <corners 
        android:bottomRightRadius="100dp"/>
</shape>

定义ripple

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

先设定好形状，再在ripple中引入形状文件，当控件被点击时，水波纹效果会被局限在设定好的形状中。

搭配selector作为ripple

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF0000" >
    <item>
        <selector>
            <item
                android:drawable="@drawable/icon_folder_i"
                android:state_pressed="true">
            </item>
            <item
                android:drawable="@drawable/icon_folder_r"
                android:state_pressed="false">
            </item>
        </selector>
    </item>
 
</ripple>

通过设置选择器，当控件被点击时显示一副图片，当控件没有被点击时，显示另一幅图片。

总结

ripple的使用需要注意的点：

水波纹效果需要设置在点击事件绑定的控件上，如果设置错，水波纹效果不会出现。

选择器的使用需要谨慎，有可能会出现UI更新之后区域出现偏移的现象。