【武汉校区】分享：Android中9Patch图片的研究

9patch俗称”9妹”，对于任何一个搞Android开发的程序员来说，都并不陌生,它是一个对png图片做处理的工具，能够为我们生成一个"*.9.png"的图片。

.9.png图片的特性：

所谓"*.9.png"这是Android os里所支持的一种特殊的图片格式,用它可以实现部分拉伸；这种图片是经过”9妹“进行特殊处理过的，如果不处理的话，直接用PNG图就会有失真，拉伸不正常的现象出现。那么,我们来详细介绍一下使用9patch制作.9图片的过程:

首先，启动9妹

在你Android SDK 路径下 X:/android sdk/tools ,你会找到一个【draw9patch.bat】,没错这就是9妹啦、官方名 NinePatch，如图下所示：

双击打开draw9patch.bat文件

提示导入一张png图片，然后真正进入"9妹"的操作界面（如下图）：

图中从1-8所标的顺序分别代表9patch不同的工作区域。

序列① ：刚导入png图片的时候，9patch会给出一段提示描述信息，建议你需要做的事情，当前它给出的建议是在图片的边界位置按照ctrl或者shift键拖动以改变布局的边界,通常我们都不需要理会它。

序列② ：区域是导入的图片，以及可操作区域，也就是在这个区域内部，我们可以绘制图片的拉伸区域

序列③： zoom的长条bar是对导入的图片进行缩放操作，这里的放大缩小只是为了让使用者更方便操，而下面的patch scale是对序列4当中的拉伸预览区域进行缩放比例调整。

序列④： 区域这里从上到下，依次为：纵向拉伸的效果预览、横向拉伸的效果预览，以及整体拉伸的效果预览

序列⑤： 这里如果你勾选上，那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ;如图

序列⑥： 这里勾选上，那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果，如图:

序列⑦： 在编辑区域显示图片拉伸的区域; 当我们在序列2当中的编辑区已经对图片进行拉伸区域的绘制，之后，勾选序列7，将在编辑区域显示图片拉伸的区域，如图:

好了，那么具体如果绘制编辑区当中的图片，指定哪些区域可以被拉伸，哪些区域应该被保留，不被拉伸呢？

大家看到导入的png图片默认周围多了一像素点，也就是这一圈一像素点就是咱们的可操作区域。因为下方和右方可操作区域是指定内容的显示区域，属于可选区域，可不予理会；但是要注意内容区域的标记不能有间断，也就是说标记要连续且仅有一处，否则.9.png图片在放入项目下会报错。

操作其实很简单：只要在操作区域内，点击鼠标左键拖动，那么该对应方向上的区域就指定为被拉伸的区域，反之，按住shift+鼠标左键，可以拖动取消区域指定

如果所示，对于拉伸区域，9patch主要有top和left这2块，top对应的是垂直方向，而left对应的水平反向的区域，如下图所示，红色虚线就是代表指定top操作区域的拉伸范围，而绿色虚线范围就是代表指定left操作区域的拉伸范围了…

下面这是我对图片的操作：

然后，再来看一下，指定拉伸区域后的预览区域内容吧:

分别显示了，序列1: 当拉伸区域内的内容高度过高的时候，自动缩放后的图片样子，序列2：当拉伸区域内的内容宽度过宽的时候，自动缩放后的图片样式。序列3：当高度以及宽度都超过原图片内容区域的时候，垂直和水平方向同时被拉伸后的图片样子。

Ok，到这一步了，你就可以将处理后的图片，保存为一张“*.9.png”的图片，再将它引用到你的Android工程当中，就不必担心拉伸不正常的问题了。

好吧，我来写一个简单的小程序，我们来看一下实际运行的效果吧：

贴上我的布局代码，相信大家这时候已经彻底明白9path图片的作用以及含义了；

OK，今天关于Android中9patch的研究到此就结束了，下次再见！

想获取最新传智播客武汉中心分享技术文章请加QQ  1641907557 ，后期会分享更多与实体班同步教程，助你冲击月薪20K！

推荐阅读：

《【武汉分校】UI实体班同步教程+海量素材，打造年薪20W全能设计师》

《黑马程序员Android实体班同步项目Demo源码汇总，挑战月薪20K！