做了好多客户端软件了，突然发现里面有好多图片都是重复的，个别只是大小不一样，每次都使用大量图片，导致软件过大，项目总结的时候才发现Android已经提供了一种解决方案了，这就是NinePatchDrawable，下面部分主要是翻译的官网api，后边有我总结的适用地方。

NinePatchDrawable

NinePatchDrawable是一种可以调整大小的图片，用户自定义的拉伸区域，这种类型的图片被定义成一种特殊格式化的png文件

Nine-patch

        NinePatchDrawable是一种可以拉伸的图片，Android可以自动调整大小去适应视图的内容区域，你已经把它作为背景。一个运用Nine-patch图片作为背景用在标准的android按钮上，按钮必须拉伸去适应各种字符的长度。一个Nine-patch是一种标准的png图片，它包含额外的一个像素的宽度。它必须保存为已.9.png为扩展名，并且放在项目的/res/drawable文件夹下。如果你是从APK解压后得到的*.9.png文件,注意它是已将周围的空白像素去掉了的，在使用时必须再加上。


边界是用来定义图片的可拉伸和静态区域。你指定一个（或多个）一像素宽度的黑线在左边或上边的边界（其他的边界像素应该完全透明或白色）指出一个可拉伸的区域。你可以有多个可以拉伸的区域：他们相对大小保持不变，所以最大的部分总是最大的。


你也可以在图片的左边和上部定义一个可选的drawable区域（实际上，内边距线）。如果一个视图对象设置NinePatch作为它的背景，然后指定视图的文本，它会伸展自己让所有的文本符合规定区域内，指定在右边和底部的线（如果包含）。当然内边距线不包括其中，Android使用左边和顶部的线去定义这个绘图区。


清楚的阐明不同线路之间的差别，左侧和顶部定义的那些像素的图像可以被复制以拉伸图像。底部和右线定义一个相对位置的图像，视图内容的放入其中。

下面是一个定义button的NinePatch文件：

154230515.png

这NinePatch定义了一个可伸缩的面积与左侧和顶部的线和底部和右侧线的绘制区域。在上面的图像中，虚线灰色线识别区域的图像将被复制以拉伸。粉红色的矩形区域在下面的底部图像识别的地区为视图的内容是允许的。如果内容不适应这个区域，图像将被拉伸。

        Draw-9-patch工具提供了一中非常便利的方法去创建你自己的Nine-Patch图像，用一个WYSIWYG图片编辑器。它甚至提出警告，如果该地区已经定义为可伸缩的地区都处于危险的生产图纸工件由于像素复制。

XML例子

这儿有意向布局xml的例子示范怎么添加一个Nine-Patch图像在两个按钮上(NinePatch图像被保存为res/drawable/my_button_background.9.png)

155130409.jpg


Draw 9-patch工具：

下面是快速指导创建一个Nine-patch图片用Draw9-patch工具，你需要准备你想创建NinePatch的图片。

1.从终端上启动draw9patch程序从你的SDK /tools目录下

2.拖拽你的图片到draw9patch窗口(或者 File> Open 9-patch… 选择图片)你的工作空间会自动打开。

左边是你的绘画区域，也就是你可以编辑线为了拉伸区域和内容区域。右边是预览区域，你可以预览你被拉伸（上边是垂直拉伸，中间是水平拉伸，下面是同时拉伸）的图片。

3.点击1像素的周长来画线定义可拉伸区域和内容区域(可选)。右键点击（或者摁住shift键点击）去擦除已经画好的线。

4.完成后，选择File > Save 9-patch，你的图片会被保存为.9.png

注意：一个正常的png文件（*.png）会被加载一个空的1像素边界在图片的周围，以便于你可以画可拉伸区域和内容区域。一个已经被保存成9-patch的文件(*.g.png)加载时没有绘画的区域添加，因为它已经存在。


lZoom: 用来缩放左边编辑区域的大小

lPatch scale: 用来缩放右边预览区域的大小

lShow lock: 当鼠标在图片区域的时候显示不可编辑区域

lShow patches: 在编辑区域显示图片拉伸的区域（使用粉红色来标示）

lShow content: 在预览区域显示图片的内容区域（使用浅紫色来标示）

lShow bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良好的。（实际试发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来说只要色差不是太大不用考虑这个设置。）

使用&范围
1、例子

原图：

154516143.png

画线之后的图片:

160032191.jpg


说明：勾选上Show patchs之后可以看到左边有一个粉红色的区域这个区域就是可以自动拉伸的区域，主要取决于左边（纵向拉伸）和上面（横向拉伸）黑线。

勾选上Show Content之后可以再右边的预览视图中看到三种方式的可拉伸内容填充区域。


   154517601.png

2、其它使用

官网主要介绍了button按钮的使用，实际上项目中有很多地方都可以使用如下：


    154517819.png主要是拉伸左边区域，右边不需要拉伸


   154518579.png


   下图上边有一部分颜色值相同，可以适当拉伸

   154518763.png


   154518880.pngv这个左边的小箭头是不能拉伸的


   下图主要是锯齿部分不能拉伸

   154518841.png


   154519175.png


   下图主要是左上边小箭头部分不能拉伸

   154519910.png


附录：

参考：

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

http://developer.android.com/reference/android/graphics/drawable/NinePatchDrawable.html

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

http://www.cnblogs.com/feisky/archive/2010/01/16/1649502.html