android 9patch (講的很不錯,相當全面：轉)

下面是兩篇有參考性的文章！

 記著：我們來澄清一下這兩條不同的線，左邊跟頂部的線來定義哪些映像的像素允許在伸縮時被複製。
       底部與右邊的線用來定義一個相對位置內的映像，視圖的內容就放入其中。

關鍵學習ninepatch的用法、一些注意事項、以及如何在項目之中使用

 

 

1:介紹

參考 ：http://blog.sina.com.cn/s/blog_5033827f0100r4dm.html

NinePatch圖片以*.9.png結尾，和普通圖片的區別是四周多了一個邊框（如所示）：

                                

         如所示，左邊那條黑色線代表圖片垂直展開的地區，上邊的那條黑色線代表水平展開地區，右邊的黑色線代表內容繪製的垂直地區，下邊的黑色線代表內容繪製的水平地區，右邊和下邊的線是可選的，左邊和上邊的線不能省略。

        採用NinePatch圖片做背景，可使背景隨著內容的展開（縮小）而展開（縮小）。那麼如何將普通的PNG圖片編輯為NinePatch圖片呢， Android  SDK/tools目錄下提供了編輯器draw9patch.bat，雙擊即可開啟，使用起來很簡單了，主要有以下選項：

        採用NinePatch圖片做背景，可使背景隨著內容的展開（縮小）而展開（縮小）。那麼如何將普通的PNG圖片編輯為NinePatch圖片呢， Android  SDK/tools目錄下提供了編輯器draw9patch.bat，雙擊即可開啟，使用起來很簡單了，主要有以下選項：

• ? Zoom: 用來縮放左邊編輯地區的大小
• ? Patch scale: 用來縮放右邊預覽地區的大小
• ? Show lock: 當滑鼠在圖片地區的時候顯示不可編輯區域
• ? Show patches: 在編輯地區顯示圖片展開的地區 （使用粉紅色來標示）
• ? Show content: 在預覽地區顯示圖片的內容地區（使用淺紫色來標示）
• ? Show bad patches: 在展開地區周圍用紅色邊框顯示可能會對展開後的圖片產生變形的地區，如果完全消除該內容則圖片展開後是沒有變形的，也就是說，不管如何縮放圖片顯示都是良 好的。（實際試發現NinePatch編輯器是根據圖片的顏色值來區分是否為bad patch的，一邊來說只要色差不是太大不用考慮這個設定。）

例子:

NinePatch是一種很有用的PNG圖片格式，它可以在特定地區隨文字大小進行縮放。如下：

從可以看到，背景圖片的中間地區會隨著文字的大小進行縮放。背景圖片是一張NinePatch圖片。 NinePatch圖片可以使用android內建的draw9patch工具來製作，該工具在SDK安裝路徑的tools目錄下。執行該工具，然後點擊“File”->“open 9-path”開啟一張用於製作NinePatch圖片的原來圖片。在畫布的上方和左方的邊上畫線指定縮放地區，
勾選“Show patches”可顯示畫定的地區，綠色
為固定大小地區，紅色為縮放地區，文字會擺放在紅色
地區。製作完後，點擊“File”? “save 9-path”儲存
圖片，draw9patch工具會自動為圖片加上*.9.png尾碼。
把製作好的圖片拷貝進項目的res/drawable目錄，然後
編寫代碼。如下：

 

 

 

2：使用

 

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

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

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

效 果圖如下。從中我們也可以理解為什麼叫 nine patch，相當於把一張png圖分成了9個部分，分別為4個角，4條邊，以及一個中間地區，4個角是不做拉升的，所以還能一直保持圓角的狀態，而2條水 平邊和垂直邊分別只做水平和垂直展開，所以不會出現邊會被拉粗的情況，只有中間用黑線指定的地區做展開。結果是圖片不會走樣

 

 

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

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

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

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

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

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

圖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專案即可

 

再補充下！

 

 

1.什麼是“9妹”(9patch)？
它是一個對png圖片做處理的一個工具，能夠為我們產生一個"*.9.png"的圖片;
2.何為"*.9.png"?
所謂"*.9.png"這是Android os裡所支援的一種特殊的圖片格式,用它可以實現部分展開；這種圖片是經過”9妹“進行特殊處理過的，如果不處理的話，直接用PNG圖就會有失真，展開不正常的現象出現。
3.它的用途是？
說到用途，這種特殊格式的png圖，我也看了網上的相關文章但都是用一個能自適應的button舉例子！(如)清一色抄襲.. - -、
          (此執行個體咱們直接無視掉，在後面我會給大家灌輸遊戲中執行個體)
這個例子是指當button上的字型大小改變，那麼文字底下的png圖也會自動適應文字。
這似乎表明做Android 軟體應用 使用一些組件的的時候會時常用到；
       4.那麼實際在遊戲中到底如何使用呢？什麼情況下去使用呢？
   ....當然啦，身為做遊戲我一定要”9妹“利用在咱們遊戲中才行，不然豈不是白研究了、經過思考突然想到了一些情況，並且發現“9妹”確實在遊戲開發中佔有一定的分量！下面我們來先熟習“9妹”工具，然後再跟大家舉例，貼圖來說明其用途、畢竟有圖有真相 呵呵~
啟動9妹：
在你Android SDK 路徑下 X:\android sdk\tools ,你會找到一個 【draw9patch.bat】,沒錯這就是9妹啦、官方名 NinePatch ；
         
提示匯入一張png圖片，然後真正進入"9妹"的操作介面（如）：     （圖1）
      
序 列 ① ：在展開地區周圍用紅色邊框顯示可能會對展開後的圖片產生變形的地區，如果完全消除該內容則圖片展開後是沒有變形的，也就是 說，               不管如何縮放圖片顯示都是良 好的。 （實際試 發現NinePatch編輯器是根據圖片的顏色值來區分是否為bad patch的，一邊來說只               要色差不是太大不用考慮這個設定。）
序列 ② ：地區是匯入的圖片，以及可操作地區。
序 列 ③ ：這裡 zoom：的長條bar 是對匯入的圖放大縮小操作，這裡的放大縮小隻是為了讓使用者更方便操作，畢竟是對像素點操作比較費                   眼，下面的 patch scale 是序列 ④地區中的三種形態的展開後的一個預覽操作，可以看到操作後的圖片展開後的效果。
序列 ④： 地區這裡從上到下，依次為：縱向展開的效果預覽、橫向展開的效果預覽，以及整體展開的效果預覽
序列 ⑤： 這裡如果你勾選上，那麼當你滑鼠放在 ② 地區內的時候並且當前位置為不可操作地區就會出現lock的一張圖,就是顯示不可編輯區域 ;
序列 ⑥： 這裡勾選上，那麼在④ 地區中你就會看到當前操作的像素點在展開預覽圖中的相對位置和效果。
序列 ⑦： 在編輯地區顯示圖片展開的地區;
如何操作：
滑鼠左鍵選取需要展開的像素點；  shift+滑鼠左鍵取消當前像素點。
操作地區：
                                     
     大家看到匯入的png圖片預設周圍多了一像素點，也就是這一圈一像素點就是咱們的可操作地區。但是因為下方和右方可操作地區屬於可選地區，不用理會；主要大家注意Left 和 top 操作地區；
     Top操作地區的一排像素點，表示橫向展開的像素點；
     Left操作區的一排像素點，表示縱向展開的像素點；
是我對圖片的操作：

 

轉自：http://meiyitianabc.blog.163.com/blog/static/10502212720115354948909/