Android UI效果篇-（1）Ripple

內容簡介

記錄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，而是在點選的時候出現。

6.參考博文

• Android L Ripple的使用
• Android Material Design動畫
• 《Android群英傳》第12章 Android5.X 新特性詳解