Item點選水波紋效果

android飛魚發表於2018-11-26

先上效果圖

Item點選水波紋效果

 

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是系統提供的可以一個半透明灰色水波效果，在按住控制元件時，即可展示。( 如果不需要提前變藍的效果，設定純藍色背景即可。)

歡迎加入Android開發技術交流QQ群；701740775
本群提供Android高階開發資料、高階UI、效能優化、架構師課程、NDK、混合式開發（ReactNative+Weex）等相關資料和解答

不懂得問題都可以在本群提出來 還會有職業生涯規劃以及面試指導

進群修改群備註：開發年限-地區-經驗

方便架構師解答問題


相關文章