什麼是 NinePatch 圖片

NinePatch 圖片是一種特殊的 PNG 圖片，允許 Android 系統根據內容自動調整圖片大小，而不會產生任何失真和拉伸。這讓開發人員可以建立可縮放的 UI 元素，如按鈕、進度條和背景圖片，而無需為不同的螢幕尺寸準備多組資源。

建立 NinePatch 圖片

Draw 9-patch 是 Android Studio 中用於建立和編輯 NinePatch 圖片的工具。它允許開發人員直觀地沿著邊框繪製黑色像素線，並預覽圖片在不同大小下的外觀。除了 Android Studio 提供的工具外，還有許多線上資源和應用程式可用於製作 NinePatch 圖片，例如 9 Patch Editor。

NinePatch 圖片的用途

在 Android 應用程式中使用 NinePatch 圖片很簡單：您將它們新增到專案的 res/drawable 資料夾中，然後在 XML 佈局檔案中使用 android:background 參考它們。例如：

<Button android:id="@+id/tiny"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:text="Tiny"
        android:textSize="8sp"
        android:background="@drawable/my_button_background"/>

<Button android:id="@+id/big"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="Biiiiiiig text!"
        android:textSize="30sp"
        android:background="@drawable/my_button_background"/>

請注意，layout_width 和 layout_height 應為 wrap_content，以便整齊地顯示帶有文字的按鈕。

以下顯示透過 XML 和 NinePatch 圖片呈現的兩個按鈕。如上圖所示，請觀察按鈕的寬度和高度如何隨著文字變化，而背景圖片會被拉伸以適應螢幕。

NinePatch 的應用場景

1. 按鈕背景： 這是 Drawable 最常見的應用案例。由於不同按鈕的文字長度可能不同，NinePatch 可確保背景圖片完全覆蓋，且不會超出邊界或因按鈕內部的文字位置而變形。例如，如果我們有一個圓角按鈕背景，我們會使用 NinePatch，無論按鈕文字的長度如何，圓角都會保持不變。

2. 進度條背景： 它會將背景圖片沿著進度條的固定單位距離拉伸，而單位距離會因系統而異，並隨著載入而變化。NinePatch 可確保背景圖片的樣式在拉伸時不會失真。

3. 列表項目的背景： 在列表視圖中，這些列表項目的背景實際上需要根據視圖中放置的內容長度而有所不同。NinePatch 可確保背景圖片在拉伸時不會失真，且外觀精美。

4. 對話框外框背景： 在這種情況下，對話框的大小會隨著內容而變化。NinePatch 可確保背景圖片以相同的樣式一致地拉伸。

5. 可縮放分隔線： 使用 NinePatch，使用者可以設計水平或垂直可拉伸的分隔線，以滿足多種螢幕尺寸和佈局適應性。

6. 使用者定義形狀背景： NinePatch 可以構建各種使用者定義形狀的背景，例如具有圓角、陰影等具有不同特殊效果的背景，並且在拉伸時不會對這些效果進行更改。

NinePatch 的優點

• 可擴展性： 這是 NinePatch 最大的優點。根據內容自動調整大小，從而無需為不同的螢幕尺寸和內容長度維護多組資源。
• 避免失真： 可拉伸區域的座標控制可防止圖片拉伸。在大多數情況下，可以保留清晰度和美觀的特性。
• 提高效率： 減少資源檔案，從而提高開發效率。
• 靈活的佈置： 它可以輕鬆建立不同形狀和大小的 UI 元素，以滿足各種佈局要求。

NinePatch 的運作方式

NinePatch 圖片的標誌是像素的完全窄邊框。該邊框定義了圖片的可擴展性和內容區域。在邊緣繪製黑色像素線表示哪個部分要在周邊拉伸，哪個部分垂直拉伸，哪個部分水平拉伸。

特別是，1 像素邊框分為四個部分：

1. 左邊框（垂直黑色像素線）：

• 功能： 控制圖片的垂直拉伸。左邊框上的垂直黑色像素線定義了圖片哪些區域可以垂直拉伸。

