android NinePatch圖片製做

標籤：android   圖片   編輯器   

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條水 平邊和垂直邊分別只做水平和垂直展開，所以不會出現邊會被拉粗的情況，只有中間用黑線指定的地區做展開。結果是圖片不會走樣

android NinePatch圖片製做