溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-26 06:12:43 來(lái)源：腳本之家 閱讀：155 作者：_江南一點(diǎn)雨 欄目：移動(dòng)開(kāi)發(fā)

水波紋效果已經(jīng)不是什么稀罕的東西了，用過(guò)5.0新控件的小伙伴都知道這個(gè)效果，可是如果使用一個(gè)TextView或者Button或者其它普通控件的話，你是否知道如何給它設(shè)置水波紋效果呢？OK，我們今天就來(lái)看看這個(gè)水波紋效果的實(shí)現(xiàn)。水波紋效果的實(shí)現(xiàn)有系統(tǒng)自帶屬性可以實(shí)現(xiàn)，我們也可以自定義實(shí)現(xiàn)效果。

1.系統(tǒng)自帶水波紋實(shí)現(xiàn)方式 有界水波紋

水波紋效果大致上可以分為兩種，一種是有界的，一種無(wú)界，我們先來(lái)看看有界水波紋效果：

效果：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

代碼：

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="?android:attr/selectableItemBackground" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/>

只需要給TextView設(shè)置背景即可，背景內(nèi)容就為系統(tǒng)自帶的selecttableItemBackground。這種是有界水波紋，就是水波紋會(huì)在TextView所在區(qū)域進(jìn)行繪制。

無(wú)界水波紋

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

代碼：

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="?android:attr/selectableItemBackgroundBorderless" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/>

所謂的無(wú)界并非完全無(wú)界，而是以控件寬高中最大的數(shù)值作為水波紋效果所在正方形的邊界進(jìn)行繪制。OK，這兩種都是系統(tǒng)自帶的水波紋效果，如果我們想要自定義又該怎么做呢？

2.自定義水波紋實(shí)現(xiàn)方式無(wú)界水波紋

自定義這個(gè)效果其實(shí)也很簡(jiǎn)單，需要在drawable文件夾中定義ripple節(jié)點(diǎn)，再設(shè)置上顏色就可以了：

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

在布局文件中將之引用為控件的背景：

<TextView 
 android:layout_width="match_parent" 
 android:layout_height="56dp" 
 android:layout_centerInParent="true" 
 android:layout_marginTop="36dp" 
 android:background="@drawable/nomaskripple" 
 android:clickable="true" 
 android:gravity="center" 
 android:text="Hello World!"/>

顯示效果如下：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

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

有界水波紋

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

有界水波紋需要我們?cè)趓ipple節(jié)點(diǎn)中定義item，item的id要為系統(tǒng)id  mask，然后還要定義drawable，drawable中的顏色并沒(méi)有什么卵用，水波紋的顏色是由ripple節(jié)點(diǎn)中的顏色來(lái)控制的，看看顯示效果：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

帶圖片形狀的水波紋

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

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

我這里使用了系統(tǒng)自帶的小機(jī)器人，我們來(lái)看看顯示效果：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

大家看到，這個(gè)時(shí)候的水波紋效果就是這個(gè)小機(jī)器人這張圖片中非透明像素點(diǎn)所在的區(qū)域了。

自繪形狀的水波紋

自繪shape，來(lái)看一個(gè)圓角矩形：

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

在ripple中引用該矩形：

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

顯示效果：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

這種方式我們?cè)趕hape中定義的顏色只是用來(lái)劃定水波紋顯示區(qū)域，于視圖顯示上并沒(méi)有什么用。如果你想讓控件一開(kāi)始就顯示shape中定義的顏色，可以這樣來(lái)定義ripple：

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

顯示效果如下：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

大家看到，我可以在item中定義shape，那么可能有小伙伴會(huì)想到我是否可以在item中定義selector呢？當(dāng)然可以。

帶selector效果的水波紋

代碼：

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
 android:color="@color/colorAccent"> 
 <item> 
 <selector> 
  <item 
  android:state_pressed="true" 
  android:drawable="@drawable/ic_launcher"/> 
  <item 
  android:state_pressed="false" 
  android:drawable="@drawable/bg"/> 
 </selector> 
 </item> 
</ripple>

顯示效果：

Android5.0中多種水波紋效果的實(shí)現(xiàn)代碼

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

源碼下載

參考資料：

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手