1、何為9-patch？

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

?

采用NinePatch圖片做背景，可使背景隨著內容的拉伸（縮小）而拉伸（縮小）。---在Android中，對于不同的分辨率，圖片顯示就不會變形了

?

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

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

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

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

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

?

2、Android制作9-patch圖片的工具：draw9patch.bat-------將png格式圖片改成.9.png格式圖片

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

?

工具使用步驟：

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

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

3、工作區域說明

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

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

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

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

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

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

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

例如，我的原圖test.png為：

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

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

5、畫好后，點擊save，保存圖片

?

3、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" ><Buttonandroid: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" /><Buttonandroid: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" /><Buttonandroid: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

?

最后再總結下：

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

2、采用9patch圖片做背景，可使背景隨著內容的拉伸（縮小）而拉伸（縮小）

3、為了支持不同分辨率的設備，View可以采用9patch圖片做背景圖片

4、可以使用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

?

轉載于:https://www.cnblogs.com/cqcmdwym/p/3364603.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的[转]【Android】9-patch图片以及例子说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。