Android 為控制項添加點擊漣漪效果

標籤：安卓   版本   span   rip   rectangle   shape   背景圖片   XML   原因   

      Android在5.0版為Button預設添加了點擊時的漣漪效果，而且在其他的控制項上也可以輕鬆的實現這種炫酷的效果。漣漪效果可以分為兩種，一種時有邊界的漣漪，另一種時無邊界的漣漪。所謂的有邊界，即漣漪的效果展現不會超過控制項的大小；另一種無邊界效果，漣漪在越過控制項邊界之後還會繼續擴散，然後逐漸消失。

實現漣漪效果，我們只需要在控制項的android:backgroud 屬性上進行設定即可。兩種效果的設定如下 ：

有邊界的漣漪效果：

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

無邊界的漣漪效果：

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

除了進行上面的設定之外，還要記得設定控制項為可點擊的

android:clickable="true"

     

       如果控制項已經使用了android:background屬性去設定背景色或者背景圖片，但是有想要有點擊時的漣漪效果。那麼我們可以考慮在android:foreground屬性中設定漣漪效果，這樣同樣可以達到點擊時產生漣漪，也不會影響我們對控制項背景的設定。不過對於預設無法點擊的控制項，還要記得設定android:clickable為true。另外還要注意，如果Android版本過低，無邊界的漣漪效果可能無法很好的展現。

 

除了使用上述方法設定漣漪效果外，我們也可以考慮自訂漣漪效果，比如自訂漣漪的顏色，自訂漣漪的邊界等，使UI的展現更加豐富。

想要自訂漣漪效果，就要使用到Ripple。我們可以在xml中使用ripple標籤來設定漣漪的效果 ：

1）自訂漣漪的顏色：

建立xml檔案custom_bg.xml，內容如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">
</ripple>

這裡指定了漣漪的顏色為 #000000，即黑色。使用該xml檔案作為背景後，當點擊控制項時，漣漪的顏色就會變為黑色。

也就是說，我們在ripple標籤的color中指定的顏色，就是漣漪的顏色。

 

2）自訂漣漪的邊界：

假設我們想要漣漪的邊界為一個橢圓，對上面的custom_bg.xml檔案進行修改，我們只需要在ripple標籤裡再添加一個item標籤，再在item標籤裡設定邊界的形狀（shape）大小即可。item裡的設定和我們平常為drawable設定形狀大小的操作類似：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">    <item >        <shape android:shape="oval">            <solid android:color="#ffffff"/>        </shape>    </item></ripple>

在item標籤中指定了一個oval（橢圓），它的顏色為白色，大小不超過控制項（和控制項四邊相切）。當我們設定該xml為控制項背景後，控制項上面會顯示一個白色的橢圓，當我們點擊之後，會在橢圓上產生一個逐漸擴散的黑色漣漪，這個漣漪慢慢擴散消失，但不會超出橢圓的範圍。

雖然漣漪有邊界了，但這不是我們想要的效果，我們只希望為漣漪指定一個橢圓的邊界，但不希望這個白色的橢圓會顯示在控制項上。那麼如果我們去掉裡面的

<solid android:color="#ffffff"/>

這一行就可以了嗎？答案是不行的。當我們不為橢圓填充顏色之後，就沒有漣漪效果了。原因是如果不為橢圓設定顏色，那麼橢圓就預設沒有大小，這樣漣漪的顯示範圍就為零。想要只設定漣漪的邊界，而不影響控制項的顯示，可以為item標籤設定id為@android:id/mask 。如下：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#000000">    <item android:id="@android:id/mask">        <shape android:shape="oval">            <solid android:color="#ffffff"/>        </shape>    </item></ripple>

這樣設定之後，相當於設定了一個橢圓的遮罩，點擊控制項之後，漣漪擴散的邊界就是一個橢圓。

 

3）為漣漪設定更複雜的邊界

我們用shape為漣漪設定邊界形狀，只有rectangle，oval等幾個基本形狀。想要使漣漪的效果更加炫酷，可以使用圖片來作為漣漪的邊界，顯示時，圖片的不透明部分就是漣漪的可擴散地區。當我們點擊控制項時，可以清楚的顯示出圖片的輪廓，能得到更好的視覺效果。

修改custom_bg.xml檔案，如下：

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

我們設定漣漪的顏色為#000000（黑色），在item標籤中通過android：drawable指定了漣漪的邊界為ic_launcher這張圖片，即漣漪以該圖片的輪廓作為邊界，只會在該圖片不透明部分擴散。另外設定了android:id/mask，表示圖片只作為蒙版，不顯示出來。當我們點擊控制項時，可以看到一個炫酷的安卓的漣漪效果。

Android 為控制項添加點擊漣漪效果