NinePatch是一種很有用的PNG圖片格式，它可以在特定區(qū)域隨文字大小進(jìn)行縮放。如下：

從上圖可以看到，背景圖片的中間區(qū)域會隨著文字的大小進(jìn)行縮放。背景圖片是一張NinePatch圖片。?NinePatch圖片可以使用android自帶的draw9patch工具來制作，該工具在SDK安裝路徑的tools目錄下。執(zhí)行該工具，然后點(diǎn)擊“File”->“open?9-path”打開一張用于制作NinePatch圖片的原來圖片。在畫布的上方和左方的邊上畫線指定縮放區(qū)域，

勾選“Show?patches”可顯示畫定的區(qū)域，綠色

為固定大小區(qū)域，紅色為縮放區(qū)域，文字會擺放在紅色

區(qū)域。制作完后，點(diǎn)擊“File”??“save?9-path”保存

圖片，draw9patch工具會自動為圖片加上*.9.png后綴。

把制作好的圖片拷貝進(jìn)項目的res/drawable目錄，然后

編寫代碼。如下：

2：使用

傳 統(tǒng)UI開發(fā)中，如果背景的大小不一樣，一般需要為每種大小都 制作一張圖片，這在button中尤為明顯。當(dāng)然我們也可以一小塊一小塊水平重復(fù)的畫，也可 以垂直的話。在android中專門有一種叫nine patch圖片（以 9.png結(jié)尾）來解決背景大小不一樣時，只用一張背景圖片。

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

把編輯后的png保存為 9.png到工程目錄的res/drawable目錄下，如果你的9.png中沒有黑線，那么eclipse是會報錯的。

效 果圖如下。從中我們也可以理解為什么叫 nine patch，相當(dāng)于把一張png圖分成了9個部分，分別為4個角，4條邊，以及一個中間區(qū)域，4個角是不做拉升的，所以還能一直保持圓角的狀態(tài)，而2條水 平邊和垂直邊分別只做水平和垂直拉伸，所以不會出現(xiàn)邊會被拉粗的情況，只有中間用黑線指定的區(qū)域做拉伸。結(jié)果是圖片不會走樣

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

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

NinePatch是很有用的圖片格式，可做為widget的「背景圖」。如圖１的範(fàn)例，其應(yīng)用程式的設(shè)計如下：

文字部份使用TextView元件

使用TextView的XML attribute來設(shè)定文字大小

使用TextView的XML attribute來設(shè)定一張背景圖

使用NinePatch圖片做為背景圖，如此一來背景圖就可以隨著文字大小縮放

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

Step 1. 準(zhǔn)備一張原始的PNG圖檔，如圖2。

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

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

圖3: Android SDK提供的draw9patch工具（點(diǎn)擊看原圖）

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

圖4: 開始編輯圖檔（點(diǎn)擊看原圖）

如何編輯NinePatch圖檔

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

圖5: 定義延展區(qū)

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

1. 綠色區(qū)域是固定大小區(qū)域

