Android5.0水波紋效果適配4.X

最近研究Google Material Design 發現檔次比公司UI圖高很多,有木有.這裏先實現個水波紋效果來感受下 效果圖:
xi

1. 系統有界效果

.xml設置:

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

向下兼容,API21以下也可以使用,點擊會變色,但不會有水波紋效果.

2. 系統無界效果

.xml設置:

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

特別注意: 此效果API21以上才能用,21以下會報錯. 所以最小版本要設置爲21

這裏寫圖片描述

3. 自定義有界效果

在res裏創建drawable-v21文件 white_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/ripple">
   <!--去掉此item內容就是無界效果-->
    <item>
        <shape>
            <!-- 中間的背景色-->
            <solid android:color="@color/white"/>
        </shape>
    </item>

</ripple>

特別注意: 需要在drawable文件裏創建同名文件white_ripple.xml 適配5.0以下機型.不然會崩潰的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 沒有焦點時的背景顏色 -->
    <item android:drawable="@color/white" android:state_window_focused="false" />
    <!-- 非觸摸模式下獲得焦點並單擊時的背景顏色 -->
    <item android:drawable="@color/ripple" android:state_focused="true" android:state_pressed="true" />
    <!-- 觸摸模式下單擊時的背景顏色 -->
    <item android:drawable="@color/ripple" android:state_focused="false" android:state_pressed="true" />
    <!-- 選中時的背景顏色 -->
    <item android:drawable="@color/ripple" android:state_selected="true" />
    <!-- 獲得焦點時的背景  顏色 -->
    <item android:drawable="@color/ripple" android:state_focused="true" />
</selector>

另:5.0以下沒有水波紋效果.就是點擊變色效果

4.自定義selector圓角效果

在res裏創建drawable-v21文件 button_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorAccent">
    <item>
        <shape>
            <!-- 中間的背景色 -->
            <solid android:color="@color/colorPrimaryDark"/>
            <!-- 設置四個角的角度 -->
            <corners android:radius="4dp"/>
        </shape>
    </item>

</ripple>

同樣需要在drawable文件裏創建同名文件button_ripple.xml 適配5.0以下機型.

參考資料:http://blog.csdn.net/u012702547/article/details/52325418
就這樣吧 有興趣的可以去看看 還有圖形的點擊變換效果

DEMO下載地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章