RippleDrawable 的简单使用

本文介绍了RippleDrawable在Android 5.0及更高版本中用于实现自定义触摸反馈动画的用法。通过在drawable-v21目录下定义<ripple>元素,可以实现兼容低版本的效果。文章详细讲述了如何创建StateListDrawable资源,如button_default.xml,以及如何设计RippleDrawable的动画效果,如background_button.xml,并在res/animator目录下定义动画器实例button_press.xml,以增加尺寸缩放效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

RippleDrawable 就是一个自定义触摸反馈动画。是在 Android 5.0 时推出的动画效果。为了兼容低版本,可以在将 <ripple> 元素定义在 drawable-v21 目录下;

效果如下:



首先定义一个 StateListDrawable 资源;

button_default.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/disabled" />
    <item
        android:state_pressed="true"
        android:drawable="@drawable/selected" />
    <item
        android:state_focused="true"
        android:drawable="@drawable/selected" />

    <item android:drawable="@drawable/fdefault" />
</selector>


需要注意 <selector> 时有序的。Android在遍历烈表时,会返回第一个状态完全匹配的 Drawable 。所以将常规状态放在烈表的最底部。




使用一些动画触摸反馈修饰按钮示例。使用 <ripple> 元素定义 XML (在 drawable-v21目录下),可用于构造 RippleDrawable;

background_button.xml :

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#0CC">
    <!--显示默认的 drawable-->
    <item android:drawable="@drawable/button_default" />

    <!--匹配默认值的波纹效果剪切遮罩-->
    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/button_default" />
</ripple>



增加尺寸的缩放效果(res/animator 目录下);

button_press.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <set android:ordering="together">
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="scaleX"
                android:valueTo="0.8"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="scaleY"
                android:valueTo="0.8"
                android:valueType="floatType" />
        </set>
    </item>

    <item>
        <set android:ordering="together">
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="scaleX"
                android:valueTo="1.0"
                android:valueType="floatType" />
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="scaleY"
                android:valueTo="1.0"
                android:valueType="floatType" />
        </set>
    </item>
</selector>

虽然 XML 结构使用和前面的 button_default.xml 相同的 <seletor>,但是在 res/animator 目录下,表示动画器实例而非 Drawable 的状态列表集合。




content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.crazy.bitmapxfermode.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:text="My Button"
        android:background="@drawable/background_button"
        android:stateListAnimator="@animator/button_press"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值