Android 9Patch (NinePatch)

1:介绍

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图片最外面的空格画一个像素宽的黑线。左边是编辑区，在左边的图中，左边黑线的高度决定了垂直拉升时的扩展区域，也 即当垂直拉伸时，只有这个区域的图片会被拉伸。同理图片上边的黑线长度决定了水平拉升时的扩展区域。右边区域是拉升的效果图，从上之下分别为垂直拉伸，水 平拉伸，以及两个方向的拉升。该工具提供了所见即所得的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圖檔後，就可以開始寫程式了。

评论

1 楼 zjhdreams 2015-01-29  

求下载链接