Posts Tagged ‘Ripple’

JoJo,这是我最后的波纹了,收下它吧!——Android 波纹效果使用

in 垃圾文章

本文主要内容:介绍 Android 波纹效果与兼容方式
注:本文属于 垃圾文章补完计划

在 Android App 中,触摸反馈是非常重要的,能让用户有点下去的感觉。

最简单的实现方式莫过于用户按下的时候改变背景色,例如:

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

然后直接android:background="@drawable/white_bg" 即可。

在 Android5.0后,Android 是支持了波纹效果的,视觉体验比单纯改变背景色好,使用起来也很简单,android:background="?attr/selectableItemBackground" 即可。但是问题在于它是没背景色的,难道还得再加一层 FrameLayout 不成?并不需要,直接加一个 drawable 即可:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

这样便是一个白底的波纹背景了,需要的话也可设置圆角之类的。

但是,该方式在 Android6.0 上会有渲染 bug,加载的第一个用该背景的控件波纹是不会生效的。因此查了下 API,发现提供了更科学的波纹方式,在 drawable-21 中添加:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/white_hover"
    >
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white"/>
    <item android:drawable="@color/white"/>
</ripple>

这样兼容性就彻底没问题了。

© 2018 一隅 - Powered by Wordpress / Theme: Tabinikki