建立可調整大小的點陣圖 (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 圖像上按一下滑鼠右鍵,然後按一下「Create 9-patch File」(建立 9-patch 檔案)
  2. 輸入 NinePatch 圖像的檔案名稱,然後按一下「OK」(確定)。圖像將會以 .9.png 副檔名建立。
  3. 按兩下新的 NinePatch 檔案,以便用 Android Studio 開啟。系統會開啟工作區。

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

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

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

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

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

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

選用控制項包括:

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