Android ImageButton 背景圖片變形與重疊：ScaleType 與 Selector 正確配置

問題現象

`GridView` 中 `ImageButton` 使用 `android:src="@drawable/on"` (因 `background` 會拉伸變形)。點擊後圖片**重疊、變形**，狀態切換異常。

核心原因分析

1. `src` vs `background` 差異：
   • `android:src`：內容圖片，**受 `scaleType` 控制** (預設 `fitCenter` 保持比例)。
   • `android:background`：背景圖片，**預設拉伸填滿** (`scaleType` 無效)，導致變形。
2. Selector 狀態定義錯誤/重複：提供的 `voice.xml`、`voice_press.xml` 中 `state_pressed="true"` 定義了兩次，最後一項 `android:drawable="@drawable/voice_on_unpress"` 為預設狀態，**順序錯誤導致狀態匹配異常**。
3. ImageButton 原始圖片 + Selector 背景衝突**：同時設 `src` (靜態圖) 和 `background` (selector 狀態圖)，兩層疊加產生「重疊」視覺。

正確解決方案

1. 統一用 Background + Selector (推薦)

**棄用 `src`，改用 `background` 搭配 `scaleType` 無效的問題，用 9-patch (.9.png) 或 XML `inset` 解決拉伸**。

Selector 正確寫法 (res/drawable/btn_selector.xml)

<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <!-- 按下狀態 -->
    <item android:state_pressed="true" android:drawable="@drawable/voice_on_do" />
    <!-- 聚焦狀態 (鍵盤/手柄導航) -->
    <item android:state_focused="true" android:drawable="@drawable/voice_on_do" />
    <!-- 正常狀態 -->
    <item android:drawable="@drawable/voice_on_unpress" />
</selector>

**順序原則**：具體狀態在前，通用預設狀態在後 (無任何 `state_*` 屬性)。

佈局 XML

<ImageButton
    android:id="@+id/search_voice"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_selector"
    android:scaleType="centerInside" />
    <!-- scaleType 對 background 無效，見下文 -->

2. 解決 Background 拉伸變形：九宮格圖片

**根治 `background` 拉伸變形的唯一標準方法是 .9.png (NinePatch)。**

1. 用 Android Studio `Draw 9-patch` 工具或 `aapt` 編譯，在圖片四周 1px 邊框標記可伸縮區域 (黑線) 與內容區域 (紅線)。
2. 命名為 `voice_on_unpress.9.png`、`voice_on_do.9.png`。
3. Selector 引用這兩個 .9.png，`background` 即可**智能拉伸不變形**，`scaleType` 屬性可忽略。

3. 替代方案：ImageView + OnClickListener (不需按鈕狀態)

若不需要按下視覺反饋，直接用 `ImageView` + `setOnClickListener`，`src` + `scaleType="centerInside"` 完美保持比例，最簡單。

4. Java 代碼簡化

searchVoice.setOnClickListener(v -> {
    flag = !flag;
    // 狀態由 Selector 自動管理，無需手動 setBackgroundResource
    Toast.makeText(this, flag ? "語音開啟" : "語音屏蔽", Toast.LENGTH_SHORT).show();
    // 若需程式碼切換狀態：v.setPressed(flag); 或 v.setSelected(flag);
});

結論

**ImageButton 圖片變形/重疊核心在於 `background` 拉伸與 Selector 定義錯誤。** 標準解法：**正確編寫 Selector (狀態順序、無重複) + 使用 .9.png 九宮格圖片解決背景拉伸**。若不需要按鈕狀態，改用 `ImageView` + `src` + `scaleType` 最省事。