Android九點圖（Nine-Patch）制作及應用

你可能之前還沒有聽說過Nine-Patch這個名詞，它是一種被特殊處理過PNG圖片，能夠指定哪些區域可以被拉伸而哪些區域不可以。

現在我將手把手教你如何去制作一張九點PNG圖像。

------------------------------------------Nine_Patch制作--------------------------------------------------

素材：

首先我們試試不用九點PNG為TextView設置背景圖片，XML參數如下：

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/green"/>

最終效果如下：

可以看到，由於圖片的寬度不足以填滿整個屏幕的寬度，整張圖片被均勻地拉伸了。

這種效果非常差，用戶肯定是不能容忍的，這時我們就可以使用Nine-Patch圖片來進行改善。

在Android SDK目錄下有一個tools文件夾，在這個文件夾中找到draw9patch.bat文件

 

雙擊打開之后，把圖片拖動到窗口中，將圖片加載進來，如圖所示：

我們可以在圖片（左邊）的四個邊框繪制線段，線段內的部分就表示當前圖片拉伸的區域，拉伸后的效果可以在視窗（右邊)觀看。

圖片邊緣被黑色線段覆蓋的范圍就是圖片需要拉伸的范圍，當上下左右都設定好范圍之后，會形成一個九宮格的布局，這也是Nine-Patch名字的由來。

如果不小心畫錯了，按住Shift+鼠標左鍵就可以清除標記部分。

圖片拉伸的原則：保留細節，拉伸直線

保存圖片，圖片會自動添加一個.9.png的后綴，圖片最終效果是這樣的：

最后圖像生成的黑線是什么鬼？不要激動，那是用於標記拉伸區域的特殊記號，如果沒有這些黑線，這圖片就與普通的PNG一樣了。

等等，那是不是一張普通的PNG加上黑色標記線，就可以充當Nine-Patch圖使用了呢？

除了標記線，要讓Android識別這是Nine-Patch圖片，還得有特殊的聲明（.9.png）才行，注意不要更改文件的后綴名。

圖片命名規范：圖片樣式+制作者+編號（以保證不會與編譯器沖突）

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/green_woider_01"
        android:gravity="center"
        android:text="你好，小娜"
        android:textColor="#333"
        android:textSize="18dp" />

重新運行程序，看看效果：

效果很棒不是嗎？這樣當圖片需要拉伸的時候，就可以只拉伸指定的區域，程序在外觀上也是有了很大的改進。

有了這個知識儲備之后，試試下面的界面：