問題現象
繪製 9-patch 時在左、上各畫了兩條黑線，編譯報錯：ERROR: 9-patch image ... malformed。AS 要求「可拉伸區域必須是單一連續區塊」。
9-patch 核心規則
- 左/上邊：定義 可拉伸區域（黑線），必須連續、不可斷開
- 右/下邊：定義 內容顯示區域（粉線），同樣需連續
- 四角：必須留白（透明），不可畫線
錯誤示範 vs 正確示範
| 錯誤做法 | 正確做法 |
|---|
| 左邊畫兩段分離的黑線 | 左邊畫一條連續黑線，覆蓋所有需拉伸的行 |
| 上邊畫兩段分離的黑線 | 上邊畫一條連續黑線，覆蓋所有需拉伸的列 |
| 四角像素著色 | 四角保持透明 |
實操步驟（用 Android Studio 內建編輯器）
- 右鍵
.9.png → Edit 9-patch
- 縮放至像素級，用鉛筆工具在 最左側 1px 欄 畫連續黑線（垂直拉伸區）
- 在 最上側 1px 行 畫連續黑線（水平拉伸區）
- 若需限制內容區域，在 最右側/下側 1px 畫粉線（Shift+點擊）
- 預覽面板即時查看拉伸效果，調整至滿意
- 保存，Gradle 自動編譯驗證
常見誤區
- ❌ 以為「多條線 = 多個拉伸區」 → 事實上會導致解析失敗
- ❌ 用系統畫圖工具修改 → 易破壞 PNG 索引色，致編譯錯誤
- ❌ 忽略右/下邊內容區 → 文字/圖標可能跑到邊框外
總結
9-patch 的本質是「單一連續拉伸區 + 單一連續內容區」。只要遵循 左/上連續黑線、右/下連續粉線、四角透明，配合 AS 內建編輯器所見即所得，即可避開所有編譯錯誤。複雜形狀建議改用 VectorDrawable 或 ShapeAppearanceModel 實現。