• 例如：

  • 沒有黑色像素線： 圖片的高度是固定的；因此，它無法垂直拉伸。如果嘗試將其放入比圖片本身高的容器中，它將保持原狀，並且可能會出現空白區域或被裁剪。

  • 一條黑色像素線： 圖片可以垂直拉伸，但僅限於黑色像素線指定的區域。例如，如果一條黑色像素線放置在左邊框的中間，則表示上半部分和下半部分不會改變，只允許在中間部分進行垂直拉伸。

  • 多條黑色像素線： 可以透過多個垂直拉伸區域定義。例如，左邊框會有兩條黑色像素線，將圖片分成三個部分，中間是可拉伸的部分，頂部和底部部分保持不變。

2. 上邊框：（水平黑色像素線）：

• 功能： 控制圖片的水平拉伸。上邊框上的水平黑色像素線定義了圖片在水平尺寸上可拉伸的部分。

• 例如：

  • 沒有黑色像素線： 圖片寬度是固定的，不會水平拉伸。與左邊框沒有黑色像素線的情況類似，圖片將保持原狀，但可能會出現空白區域或被裁剪。

  • 一條黑色像素線： 圖片可以水平拉伸，但同樣僅限於黑色像素線指定的區域。例如，如果黑色像素線位於上邊界的中心，則圖片的左半部分不會改變，右半部分也不會改變，僅允許在中間進行拉伸。

  • 多條黑色像素線： 它定義了各種橫向可拉伸區域。就像左邊框有多條水平黑色像素線的情況一樣，它將圖片分成多個部分，並且任何標記的部分都可以在水平方向上拉伸。

3. 右邊框（垂直黑色像素線）：

• 功能： 定義內容區域的右邊距。右邊距上的垂直黑色像素線表示圖片內容區域的右邊界。在拉伸期間，內容區域的右側將保持在這個邊界上。

• 範例：

  • 沒有黑色像素線： 內容區域會延伸到圖片的右邊距，當內容拉伸時不會彎曲，導致圖片內容延伸到右邊緣。

  • 一條黑色像素線： 內容區域的右邊緣由黑色像素線的位置決定。在拉伸時，內容區域的右側將保持在黑色像素線的位置，而右側的空間將被拉伸。

4. 底邊界（水平黑色像素線）：

• 功能： 定義內容被限制的區域的下邊距。底部的水平黑色像素線定義了圖片內容區域的下邊界結束的位置。拉伸時，內容區域的底部會保持在該邊界上。

• 範例：

  • 沒有黑色像素線：內容區域會延伸到圖片的底部邊緣。在拉伸時，整個圖片內容會拉伸到底部邊緣。

  • 一條黑色像素線：內容區域的下邊界來自黑色像素線的位置。在拉伸時，內容區域的底部將保持在黑色像素線的水平，下方的空白區域將被拉伸。

透過在四個邊框上巧妙地使用黑色像素線，程式設計師可以精確地控制 Nine Patch 圖片在不同大小下的顯示方式，同時確保它不會變形或遺失內容區域。請記住，這些像素線是可拉伸區域從內容區域的定義邊界，而不是圖片的實際邊界。沒有黑色像素線的部分是固定大小的元件。

注意事項

• NinePatch 圖片應以 .9.png 結尾的檔案名稱儲存。
• 可拉伸區域的最小尺寸為 2x2 像素，這樣圖片在縮放時才不會消失。
• 在可拉伸區域的邊緣增加額外的安全空間可以消除縮放時發生的顏色變化。
• 請務必徹底檢查圖片的可拉伸區域和內容區域，以便圖片在各種尺寸下都能正確顯示。
• 不要過度使用 NinePatch 圖片，尤其是在動畫介面或經常變更的介面中，因為它們會降低效能。

總結

NinePatch 圖片是利用 UI 設計效率和改善 Android 應用程式使用者體驗的最強大工具。然而，這並不意味著開發人員不必權衡優點和缺點，因為圖片類型的選擇取決於需求。例如，即使 NinePatch 圖片是可擴展背景或需要接受不同長度文字的 UI 元素的正確選擇，普通的 PNG 圖片對於靜態背景圖片來說也很好 - 它們的簡單性是關鍵。在使用 NinePatch 時，必須格外小心設計和測試，以確保它在各種裝置和螢幕尺寸上都能表現出色。