2. 粉紅色區(qū)域是可延展區(qū)域、文字?jǐn)[放於此

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

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

圖6: 調(diào)整比例

Step 7: 畫黑線

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

勾選「Show patches」選項，即可顯示粉紅色區(qū)域，如圖7。

圖7: 即時顯示可延展區(qū)

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

Step 8: 完成NinePatch圖檔

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

開始寫程式: HelloNinePatch

範(fàn)例HelloNinePatch的實(shí)作方式如下。

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

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

圖1: 將arrow.9.png放進(jìn)res/drawable資料夾

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

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="small world"

android:textSize="12sp"

android:background="@drawable/arrow"

/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="big world"

android:textSize="24sp"

android:background="@drawable/arrow"

/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="super world"

android:textSize="48sp"

android:background="@drawable/arrow"

/>

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

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

Step 4: 完成HellNinePatch

程式碼不需要做任何修改，直接執(zhí)行HelloNinePatch專案即可

再補(bǔ)充下！

1.什么是“9妹”(9patch)？

它是一個對png圖片做處理的一個工具，能夠為我們生成一個"*.9.png"的圖片;

2.何為"*.9.png"?

所謂"*.9.png"這是Android os里所支持的一種特殊的圖片格式,用它可以實(shí)現(xiàn)部分拉伸；這種圖片是經(jīng)過”9妹“進(jìn)行特殊處理過的，如果不處理的話，直接用PNG圖就會有失真，拉伸不正常的現(xiàn)象出現(xiàn)。

3.它的用途是？

說到用途，這種特殊格式的png圖，我也看了網(wǎng)上的相關(guān)文章但都是用一個能自適應(yīng)的button舉例子！(如下圖)清一色抄襲.. - -、

(此實(shí)例咱們直接無視掉，在后面我會給大家灌輸游戲中實(shí)例)

這個例子是指當(dāng)button上的字體大小改變，那么文字底下的png圖也會自動適應(yīng)文字。

這似乎表明做Android 軟件應(yīng)用 使用一些組件的的時候會時常用到；

4.那么實(shí)際在游戲中到底如何使用呢？什么情況下去使用呢？

....當(dāng)然啦，身為做游戲我一定要”9妹“利用在咱們游戲中才行，不然豈不是白研究了、經(jīng)過思考突然想到了一些情況，并且發(fā)現(xiàn)“9妹”確實(shí)在游戲開發(fā)中占有一定的分量！下面我們來先熟習(xí)“9妹”工具，然后再跟大家舉例，貼圖來說明其用途、畢竟有圖有真相 呵呵~

啟動9妹：

在你Android SDK 路徑下 X:\android sdk\tools ,你會找到一個 【draw9patch.bat】,沒錯這就是9妹啦、官方名 NinePatch ；

提示導(dǎo)入一張png圖片，然后真正進(jìn)入"9妹"的操作界面（如下圖）：???? （圖1）

序 列 ① ：在拉伸區(qū)域周圍用紅色邊框顯示可能會對拉伸后的圖片產(chǎn)生變形的區(qū)域，如果完全消除該內(nèi)容則圖片拉伸后是沒有變形的，也就是 說，?????????????? 不管如何縮放圖片顯示都是良 好的。 （實(shí)際試 發(fā)現(xiàn)NinePatch編輯器是根據(jù)圖片的顏色值來區(qū)分是否為bad patch的，一邊來說只?????????????? 要色差不是太大不用考慮這個設(shè)置。）

序列 ② ：區(qū)域是導(dǎo)入的圖片，以及可操作區(qū)域。

序 列 ③ ：這里 zoom：的長條bar 是對導(dǎo)入的圖放大縮小操作，這里的放大縮小只是為了讓使用者更方便操作，畢竟是對像素點(diǎn)操作比較費(fèi)?????????????????? 眼，下面的 patch scale 是序列 ④區(qū)域中的三種形態(tài)的拉伸后的一個預(yù)覽操作，可以看到操作后的圖片拉伸后的效果。

序列 ④： 區(qū)域這里從上到下，依次為：縱向拉伸的效果預(yù)覽、橫向拉伸的效果預(yù)覽，以及整體拉伸的效果預(yù)覽

序列 ⑤： 這里如果你勾選上，那么當(dāng)你鼠標(biāo)放在 ② 區(qū)域內(nèi)的時候并且當(dāng)前位置為不可操作區(qū)域就會出現(xiàn)lock的一張圖,就是顯示不可編輯區(qū)域 ;

序列 ⑥： 這里勾選上，那么在④ 區(qū)域中你就會看到當(dāng)前操作的像素點(diǎn)在拉伸預(yù)覽圖中的相對位置和效果。

序列 ⑦： 在編輯區(qū)域顯示圖片拉伸的區(qū)域;

如何操作：

鼠標(biāo)左鍵選取需要拉伸的像素點(diǎn)；? shift+鼠標(biāo)左鍵取消當(dāng)前像素點(diǎn)。

操作區(qū)域：

大家看到導(dǎo)入的png圖片默認(rèn)周圍多了一像素點(diǎn)，也就是這一圈一像素點(diǎn)就是咱們的可操作區(qū)域。但是因為下方和右方可操作區(qū)域?qū)儆诳蛇x區(qū)域，不用理會；主要大家注意Left 和 top 操作區(qū)域；

Top操作區(qū)域的一排像素點(diǎn)，表示橫向拉伸的像素點(diǎn)；

Left操作區(qū)的一排像素點(diǎn)，表示縱向拉伸的像素點(diǎn)；