建立可調整大小的點陣圖 (9-Patch 檔案)

9-patch 繪製工具是 Android Studio 內附的所見即所得編輯工具, 可用來建立點陣圖圖像,並可自動依照檢視畫面內容及螢幕尺寸 調整大小。指定的圖像部分將可根據圖片內繪製的指標 進行橫向或直向縮放。

NinePatch 圖像介紹及運作方式請參閱 《Canvas and Drawables》文件內的 「NinePatch Drawables」 該節內文。

圖 1.Android Studio 9-patch 繪製工具 內的 NinePatch 圖像。

此篇文章可以快速為您介紹如何使用 Android Studio 9-patch 繪製工具 建立 NinePatch 圖像。您需要準備欲用來建立 NinePatch 圖像的 PNG 圖像。

  1. 在 Android Studio 內,在您想 建立 NinePatch 圖像的 PNG 圖像上按一下滑鼠右鍵,然後按一下 「建立 9-patch 檔案」。
  2. 輸入 NinePatch 圖像的檔案名稱,然後按一下「確定」。圖像 將會以 .9.png 副檔名建立。
  3. 按兩下新的 NinePatch 檔案,以便用 Android Studio 開啟。系統會開啟工作區。

    左側窗格為繪圖區,您可以在此編輯 可延展小塊和內容區域的線條。右側窗格為預覽區, 您可以在此預覽圖像延展結果。

  4. 在 1 像素周長內部按一下,以便繪製可延展 小塊及 (非必要) 內容區域的定義線。按一下滑鼠右鍵 (如果是 Mac,您也可以按住 Shift 並按一下),即可清除先前繪製的線條。
  5. 完成後,按一下「檔案」>「儲存」即可儲存變更內容。

在 Android Studio 按兩下檔案,即可開啟現有的 NinePatch 檔案。

如果想確保 NinePatch 圖像能夠正確縮小, 請確定所有可延展區域大小都至少有 2x2 像素,否則這些區域縮小後可能會就此消失。另外,在圖像可延展區域前後另外保留 1 像素的 安全空間有助於避免在縮放時進行插補, 防止邊界色彩遭到改變。

注意:系統將會載入普通的 PNG 檔案 (*.png), 並在圖像四周加入空白的 1 像素邊界, 您可以在此繪製可延展的小塊及內容區域。若是先前儲存的 NinePatch 檔案 (*.9.png),則系統會照樣載入,不會加入繪製區域,因為圖像內已經有此內容。

圖 2. 顯示內容、小塊和不佳小塊 的 NinePatch 圖像。

選用控制項包括:

  • 縮放:調整繪圖區的圖像縮放等級。
  • 小塊縮放:調整預覽區內的圖像縮放比例。
  • 顯示鎖定:顯示滑鼠懸停圖像中不可繪圖的區域。
  • 顯示小塊:在繪圖區預覽可延展小塊 (粉紅色代表可延展小塊), 如上圖 2. 所示。
  • 顯示內容:在預覽圖像中醒目顯示內容區域 (紫色代表可使用內容的區域), 如上圖 2. 所示。
  • 顯示不佳小塊:在延展時可能產生不自然痕跡的小塊區域周遭加入紅色邊框, 如上圖 2. 所示。清除所有不佳小塊,以便維持 圖像延展後的視覺一致性。