[轉]【Android】9-patch圖片以及例子說明

一、何爲9-patch？

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

 

採用NinePatch圖片作背景，可以使背景隨着內容的拉伸（縮小）而拉伸（縮小）。---在Android中，對於不一樣的分辨率，圖片顯示就不會變形了

 

上下左右的四條黑線表示以下：

一、左邊和上邊的交叉區表示可擴展區域；右邊和下邊的交叉區表示文字顯示區域

二、左邊和上邊的黑線必須有（不然，工程會報錯的）；右邊和下邊的黑線可無，或者只有一個

三、當右邊和下邊的黑線都沒有的時候，左邊和上邊的交叉區不單單表示該區域可擴展，也表示該區域是文字顯示區域

四、當右邊或者下邊的黑線沒有時，顯示區以其對面的黑線爲準

 

二、Android製做9-patch圖片的工具：draw9patch.bat-------將png格式圖片改爲.9.png格式圖片

該工具目錄：D:\android-sdks\tools\draw9patch.bat

 

工具使用步驟：

一、找到該工具，雙擊打開，節目以下圖所示：

二、將要修改的png圖片拖動到工做區域，或者選擇File打開文件

三、工做區域說明

【參考】http://www.cnblogs.com/slider/archive/2011/12/07/2279302.html

 
序 列 ① ：在拉伸區域周圍用紅色邊框顯示可能會對拉伸後的圖片產生變形的區域，若是徹底消除該內容則圖片拉伸後是沒有變形的，也就是說，無論如何縮放圖片顯示都是良 好的。 （實際試 發現NinePatch編輯器是根據圖片的顏色值來區分是否爲bad patch的，一邊來講只要色差不是太大不用考慮這個設置。） 
序列 ② ：區域是導入的圖片，以及可操做區域。 
序 列 ③ ：這裏 zoom：的長條bar 是對導入的圖放大縮小操做，這裏的放大縮小隻是爲了讓使用者更方便操做，畢竟是對像素點操做比較費                   眼，下面的 patch scale 是序列 ④區域中的三種形態的拉伸後的一個預覽操做，能夠看到操做後的圖片拉伸後的效果。 
序列 ④： 區域這裏從上到下，依次爲：縱向拉伸的效果預覽、橫向拉伸的效果預覽，以及總體拉伸的效果預覽 
序列 ⑤： 這裏若是你勾選上，那麼當你鼠標放在 ② 區域內的時候而且當前位置爲不可操做區域就會出現lock的一張圖,就是顯示不可編輯區域 ; 
序列 ⑥： 這裏勾選上，那麼在④ 區域中你就會看到當前操做的像素點在拉伸預覽圖中的相對位置和效果。 
序列 ⑦： 在編輯區域顯示圖片拉伸的區域;

四、用鼠標在想要畫黑線的區域畫上黑線：

說明：鼠標直接拖動------畫黑線

        Shift+鼠標拖動----清除所畫的黑線

        Ctril+鼠標拖動-----填充顏色（這個，我木有用過，不肯定是幹啥子的）

記住：上邊和左邊的黑線是必須的

例如，個人原圖test.png爲：

我畫第一張test1.9.png圖片，畫了左邊和上邊

第二張test2.9.png圖片，畫了上下左右

五、畫好後，點擊save，保存圖片

 

三、9-patch例子說明

直接上個例子，說明9-patch圖片吧。

採用了我畫好的三張圖片（test.png/test1.9.png/test2.9.png）

xml文件以下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:background="@drawable/test"
        android:text="@string/longcontent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="1dp"
        android:background="@drawable/test1"
        android:text="@string/longcontent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button2"
        android:layout_marginTop="1dp"
        android:background="@drawable/test2"
        android:text="@string/longcontent" />

</RelativeLayout>

 

 

 

 

 

Button的文字內容：

<string name="longcontent">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbc\nccccccccccccccccccddddd</string>

代碼運行結果：

第一張爲原始png背景圖片的button；

第二張爲定製了擴展區域的9patch背景圖片的button；

第三張爲定製了擴展區域以及顯示區域的9patch背景圖片的button

 

最後再總結下：

一、9patch是隨文字大小能夠縮放的圖片。 定義了拉伸區域，則除拉伸區域可變外，其餘區域保持原來的形狀大小不變。

二、採用9patch圖片作背景，可以使背景隨着內容的拉伸（縮小）而拉伸（縮小）

三、爲了支持不一樣分辨率的設備，View能夠採用9patch圖片作背景圖片

四、可使用SDK自帶的draw9patch.bat工具將png格式圖片轉換爲9patch格式圖片

轉載:http://www.cnblogs.com/Amandaliu/archive/2013/04/26/3045286.html

參考

http://www.cnblogs.com/slider/archive/2011/12/07/2279302.html

http://developer.android.com/tools/help/draw9patch.html