android ripple android ripple 触发

转载

mob6454cc6658d1 2023-10-24 07:24:01

文章标签 android ripple 移动开发 android xml 控件 文章分类 Android 移动开发

RippleDrawable是Android 5.0之后添加了一种触摸反馈动画，在控件被触摸时触发水波纹效果。此效果只在Android 5.0以上设备上生效。

系统自带效果

Android 5.0之后Button默认自带Ripple效果，同时系统提供了2个默认的Ripple效果。

//有边界
android:background="?android:attr/selectableItemBackground"
//无边界
android:background="?android:attr/selectableItemBackgroundBorderless"

通过设置为background或者foreground属性来即可，Ripple的颜色受Theme的colorAccent属性影响。

自定义Ripple效果

自定义TouchFeedback需要通过Ripple标签进行实现，虽然说Ripple是一种动画效果，但通过上面的设置方式也可以看出，其实本质上还是Drawable，所以需要放到drawable/文件夹下。根据Ripple的效果不同，分成以下几种情况来说明用法：

简单无边界效果

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

color属性用于指定波纹的颜色值，还有一个radius属性用于设置波纹的半径，此半径默认为控件宽度的一半，若设置的radius值小于控件宽度的一半，波纹效果居中显示。触摸半径之外的控件区域无波纹效果。具体效果可自行通过设置此值进行摸索，可以更直观的看到效果。

有边界，有背景效果

android ripple android ripple 触发_控件

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

添加<item>设置drawable属性设置控件背景，通过设置背景波纹效果会被限定在背景范围内，注意是背景范围内而不是控件范围内，有什么区别呢？看下图：

设置方式如下：

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

我们只是把原来的颜色背景换成了一张log图片，而且通过上图我们可以发现，水波纹效果竟然只在logo图片区域显示，logo的间隙空白处竟然没有波纹效果。这就是我们上面说的波纹效果只叠加显示在背景图的范围内。

带mask的效果

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

与设置背景图的方式类似添加<item>并设置属性drawble属性，但是注意drawable的id必须设置为@android:id/mask。效果就是当控件被触摸时才显示mask对应的drawable，并且水波纹效果只能mask范围内叠加显示。

ripple与shape配合使用

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FF0000">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="10dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
</ripple>

没啥好解释的，看下实现很容易明白。

ripple与select配合使用

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

    <item>
        <selector>
            <item android:state_pressed="true">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorAccent" />
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorPrimaryDark" />
                </shape>
            </item>
        </selector>
    </item>

    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/logo" />

</ripple>