Item點選水波紋效果

android飛魚發表於2018-11-26

先上效果圖

效果圖

ripple的使用（需要V21以上）

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/dark_blue">
    <item android:drawable="@color/blue"/>
</ripple>
複製程式碼

其中item的顏色是控制元件正常狀態的背景色，ripple中的顏色是點選時出現的顏色（會以半透明的形式展示出來）。ripple顏色的變化效果要比selector的效果更加柔和，以漸變的形式出現。

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/dark_blue">
    <item android:id="@android:id/mask" android:drawable="@drawable/ic_launcher_foreground"/>
</ripple>
複製程式碼

mask的作用：只能在規定範圍內顯示水波動畫,範圍邊界由mask遮罩物件指定（可以換一些比原有背景小的圖片資源，可以看出效果）。

將ripple檔案設定為控制元件的背景色就可以了。對於沒有設定點選事件的控制元件，是沒有變化效果的。需要為控制元件設定 android:clickable="true"

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_item_tv"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:clickable="true"
    android:background="@drawable/item_blue_selector"
    android:gravity="center"
    android:textSize="17sp" />
複製程式碼

對於低版本來說，我還是選擇selector作為適配方案。截止到現在，21及以上版本已經覆蓋了90%的裝置。

foreground設定

現在的點選水波紋效果只有在抬起手指的時候才能看到，不符合一些專案的需求。

其實在控制元件除了設定background,還可以設定foreground。

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

在控制元件上加上這一句就可以看到你們想要的效果了。selectableItemBackgroundBorderless是系統提供的可以一個半透明灰色水波效果，在按住控制元件時，即可展示。( 如果不需要提前變藍的效果，設定純藍色背景即可。)

我有一壺酒，足以慰風塵。盡傾江海里，贈飲天下人。

相關文章