水波紋效果已經不是什麼稀罕的東西了，用過5.0新控制元件的小夥伴都知道這個效果，可是如果使用一個TextView或者Button或者其它普通控制元件的話，你是否知道如何給它設定水波紋效果呢？OK，我們今天就來看看這個水波紋效果的實現。水波紋效果的實現有系統自帶屬性可以實現，我們也可以自定義實現效果。

1.系統自帶水波紋實現方式

 有界水波紋

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

效果：

程式碼：

1. <TextView  
2.     android:layout_width="match_parent"
3.     android:layout_height="56dp"
4.     android:layout_centerInParent="true"
5.     android:layout_marginTop="36dp"
6.     android:background="?android:attr/selectableItemBackground"
7.     android:clickable="true"
8.     android:gravity="center"
9.     android:text="Hello World!"/>  

無界水波紋

程式碼：

1. <TextView  
2.     android:layout_width="match_parent"
3.     android:layout_height="56dp"
4.     android:layout_centerInParent="true"
5.     android:layout_marginTop="36dp"
6.     android:background="?android:attr/selectableItemBackgroundBorderless"
7.     android:clickable="true"
8.     android:gravity="center"
9.     android:text="Hello World!"/>  

2.自定義水波紋實現方式

無界水波紋

自定義這個效果其實也很簡單，需要在drawable資料夾中定義ripple節點，再設定上顏色就可以了：

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

1. <TextView  
2.     android:layout_width="match_parent"
3.     android:layout_height="56dp"
4.     android:layout_centerInParent="true"
5.     android:layout_marginTop="36dp"
6.     android:background="@drawable/nomaskripple"
7.     android:clickable="true"
8.     android:gravity="center"
9.     android:text="Hello World!"/>  

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

有界水波紋

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

帶圖片形狀的水波紋

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

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

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

自繪形狀的水波紋

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

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

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

這種方式我們在shape中定義的顏色只是用來劃定水波紋顯示區域，於檢視顯示上並沒有什麼用。如果你想讓控制元件一開始就顯示shape中定義的顏色，可以這樣來定義ripple：

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

大家看到，我可以在item中定義shape，那麼可能有小夥伴會想到我是否可以在item中定義selector呢？當然可以。

帶selector效果的水波紋

程式碼：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ripple xmlns:android="http://schemas.android.com/apk/res/android"
3.         android:color="@color/colorAccent">  
4.     <item>  
5.         <selector>  
6.             <item  
7.                 android:state_pressed="true"
8.                 android:drawable="@drawable/ic_launcher"/>  
9.             <item  
10.                 android:state_pressed="false"
11.                 android:drawable="@drawable/bg"/>  
12.         </selector>  
13.     </item>  
14. </ripple>  

Ok，這就是5.0中水波紋效果的使用。

參考資料：

以上。