.9.png圖片的生成和使用

開發應用程序的時候，若是一個應用的界面太醜，給用戶的第一感受就是這個產品很垃圾，即便功能很強悍。大公司的碼農固然就不用擔憂了，由於有不少藝 術天賦的美工美眉來處理這個方面，可是若是是小公司的話，或者說你想本身開發應用的話，沒有一個吸引人的界面是不會獲得用戶關注的。本身開發的應用若是看 着很喜好，那固然再好不過了

　　廢話有些多，瞭解.9.png圖片已經一段時間了，索性將其記載下來，以防之後忘記。雖然網上有不少，可是很亂，看着心煩，並且不符合本身的需求，因此仍是本身動手豐衣足食。

　　.9.png圖片其實就是png格式圖片，不過它比普通的png圖片外圍多了1px（像素）的邊框，另外就是使用這種格式的圖片能夠實現背景自 適應大小且不失真的效果。好比某些控件橫豎屏切換後控件的樣子就變形了，或者某些圖片做爲控件背景也變形，這會讓人很鬱悶。幸虧.9.png圖片能夠提供 這些須要的功能

　　使用步驟

一、製做屬於你本身的png圖片，必定要是png圖片。能夠本身PS製做，也能夠解壓其餘應用的apk文件，用裏面的圖片資源，Android系統也有圖片資源可使用（）

二、在D:\android\android-sdk-windows\tools目錄下找到draw9patch.bat文件，而後將其打開，將你要處理的png圖片拖入便可。或者File --> Open 9 patch

上邊黑線：橫向拉伸區域，必需要畫的，拉伸是橫向拉伸，如右邊的區域第二個拉伸的就是橫向拉伸的效果

左邊黑線：縱向拉伸區域，必需要畫的，拉伸是縱向拉伸，如右邊的區域第一個拉伸的就是縱向拉伸的效果

下邊黑線：可選，橫向內容顯示區域

右邊黑線：可選，縱向內容顯示區域

剩下的本身試試就知道了

三、注意，黑線必須是連續的，若是你感受畫的很差，按shift+鼠標左鍵將其擦出，而後重新畫。畫完後點擊File-->save 9-patch保存便可，效果以下圖

四、接下來須要在程序中使用了，將這個圖片放到drawable中便可，跟其餘的圖片使用沒什麼區別了，惟一神奇的就是能夠自適應，不失真

好比咱們用這個圖片定義一個Button，另外加個TextView的背景圖，也是.9.png圖片。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="6dp"
    android:orientation="vertical" >

    <TextView
        android:layout_gravity="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
           android:padding="5dp"
        android:background="@drawable/sms_out_normal_bg"
        android:text="http://www.cnblogs.com/loulijun/\n -- 花郎" />
    
    <Button 
        android:id="@+id/sendMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:background="@drawable/test"
        android:text="發送消息給允兒"
        />
</LinearLayout>

運行效果以下：

 

 

 

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

        採用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圖片最外面的空格畫一個像素寬的黑線。左邊是編輯區，在左邊的圖中，左邊黑線的高度決定了垂直拉昇時的擴展區域，也 即當垂直拉伸時，只有這個區域的圖片會被拉伸。同理圖片上邊的黑線長度決定了水平拉昇時的擴展區域。右邊區域是拉昇的效果圖，從上之下分別爲垂直拉伸，水 平拉伸，以及兩個方向的拉昇。該工具提供了所見即所得的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操做區的一排像素點，表示縱向拉伸的像素點；