Android 水波紋效果的探究

前言

水波紋效果從Android5.0就已經出來了，基本的使用相信你們都知道了，這裏多談一些相對深層次的使用：

• 一、基本使用
• 二、水波紋效果與佈局繪製之間的問題
• 三、長按水波紋擴散效果
• 四、Button點擊的水波紋效果

基本使用

系統自帶水波紋實現方式

有界水波紋

android:background="?android:attr/selectableItemBackground"
複製代碼

無界水波紋

以控件寬高中最大的數值做爲水波紋效果所在正方形的邊界進行繪製

android:background="?android:attr/selectableItemBackgroundBorderless"
複製代碼

自定義水波紋實現方式

無界水波紋

<?xml version="1.0" encoding="utf-8"?>  
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorAccent"> 
</ripple> 
複製代碼

有界水波紋

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/itemBackground">
    <item >
        <color android:color="@android:color/white" />
    </item>
</ripple>
複製代碼

水波紋效果與佈局繪製之間的問題

在使用了以上的 自定義有界水波紋點擊效果後，使用[開發者選項 - 調試GPU過渡繪製]獲得下面的視圖

對比後，發現綠色的文字部分通過了二重繪製，由於佈局的白色背景和文字自身顏色的緣由。若是佈局背景能去掉還能實現水波紋的效果就行了，這樣就只有文字一層的顏色。

有兩種方案能夠達到想要的這種效果：

一、使用系統自帶有界水波紋實現方式，由於系統自己的默認背景是透明色的。

android:background="?android:attr/selectableItemBackground"
複製代碼

系統的默認水波紋顏色是灰色，若是須要使用對應的高亮色來做爲ripple的背景色，咱們能夠在styles-v21系統主題里加入這個：<item name = "android:colorControlHighlight">@color/colorAccent</item>

二、使用自定義有界水波紋效果，使其默認背景色爲透明色。 寫法：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/itemBackground">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item>
</ripple>
複製代碼

添item時，若是指定id爲@android:id/mask，那麼不點擊時不會顯示出該item指定的color。 能夠設置指定子層item的android:id="@android:id/mask"來設定當前Ripple的Mask。 Mask的內容並不會被繪製到屏幕上，它的做用是限定Ripple效果的繪製區域。

最後能夠獲得咱們想要的效果：

長按水波紋擴散效果

在使用小紅書時，咱們能夠看到關於「筆記」的item長按會展現擴散的效果。

android:foreground="?attr/selectableItemBackgroundBorderless"
複製代碼

又或者，無邊界的水波紋也能夠達到長按擴散的效果，只是它會超出邊界，那咱們就在對應的父佈局加一層有邊界的水波紋背景便可。就像這樣：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:onClick="@{()->adapter.openDetail(bean)}"
            android:padding="8dp">
        </RelativeLayout>
</RelativeLayout>
複製代碼

二者的區別是：長按擴散時，前者的水波紋會在圖片之上，然後者在圖片之下。

Button點擊的水波紋效果

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_weight="1"
    android:onClick="login"
    android:text="登錄"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
複製代碼

The Widget.AppCompat.Button.Colored 繼承了 Widget.AppCompat.Button style而且根據你選擇的主題應用最接近的顏色。

參考資料

• Ripple 水波紋效果
• 聊聊Android5.0中的水波紋效果
• 解決點擊ripple水波紋無效的問題
• UI之修改Button顏色保持默認點擊效果