內(nèi)容簡介
記錄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點擊效果塘安。但是往往開發(fā)者需要修改點擊效果,從而修改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效果的顏色值改變
~
現(xiàn)在很多APP都有自己的主題顏色畜普,而Ripple效果的顏色如果還是默認的灰色,這樣會不會顯得格格不入∪阂叮現(xiàn)在我們就來修改下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
注意
這里的圖片一定要顯示完整蟹瘾,不然會出現(xiàn)閃爍。
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>
然而效果卻發(fā)生了改變:
圖片做為Mask
很明顯的看到一開始喷鸽,圖片是隱藏的众雷,即:
- 如果不指定id為@android:id/mask,那么在顯示的時候會顯示出item指定的drawable。
- 如果指定id為@android:id/mask砾省,那么默認是不會顯示該drawable鸡岗,而是在點擊的時候出現(xiàn)。
有邊界的水波紋编兄,用mask優(yōu)化減少一層繪制
<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.reibang.com/p/13eb4574e988)