Android5.0中多種水波紋效果的實現(xiàn)代碼

2019-12-12 00:52:54

字體：大中小

供稿：網(wǎng)友

水波紋效果已經(jīng)不是什么稀罕的東西了，用過5.0新控件的小伙伴都知道這個效果，可是如果使用一個TextView或者Button或者其它普通控件的話，你是否知道如何給它設(shè)置水波紋效果呢？OK，我們今天就來看看這個水波紋效果的實現(xiàn)。水波紋效果的實現(xiàn)有系統(tǒng)自帶屬性可以實現(xiàn)，我們也可以自定義實現(xiàn)效果。

1.系統(tǒng)自帶水波紋實現(xiàn)方式有界水波紋

水波紋效果大致上可以分為兩種，一種是有界的，一種無界，我們先來看看有界水波紋效果：

效果：

代碼：

<TextView  android:layout_width="match_parent"  android:layout_height="56dp"  android:layout_centerInParent="true"  android:layout_marginTop="36dp"  android:background="?android:attr/selectableItemBackground"  android:clickable="true"  android:gravity="center"  android:text="Hello World!"/>

只需要給TextView設(shè)置背景即可，背景內(nèi)容就為系統(tǒng)自帶的selecttableItemBackground。這種是有界水波紋，就是水波紋會在TextView所在區(qū)域進(jìn)行繪制。

無界水波紋

代碼：

<TextView  android:layout_width="match_parent"  android:layout_height="56dp"  android:layout_centerInParent="true"  android:layout_marginTop="36dp"  android:background="?android:attr/selectableItemBackgroundBorderless"  android:clickable="true"  android:gravity="center"  android:text="Hello World!"/>

所謂的無界并非完全無界，而是以控件寬高中最大的數(shù)值作為水波紋效果所在正方形的邊界進(jìn)行繪制。OK，這兩種都是系統(tǒng)自帶的水波紋效果，如果我們想要自定義又該怎么做呢？

2.自定義水波紋實現(xiàn)方式無界水波紋

自定義這個效果其實也很簡單，需要在drawable文件夾中定義ripple節(jié)點，再設(shè)置上顏色就可以了：

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

在布局文件中將之引用為控件的背景：

<TextView  android:layout_width="match_parent"  android:layout_height="56dp"  android:layout_centerInParent="true"  android:layout_marginTop="36dp"  android:background="@drawable/nomaskripple"  android:clickable="true"  android:gravity="center"  android:text="Hello World!"/>

顯示效果如下：

OK，大家看到這是無界水波紋。OK，如果想定義有界水波紋又該如何呢？

有界水波紋

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorPrimary">  <item  android:id="@android:id/mask"  android:drawable="@color/colorAccent"/> </ripple>

有界水波紋需要我們在ripple節(jié)點中定義item，item的id要為系統(tǒng)id mask，然后還要定義drawable，drawable中的顏色并沒有什么卵用，水波紋的顏色是由ripple節(jié)點中的顏色來控制的，看看顯示效果：

帶圖片形狀的水波紋

有的時候如果你希望水波紋不是長條形，又該如何呢？有兩種解決方案，一種是使用圖片，還有就是自定義shape，我們先來看看使用圖片：

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">  <item  android:id="@android:id/mask"  android:drawable="@drawable/ic_launcher"/> </ripple>

我這里使用了系統(tǒng)自帶的小機器人，我們來看看顯示效果：

大家看到，這個時候的水波紋效果就是這個小機器人這張圖片中非透明像素點所在的區(qū)域了。

自繪形狀的水波紋

自繪shape，來看一個圓角矩形：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">  <corners android:radius="10dp"/>  <solid android:color="@color/colorPrimary"/> </shape>

在ripple中引用該矩形：

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">  <item  android:id="@android:id/mask"  android:drawable="@drawable/custom_shape"/> </ripple>

顯示效果：

這種方式我們在shape中定義的顏色只是用來劃定水波紋顯示區(qū)域，于視圖顯示上并沒有什么用。如果你想讓控件一開始就顯示shape中定義的顏色，可以這樣來定義ripple：

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/colorAccent">  <!--<item-->  <!--android:id="@android:id/mask"-->  <!--android:drawable="@drawable/custom_shape"/>-->  <item>  <shape android:shape="rectangle">   <corners android:radius="10dp"/>   <solid android:color="@color/colorPrimary"/>  </shape>  </item> </ripple>

顯示效果如下：

大家看到，我可以在item中定義shape，那么可能有小伙伴會想到我是否可以在item中定義selector呢？當(dāng)然可以。

帶selector效果的水波紋

代碼：

<?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android"  android:color="@color/colorAccent">  <item>  <selector>   <item   android:state_pressed="true"   android:drawable="@drawable/ic_launcher"/>   <item   android:state_pressed="false"   android:drawable="@drawable/bg"/>  </selector>  </item> </ripple>

顯示效果：