iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Mobile Development

Android 開發經驗三十天系列 第 4

[Android經驗三十天]Day4-水波紋Button 一 Ripple

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>
  1. 實作一個有水波感的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


上一篇
[Android開發經驗三十天]Day3一用Drawable相關知識自定義ProgressBar!
下一篇
[Android經驗三十天]Day5一Java RecycleView Adapter!
系列文
Android 開發經驗三十天30

1 則留言

0
東尼
iT邦新手 4 級 ‧ 2020-12-09 22:09:26

因為SDK 21(包含)以上才有支援水波紋,所以app若有支援SDK 21以下的裝置,建議新增額外的folder放SDK 21以上的resource,21以下使用selector
像是drawable/bg_item.xml ->
...
drawable-v21/bg_item.xml ->
...

yes,謝謝您的補充 /images/emoticon/emoticon12.gif

我要留言

立即登入留言