觸摸反饋在用戶和UI元素交互的點(diǎn)提供瞬時視覺確認(rèn)督怜。例如，當(dāng)按鈕被觸摸時顯示一個水波紋效果侣滩。 這是 Android 5.0 默認(rèn)的觸摸反饋動畫摊册。

下圖就是一個按鈕默認(rèn)的觸摸反饋動畫--水波紋動畫

19.gif

（1）系統(tǒng)自帶的兩個 Ripple 波紋效果

//有邊界
?android:attr/selectableItemBackground
//無邊界 （要求API21以上）
?android:attr/selectableItemBackgroundBorderless 

使用時只需要把上面這兩個值作為 View 的 android:background="" 或 android:foreground="" 即可（如果已經(jīng)有背景， 可以設(shè)置到前景屬性中）篙贸。同時如果想要效果顯示出來要保證 View 是可點(diǎn)擊的(比如控件本身可點(diǎn)擊投队、或者給控件設(shè)置點(diǎn)擊事件、 或給控件設(shè)置 android:clickable="true")爵川。

動畫的顏色是系統(tǒng)默認(rèn)的敷鸦，您可以手動去設(shè)置這個顏色值，只需要在AppTheme添加如下屬性即可：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:colorControlHighlight">#B8BD8B</item>
</style>

效果如下：

20.gif

（2）自定義 Ripple 波紋效果

[無邊界]

在drawable中添加ripple_ani.xml文件

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

在按鈕中設(shè)置背景：

    <Button
        android:id="@+id/bt_recycleview"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:textSize="14sp"
        android:background="@drawable/ripple_ani"
        android:layout_centerHorizontal="true"
        android:text="111"/>

ripple只能運(yùn)用于Android5.0之后的版本寝贡，所以還請?jiān)赿rawable-v21中做適配

圖片.png

效果如下：

21.gif

上圖是沒有邊界的效果扒披，無邊界的ripple會覆蓋按鈕原本的背景顏色，所以上圖是看不到按鈕的背景色的圃泡，那么為ripple添加邊界的效果是怎樣的呢碟案？

[有邊界]

在布局中添加邊界

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

    <!-- 添加邊界 -->
    <item android:drawable="@color/colorPrimary"/>

</ripple>

效果如下：

22.gif

（3）結(jié)合selector

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

    <!-- 添加邊界 -->
    <item>
        <selector>
            <item
                android:drawable="@color/bt_1"
                android:state_pressed="true">
            </item>
            <item
                android:drawable="@color/bt_2"
                android:state_pressed="false">
            </item>
        </selector>
    </item>

</ripple>

效果如下：

23.gif

（4）結(jié)合shape

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

    <!-- 添加邊界 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <solid android:color="@color/bt_2"/>
        </shape>
    </item>

</ripple>

效果如下：

24.gif

（5）注意點(diǎn)

ripple是在Android5.0之后才有的，我們需要做一下兼容

就拿第四點(diǎn)來舉例颇蜡。

在drawable-v21目錄下新建文件ripple_ani.xml价说，代碼如下：

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

    <!-- 添加邊界 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <solid android:color="@color/bt_2"/>
        </shape>
    </item>

</ripple>

在drawable目錄下新建文件ripple_ani.xml，代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <solid android:color="@color/bt_2"/>
</shape>

參考

https://github.com/OCNYang/Android-Animation-Set/tree/master/ripple-animation

[本章完...]