Material Design之RippleDrawable詳解


Material Design之RippleDrawable詳解


自從android5.0開始以后,google就推出了一套UI設計語言materialdesign,俗稱:材料設計。其中一個最直觀的效果就是漣漪效果,就是可以點擊的控件會有一個波浪的效果。這個效果就是RippleDirawable。今天就來研究下這個RippleDrawable。
官方地址
https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html

下面是官方文檔,也非常簡明,下面就是我按照官方的代碼來測試

這里寫圖片描述

效果圖如下:

這里寫圖片描述

這里做解釋:

  1. android:color 這個屬性是漣漪波浪的顏色
  2. android:drawable 這個屬性既可以是color,也可以是drawable資源,它是與android:id=”@android:id/mask” 緊密相關的
  3. 第4種效果一般使用在checkBox,RadioBox之類的,特別是toolbar和actionbar上面的按鈕點擊效果就是這種,一般就是使用在小巧的導航按鈕上面

一、id mask類似一個標記,
如果有該屬性,android:drawable就被忽略了。
如果沒有該屬性,android:drawable就作為了控件的背景,在你點擊控件的時候,會有和android:color的一個混合顏色。

先看看效果:

這里寫圖片描述

這個是要做實驗的layout。

有android:id=”@android:id/mask” 的時候:

這里寫圖片描述

這里寫圖片描述

可以看到,有mask的時候,android:drawable就被忽略了

沒有android:id=”@android:id/mask” 的時候:

這里寫圖片描述

這里寫圖片描述

二、對於第一幅圖中第4種現象:
官方翻譯是:如果沒有定義子層和遮罩層,波紋(Ripple)會設置成View的背景,波紋將繪制在View的層級結構最高的父節點背景。在這種情況下,繪圖區域可能延伸到可繪制的邊界外。

三、兼容5.0以下的點擊效果
很不幸的是RippleDrawable是android5.0以后推出的,它不支持5.0以前的版本,這里推薦安裝一個AndroidSelector插件,可以自動化生產兼容的資源文件。安裝如下:
這里寫圖片描述

安裝了之后要重啟才能生效,我這里安裝過了,就沒有那個install按鈕了。重啟android studio之后,就按如下步驟:res右鍵 -》 new -》 Android Selector

這里寫圖片描述

點擊了Android Selector就會出現一個選擇框

這里寫圖片描述

  1. filename :要生成drawable資源的名稱
  2. color : 控件的背景顏色
  3. pressed : 控件按壓后的背景顏色
  4. pressed-v21 : 5.0點擊的漣漪顏色

點擊ok后,生成了如下的兩個文件:

這里寫圖片描述

selectable5-backgroud : 5.0以下控件的selector資源文件
selectable5-backgroud (v21): 5.0 以上控件的RippleDrawable資源文件

當你的手機系統是高於android 5.0的,那么系統就會選擇RippleDrawable文件,如果手機系統低於android5.0,則選擇selector文件

生成的selector文件如下:

這里寫圖片描述

生成的RippleDrawable資源文件如下:

這里寫圖片描述

演示效果如下:

給一個button設置background

這里寫圖片描述

5.0以上的點擊效果如下:

這里寫圖片描述

5.0以下的點擊效果如下:

這里寫圖片描述

四、修改全局波浪效果

如果你想整體修改波紋顏色,就在style中覆蓋android:colorControlHighlight 屬性。

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!-- 修改波紋顏色 --> <item name="colorControlHighlight">@color/colorPrimary</item> </style>

</resources>

全局按鈕的點擊效果如下:

這里寫圖片描述

這樣就修改好了全局點擊的波浪效果。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com