自訂button樣式

 建立 them.xml <style>

將按鈕顏色設定到 android:background
backgroundTint 需設為 @null 顏色才會套用
textColor 自訂文字顏色
<style name="myNumberButton" parent="TextAppearance.AppCompat.Button">
    <item name="android:background">@drawable/bg_numder_button</item>
    <item name="backgroundTint">@null</item>
    <item name="android:textColor">@color/button_number_text</item>
</style>

drawable/bg_numder_button.xml

<state_pressed = true> 按下時顯示的樣式
<state_pressed = false> 沒按下時顯示的樣式 (平時)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_selected" android:state_pressed="true" />
    <item android:drawable="@drawable/button_normal" android:state_pressed="false" />
</selector>
drawable/button_normal.xml 平時的按鈕樣式
<layer-list>圖層 (做出陰影效果) 後寫的<item>會壓過前面的<item>
-> <item> left 圖層左邊距離上圖層左邊2dp, top同理
--> <shape> UI設定 默認為rectangle(矩形),還有oval(圓),line(線),ring(環形)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="30dp" />
            <solid android:color="#b4b5b6"/>
        </shape>
    </item>
    
    <item android:right="2dp" android:bottom="2dp">
        <shape>
            <corners android:radius="30dp" />
            <gradient
                android:angle="135"
                android:startColor="@color/white"
                android:centerColor="@color/teal_200"
                android:endColor="@color/white"
                android:type="linear"/>
        </shape>
    </item>
</layer-list>
drawable/button_selected.xml 點擊時的按鈕樣式
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="30dp" />
            <solid android:color="@color/button_selected" />
        </shape>
    </item>

</layer-list>
《常用的屬性整理》
solid
設置形狀填充的顏色，只有 android:color 一個屬性
➥android:color 填充的顏色
padding
設置內容與形狀邊界的內間距，可分別設置左右上下的距離
➥android:left 左內間距
➥android:right 右內間距
➥android:top 上內間距
➥android:bottom 下內間距
gradient
設置形狀的漸變顏色，可以是線性漸變、輻射漸變、掃描性漸變
➥android:type 漸變的類型
➥linear 線性漸變，默認的漸變類型
➥radial 放射漸變，設置該項時，android:gradientRadius 也必須設置
➥sweep 掃描性漸變
➥android:startColor 漸變開始的顏色
➥android:endColor 漸變結束的顏色
➥android:centerColor 漸變中間的顏色
➥android:angle 漸變的角度，線性漸變時才有效，必須是45的倍數，0表示從左到右，90表示從下到上
➥android:centerX 漸變中心的相對X坐標，放射漸變時才有效，在0.0到1.0之間，默認為0.5，表示在正中間
➥android:centerY 漸變中心的相對X坐標，放射漸變時才有效，在0.0到1.0之間，默認為0.5，表示在正中間
➥android:gradientRadius 漸變的半徑，只有漸變類型為radial時才使用
➥android:useLevel 如果為true，則可在LevelListDrawable中使用
corners
設置圓角，只適用於 rectangle 類型，可分別設置四個角不同半徑的圓角。
➥android:radius 圓角半徑，會被下面每個特定的圓角屬性重寫
➥android:topLeftRadius 左上角的半徑
➥android:topRightRadius 右上角的半徑
➥android:bottomLeftRadius 左下角的半徑
➥android:bottomRightRadius 右下角的半徑
stroke
設置描邊，可描成實線或虛線。
➥android:color 描邊的顏色
➥android:width 描邊的寬度
➥android:dashWidth 設置虛線時的橫線長度
➥android:dashGap 設置虛線時的橫線之間的距離
drawable/button_numder_text.xml 點擊時的按鈕樣式
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_pressed="true"/>
    <item android:color="@color/white"/>

</selector>
State列表
Android Object State描述
android:state_pressed物件被按下時
android:state_focused物件由軌跡球或D-pad選取時
android:state_hovered物件由指標覆蓋時
android:state_selected物件被選取時
android:state_checkable物件是checkable時(註1)
android:state_checked物件被點選時
android:state_enabled物件能夠接收touch/click event時
android:state_activated(API11以上)物件被持續選擇時
(例如highlight選上的list item)
android:state_window_focused當物件所屬的application在前景時
(註1) 只有當這個物件能在checkable和non-checkable之間切換時才有效

留言

張貼留言