Android 為控件添加點擊漣漪效果


      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,表示圖片只作為蒙版,不顯示出來。當我們點擊控件時,可以看到一個炫酷的安卓的漣漪效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM