前言：切圖是設計還原的最後一公里，也是設計與開發的契約

用戶看到的界面，不是設計稿，而是切圖經代碼渲染的結果。Android 碎片化嚴重，「點九圖」成為適配多種分辨率的利器。本文從開發視角逆向驗證切圖邏輯，分享三大實戰心法：站在開發角度切圖、選擇優優切圖方案、極致壓縮資源體積。

一、 深度解析「點九圖」：不只是拉伸，是精準的「內容排版區域」控制

什麼是 .9.png？ Android 專有格式，通過邊緣 1px 黑線定義可拉伸區域（橫向/縱向）與內容顯示區域（padding box），保持圓角、漸變、投影不變形。

避坑實戰：為什麼開發設定垂直居中，文字卻偏下？

根因：設計師畫 .9 時，將投影高度納入了內容顯示區域（padding box）。開發用 gravity=center 讓文字在 padding box 垂直居中，視覺上自然偏下。

正確畫法：

1. 高度不拉伸時，在空白區域點 1px：約定俗成標記「此高度不拉伸」，即使被拉伸也只拉伸空白區，視覺無影響。
2. 內容顯示區域（padding box）必須避開投影區域：確保文字視覺居中。開發無需寫偏移代碼，代碼更乾淨，性能更優。

二、 打破固有思維：為異形浮層找到最優切圖方案

失敗嘗試：上下拼接法

下方矩形做 .9，上方三角形單獨切圖拼接。致命傷：投影重疊導致拼接處出現明顯分界線。

破局方案：左右分割雙 .9 圖

左右各一個 .9 圖，三角尖端包含在左/右圖中。
優勢：連接處無投影疊加、三角指向位置靈活可控、單圖獨立拉伸不互相影響。
關鍵動作：方案確定後，必須與開發溝通實現成本，雙贏才能落地。最終效果與設計稿零差別。

三、 資源極致瘦身：為安裝包做減法

1. .9 圖拉伸 1px 與 10px 效果無差：將可拉伸區域壓縮至最小（如 1px 寬/高），源文件體積驟降。
2. 紋理平鋪找規律，用最小切圖：
   • 輸入法信紙背景：不同紋理找最小重複單元，切圖尺寸各異但均極小。
   
   • 帶紋理按鈕：三段式切法——保留左右圓角，中間提取最小可平鋪紋理單元（如斜線紋理僅需 3px 寬），確保無縫拼接。
   
3. 適當壓縮色深：單色/無漸變/無透明層次豐富的圖，存為 PNG-8 或索引模式，體積再減 50%+。

結語：好切圖，是設計師給開發最好的禮物

精準的 padding box 讓文字無需微調代碼就居中；巧妙的分割讓異形浮層完美還原；極致的壓縮讓安裝包更輕、啟動更快。切圖不是體力活，是理解渲染管線、預判開發實現、為產品性能負責的腦力活。 讓設計與開發成為最默契的拍檔，從這張 .9.png 開始。