Jollen 的 Android 教學,#30: R.drawable 應用-製作NinePatch圖檔

jollen 發表於 August 22, 2009 11:05 PM

什麼是NinePatch圖檔

NinePatch是一種「可延展」的PNG圖檔。NinePatch圖檔的用途是製作「可隨文字大小縮放」的圖片,如圖1。

ninepatch-1.png
圖1: 文字背景可隨著文字大小縮放

NinePatch是很有用的圖片格式,可做為widget的「背景圖」。如圖1的範例,其應用程式的設計如下:

  • 文字部份使用TextView元件
  • 使用TextView的XML attribute來設定文字大小
  • 使用TextView的XML attribute來設定一張背景圖
  • 使用NinePatch圖片做為背景圖,如此一來背景圖就可以隨著文字大小縮放

首先,第一個工作就是「製作NinePatch圖檔」,方式如下。

Step 1. 準備一張原始的PNG圖檔,如圖2。

ninepatch-2.png
圖2: 原始PNG圖檔(arrow.png)

Step 2. 啟動Android提供的draw9patch工具,直接執行Android SDK tools/目錄下的draw9patch執行檔即可,如圖3。

ninepatch-3.png
圖3: Android SDK提供的draw9patch工具(點擊看原圖)

Step 3. 開啟原始PNG圖檔,編輯圖檔,如圖4。

ninepatch-4.png
圖4: 開始編輯圖檔(點擊看原圖)

如何編輯NinePatch圖檔

NinePatch圖檔的製作方式是「繪製二條線」,分別在原始圖檔的上方與左方繪出二條「黑線」,黑線所交集的區域即為「可延展」區域。如下圖的粉紅色區域。

ninepatch-5.png
圖5: 定義延展區

「可延展區」是Android框架用來擺放文字的區域,換句話說,文字(TextView)只會被放置在粉紅色區域,並且擺放的原則是「對準粉紅區域的中心點」,即上下置中、左右也置中。非「可延展區」,即綠色部份,並不會隨著文字的大小縮放延展。所以:

1. 綠色區域是固定大小區域
2. 粉紅色區域是可延展區域、文字擺放於此

圖中的「二條黑線」是怎麼畫出來的呢?方式如下。

Step 4. 移動「Zoom」調整圖檔比例,讓「斑馬線」的大小能適中,如圖6。

ninepatch-6.png
圖6: 調整比例

Step 7: 畫黑線

斑馬線是用來畫黑線的區域,怎麼畫黑線呢?用滑鼠點斑馬線就可以了。要怎麼刪除黑線上?按住「Shift」再點斑馬線即可。斑馬線很不好點,所以如果不是要特意訓練操作滑鼠的技巧以及考驗眼力,善用「Zoom」功能可以幫助黑線的繪製。

勾選「Show patches」選項,即可顯示粉紅色區域,如圖7。

ninepatch-7.png
圖7: 即時顯示可延展區

在draw9patch的右邊也會有縮放的展示圖。

Step 8: 完成NinePatch圖檔

儲存完成的NinePatch圖檔,draw9patch會自動將圖檔的副檔名儲存為*.9.png。完成NinePatch圖檔後,就可以開始寫程式了。

* Update: 2009/9/20 - Android擺放文字於NinePatch圖檔上的原則「並非對準粉紅區域的中心點」,已刪除此句。

Jollen's Blog 使用 Github issues 與讀者交流討論。請點擊上方的文章專屬 issue,或 open a new issue

您可透過電子郵件 jollen@jollen.org,或是 Linkedin 與我連絡。更歡迎使用微信,請搜尋 WeChat ID:jollentw