內容簡介

記錄5.0以后的Ripple（波紋效果）的使用.

• 1.為什么要使用Ripple
• 2.如何使用Ripple效果
• 3.Ripple效果的顏色值改變
• 4.Ripple的波紋范圍改變
• 5.Ripple添加一個item，其id為@android:id/mask

1.為什么要使用Ripple

• 提高用戶體驗，更好的視覺效果反饋給用戶
• 間接增加了用戶在應用停留的時間

2.如何使用Ripple效果

~
在5.0的機型上，button會自帶有Ripple點擊效果。但是往往開發者需要修改點擊效果，從而修改android:backgroud,這時候Ripple效果就會改變。所以使用Ripple的關鍵就在android:backgroud中設置。

點擊效果主要分為2類：

• 有邊界波紋
  XMLCode：

android:background="?android:attr/selectableItemBackground"

點擊效果

有邊界波紋

• 超出邊界波紋（圓形）
  XMLCode：

android:background="?android:attr/selectableItemBackgroundBorderless"

點擊效果：

超出邊界波紋

注意：

• 超出邊界波紋，API要求21以上
• 如果點擊效果沒有，很可能是該控件本身點擊沒開啟，設置如下屬性即可

android:clickable="true"

3.Ripple效果的顏色值改變

~
現在很多APP都有自己的主題顏色，而Ripple效果的顏色如果還是默認的灰色，這樣會不會顯得格格不入。現在我們就來修改下Ripple效果的顏色。

設置ripple標簽的drawable

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

點擊效果

改變顏色的Ripple

4.Ripple的波紋范圍改變

~
從上面我們知道，除了超出邊界模式，還有一種是有邊界限制的。既然要限制邊界，我們就需要給他提供一個范圍，即添加一個item標簽。

• 顏色做為Mask
  XMLCode:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
    <item android:drawable="@color/colorAccent">
    </item>
</ripple>

點擊效果：

顏色做為Mask

• 形狀做為Mask
  XMLCode:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">   
     <item >        
        <shape android:shape="oval">           
          <solid android:color="@color/colorAccent"></solid>        
       </shape>   
     </item>
</ripple>

點擊效果：

形狀做為Mask

• 圖片做為Mask
  XMLCode:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
       <item         android:drawable="@drawable/ic_launcher">    
       </item>
</ripple>

點擊效果：

圖片做為Mask

5.添加一個item，其id為@android:id/mask

對比上面的圖片做為Mask的例子，只是添加了一個id，代碼如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"        
android:color="?android:colorPrimaryDark">    
       <item android:id="@android:id/mask"        android:drawable="@drawable/ic_launcher">    
       </item>
</ripple>

然而效果卻發生了改變：

圖片做為Mask

很明顯的看到一開始，圖片是隱藏的，即：

• 如果不指定id為@android:id/mask，那么在顯示的時候會顯示出item指定的drawable。
• 如果指定id為@android:id/mask，那么默認是不會顯示該drawable，而是在點擊的時候出現。

有邊界的水波紋，用mask優化減少一層繪制

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item>
</ripple>

6.參考博文

• Android L Ripple的使用
• Android Material Design動畫
• 《Android群英傳》第12章 Android5.X 新特性詳解
• [Android 水波紋效果的探究](http://www.lxweimin.com/p/13eb4574e988）