長按水波紋擴展效果

前言

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

• 1、基本使用
• 2、水波紋效果與布局繪制之間的問題
• 3、長按水波紋擴散效果
• 4、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>

圓角背景：

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

    <!--背景透明色 android:id="@android:id/mask"-->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="5dp"
                android:left="15dp"
                android:right="15dp"
                android:top="5dp" />
            <solid android:color="@color/color_page_bg" />
            <corners android:radius="100dp" />
        </shape>
    </item>

</ripple>

水波紋效果與布局繪制之間的問題

自定義有界水波紋

對比后，發現綠色的文字部分經過了二重繪制，因為布局的白色背景和文字自身顏色的原因。如果布局背景能去掉還能實現水波紋的效果就好了，這樣就只有文字一層的顏色。

有兩種方案可以達到想要的這種效果：

1、使用系統自帶有界水波紋實現方式，因為系統本身的默認背景是透明色的。

android:background="?android:attr/selectableItemBackground"

系統的默認水波紋顏色是灰色，如果需要使用對應的高亮色來作為ripple的背景色，我們可以在styles-v21系統主題里加入這個：<item name = "android:colorControlHighlight">@color/colorAccent</item>

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

<?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效果的繪制區域。

最后可以得到我們想要的效果：

image.png

長按水波紋擴散效果

長按水波紋擴展效果

在使用小紅書時，我們可以看到關于“筆記”的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陰影與點擊效果

<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顏色保持默認點擊效果