【Kotlin】以資源檔自定向量圖 ImageButton(View) 外觀

參考資料 ----

可繪製資源

顏色狀態清單資源

Android - Selector in vector drawables

覺得以程式控制 ImageButton 的各種狀態(按下按鈕、disabled...) 時的外觀很麻煩，可以透過設定資源檔的方式達到目的。

由於 ImageButton 繼承自 View，原則上，本筆記的做法可以套用 View(含) 的其他子類別。

 

app 層級 build.gradle(若您的程式沒有用到視圖綁定，這部份可忽略)

 
...
...
 
android {
    
    ...
    ...
    
    buildFeatures {
        viewBinding true
    }
    
    ...
    ...
 

色表 /values/color.xml

 
<?xml version="1.0" encoding="utf-8"?>
<resources>

    ...
    ...
	
    <color name="blue">#0000FF</color>
    <color name="red">#ffff0000</color>
    <color name="brown">#8B4513</color>
    <color name="gray">#ff888888</color>
    <color name="green">#ff00ff00</color>
    <color name="yellow">#FFFF00</color>
	
    ...
    ...
</resources>
 

分別建立 前景(向量圖) 和 背景 在各種狀態時的顏色的資源檔，並置於 /res/color/ 下

要注意：Android 套用資源檔的原則是以最低限度符合條件就採用，所以預設值要放在最後順位

前景 /res/color/image_state.xml，預設一般狀態是 藍色，按下按鈕時是 棕色，disabled 時是 灰色

 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:color="@color/brown" />
    <item android:state_enabled="false"
        android:color="@color/gray" />
    <item android:color="@color/blue" />    ← 預設值要放在最後順位
</selector>
 

背景 /res/color/back_state.xml，無預設值(所以跟 app 的 Theme 設定相同)，按下按鈕時是 黃色，disabled 時是 綠色

 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:color="@color/yellow" />
    <item android:state_enabled="false"
        android:color="@color/green" />
</selector> 

隨手找了個向量圖檔 /res/drawable/hand.xml，tint 屬性指向 image_state.xml

(tint 有著色的意思)

 
<vector
    android:height="48dp"
    android:width="48dp"
    android:tint="@color/image_state"    ← 這裡指向 前景 image_state.xml
    android:viewportHeight="24"
    android:viewportWidth="24"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M13,24c-3.26,0 -6.19,-1.99 -7.4,-5.02l-3.03,-7.61C2.26,10.58 3,9.79 3.81,10.05l0.79,0.26c0.56,0.18 1.02,0.61 1.24,1.16L7.25,15H8V3.25C8,2.56 8.56,2 9.25,2s1.25,0.56 1.25,1.25V12h1V1.25C11.5,0.56 12.06,0 12.75,0S14,0.56 14,1.25V12h1V2.75c0,-0.69 0.56,-1.25 1.25,-1.25c0.69,0 1.25,0.56 1.25,1.25V12h1V5.75c0,-0.69 0.56,-1.25 1.25,-1.25S21,5.06 21,5.75V16C21,20.42 17.42,24 13,24z"/>
</vector>
 

activity_main.xml，ImageButton 的 backgroundTint 屬性指向 back_state.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:onClick="onButton1Clicked"/>

    <ImageButton
        android:id="@+id/Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:srcCompat="@drawable/hand"
        android:backgroundTint="@color/back_state"    ← 這裡指向 背景 back_state.xml
        android:clickable="true" />

</RelativeLayout>
 

MainActivity.kt (程式沒什麼功能，只是觀察 Button2 在 enabled / disabled 時的變化)

 

...
...

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
    }

    fun onButton1Clicked(vv: View) {
        binding.Button2.isEnabled = !binding.Button2.isEnabled
    }
}
 

相關筆記 ----

【Android】設計自己的按鈕外觀

【Kotlin】視圖綁定 ViewBinding