制作 `.9.png` 九宮格圖片,預覽顯示可左右拉伸,但實際用在控件上只能上下拉伸。
常見原因
- 控件寬度固定:`layout_width` 設為具體 `dp` 或 `wrap_content` 但內容撐不開,導致無剩餘空間供水平拉伸。
- 父容器寬度受限:父布局(如 `LinearLayout`、`ConstraintLayout`)寬度固定或被其他佔滿。
- .9 圖標記區域錯誤:右邊和下邊的拉伸標記(黑線)未正確劃在可拉伸區域。
排查步驟
- 確認 `.9.png` 右側、底側黑線標記覆蓋了預期可拉伸的像素區域。
- 將控件 `layout_width="0dp"` + `layout_weight="1"`(LinearLayout)或 `match_constraint`(ConstraintLayout),強制佔滿可用寬度。
- 父容器設置 `match_parent` 或具體寬度,確保有剩餘空間。
- 在 Layout Inspector / Android Studio Layout Inspector 實時查看控件實際測量寬高。
正確 .9 圖標記示例
左邊:內容區域標記(上邊緣黑線)
上邊:內容區域標記(左邊緣黑線)
右邊:水平拉伸區域標記(右邊緣黑線,可多段)
下邊:垂直拉伸區域標記(底邊緣黑線,可多段)
代碼示例
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/my_nine_patch"
android:scaleType="fitXY" />
總結
.9 圖本身無問題時,檢查控件與父容器的佈局約束,確保控件有機會在水平方向獲得額外空間觸發拉伸。