覺得以程式控制 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
}
}
相關筆記 ----
