tags: 鐵人賽

大家安安，今天來實作 水波紋button

Ripple

先在layout創兩個button

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple2"/>

1.先實作第一個按下去會跳出可愛的android圖像

小叮嚀: 有沒有隱藏(就是按下去才跳出來是看 有無 android:id="@android:id/mask" 屬性

如果有的話就是不隱藏

然後 因為ripple專注在 Api 21 以上的，所以如果minSdk小於 21
要加上 tools:targetApi="lollipop"
外面color屬性是該變換成甚麼顏色
item內可以放純color (可以shape) 也可以放background ! 因為我們要看到
android 圖像

如果把註解拿掉的話
就是他底層還有一個android drawable ，出來才是mask的drawable

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#af0c0e"
    tools:targetApi="lollipop">
<!--    android:id="@android:id/mask"-->
    <item
        android:id="@android:id/mask"
        android:drawable="@drawable/ic_android_k_24dp" />
<!--    android:id="@android:id/background"-->
<!--    <item-->
<!--        android:drawable="@drawable/ic_android_black_24dp" />-->
</ripple>

2. 實作一個有水波感的button

先創一個 drawable 命名為 ripple_effect
一樣要加上 target Api 跟 color
裡面item 放的是 mask 讓他有浮出的效果 shape是讓他是正方形 跟 有顏色(紅色)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#af0c0e"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#af0c0e" />
        </shape>
    </item>
</ripple>

然後在selector上加上剛剛創的drawable (因為我們是要在按下的時候調用，所以加在按下的那個上面就好了)，這樣疊加上去就可以使用囉!

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <color android:color="#673AB7"/></item>
    <item android:state_pressed="true"
        android:drawable="@drawable/ripple_effect"
        >
        <shape>
<!--            <corners android:radius="30dp"/>-->
            <solid android:color="#8BC34A"/>
        </shape>

    </item>
    <item android:state_focused="true"
        >
        <color android:color="@color/colorPrimaryDark"/>
    </item> <!-- focused -->
    <item android:state_hovered="true"
        >
        <color android:color="@color/colorPrimary"/></item>
    <item >
        <color android:color="#FFEB3B"/></item>



</selector>

3.如果要判斷有沒有sdk 21以上也可以用
有的話就進去有水波的layout，沒有的話進去預設的

if(Build.VERSION.SDK_INT >＝ Build.VERSION_CODES.LOLLIPOP)
    btn.setBackgroundResource(R.drawable.ripple_sample);
else
    btn.setBackgroundResource(android.R.drawable.btn_default);

參考連結:
https://stackoverflow.com/questions/34458482/ripple-effect-on-shape-drawable

https://jc7003.pixnet.net/blog/post/289955203-android-%E6%8C%89%E9%88%95%E6%B0%B4%E6%B3%A2%E7%B4%8B%28ripple%29%E5%8B%95%E7%95%AB%E6%95%88%E6%9E%9C