Android開發中的NinePatch圖檔

傳統UI開發中，若是背景的大小不同，通常須要爲每種大小都製做一張圖片，這在button中尤其明顯。固然咱們也能夠一小塊一小塊水平重複的畫，也可以垂直的話。在android中專門有一種叫nine patch圖片（以 9.png結尾）來解決背景大小不同時，只用一張背景圖片。android

用自帶的tools\draw9patch.bat 打開一張png圖片，咱們能夠在png圖片最外面的空格畫一個像素寬的黑線。左邊是編輯區，在左邊的圖中，左邊黑線的高度決定了垂直拉昇時的擴展區域，也即當垂直拉伸時，只有這個區域的圖片會被拉伸。同理圖片上邊的黑線長度決定了水平拉昇時的擴展區域。右邊區域是拉昇的效果圖，從上之下分別爲垂直拉伸，水平拉伸，以及兩個方向的拉昇。該工具提供了所見即所得的nine patch png編輯方式。框架

把編輯後的png保存爲 9.png到工程目錄的res/drawable目錄下，若是你的9.png中沒有黑線，那麼eclipse是會報錯的。eclipse

效果圖以下。從中咱們也能夠理解爲何叫 nine patch，至關於把一張png圖分紅了9個部分，分別爲4個角，4條邊，以及一箇中間區域，4個角是不作拉昇的，因此還能一直保持圓角的狀態，而2條水平邊和垂直邊分別只作水平和垂直拉伸，因此不會出現邊會被拉粗的狀況，只有中間用黑線指定的區域作拉伸。結果是圖片不會走樣工具

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

圖1: 文字背景可隨著文字大小縮放3d

NinePatch是頗有用的圖片格式，可作為widget的「背景圖」。如圖１的範例，其應用程式的設計以下：code

文字部份使用TextView元件
使用TextView的XML attribute來設定文字大小
使用TextView的XML attribute來設定一張背景圖
使用NinePatch圖片作為背景圖，如此一來背景圖就能夠隨著文字大小縮放

首先，第一個工做就是「製做NinePatch圖檔」，方式以下。xml

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

圖2: 原始PNG圖檔（arrow.png）圖片

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

圖3: Android SDK提供的draw9patch工具（點擊看原圖）

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

圖4: 開始編輯圖檔（點擊看原圖）

如何編輯NinePatch圖檔

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

圖5: 定義延展區

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

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

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

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

圖6: 調整比例

Step 7: 畫黑線

斑馬線是用來畫黑線的區域，怎麼畫黑線呢？用滑鼠點斑馬線就能夠了。要怎麼刪除黑線上？按住「Shift」再點斑馬線便可。斑馬線很很差點，因此若是不是要特地訓練操做滑鼠的技巧以及考驗眼力，善用「Zoom」功能能夠幫助黑線的繪製。

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

圖7: 即時顯示可延展區

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

Step 8: 完成NinePatch圖檔

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

開始寫程式: HelloNinePatch

範例HelloNinePatch的實做方式以下。

Step 1. 創建一個新的Android專案，命名為HelloNinePatch。

Step 2. 將arrow.9.png託曳(drag)到HelloNinePatch專案裡的「res/drawable」目錄下。如圖1。

圖1: 將arrow.9.png放進res/drawable資料夾

Step 3. 修改UI（res/layout/main.xml），設計出上一篇教學(#30)裡的圖2畫面。main.xml的內容以下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="small world"
    android:textSize="12sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="big world"
    android:textSize="24sp"
    android:background="@drawable/arrow"
    />
<Button
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="super world"
    android:textSize="48sp"
    android:background="@drawable/arrow"
    />
</LinearLayout>

這裡的作法是，在UI上擺放Button元件，並設定Button上的文字及大小。透過「android:background」屬性的設定，我們將Button的背景設定為「@drawable/arrow」，即「drawable資源（drawable/目錄下）裡的arrow圖檔」，Android框架會去找到arrow.9.png檔案。

因為arrow.9.png是一張NinePatch圖檔，所以會隨著Button上的文字大小延展。

Step 4: 完成HellNinePatch

程式碼不須要作任何修改，直接執行HelloNinePatch專案便可