Android 水波紋效果的探究

Jingbin發表於2018-05-27

長按水波紋擴充套件效果

前言

水波紋效果從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>
複製程式碼

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

Android 水波紋效果的探究
在使用了以上的自定義有界水波紋點選效果後,使用[開發者選項 - 除錯GPU過渡繪製]得到下面的檢視
自定義有界水波紋

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

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

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並且根據你選擇的主題應用最接近的顏色。

參考資料

相關文章