内容简介
你真懂android的点九图吗？读完这一篇，再来回答这个问题，废话少说，先看看本文要讲的主要内容：
点九图简介
下图是一张android系统中的典型点九切图，先来了解下点九图的结构，文章接下来还会对每个结构做详细的介绍。
制作点九图有四个硬性要求，只要满足这四点，点九图就可以被正确识别。
要求一:
名称格式必须为：文件名称.9.png。
要求二:
上下左右各留有1px的标识线区，此区内不能有半透明像素（特别注意：切图若有投影，不要泄漏到标识线区）。
要求三:
伸缩标识线与内间距标识线为不透明的纯黑色(#000000)，光学标识线为不透明的纯红色(#ff0000)。
要求四:
点九图的特殊结构会导致其4个顶角处成为“绝对禁区”，这4个1像素×1像素的区域内不能有任何内容。
伸缩线详解
伸缩线标注了切图内的拉伸区域/收缩区域。一般来说点九图越小越好，因此通常切图尺寸都要小于控件尺寸，但这并不意味着不会出现切图尺寸大于控件尺寸的情况，在这种情况下，切图会根据伸缩线来进行缩小。
下图中，左侧为测试所用的三色点九图，右侧为测试程序的展示效果，从实验的结果得到三个结论：
1.切图拉伸时，仅伸缩区会被拉伸。
2.切图收缩时，首先伸缩区会被收缩。
3.当伸缩区缩小到0之后，切图整体继续收缩
（Android 4.3之前表现不同，谷歌公布的Android系统9月份的月度版本分布图数据显示4.3之前的机型占比不足7%，所以可忽略此情况）。
伸缩线支持多段标注，可以同时拉伸/缩放切图中的多个不相邻区域。从下图的实验结果可以得出一个结论：
每个区域的拉伸/放缩长度与本区的伸缩标识线长度成正比。
纵向的伸缩标识线原理和横向伸缩标识线的原理一致，就不再赘述。
内间距线详解
关于内间距线，很多人有所误解。因为内间距线所标注的是控件的内间距，而不是点九图的内间距，所以，内间距线跟点九图本身并没有直接的联系。
观察下面的点九图，这个点九图的横向伸缩线与横向内间距线没有重叠。那么，这张图可以正常显示吗？
如下图所示，将点九图设置为TextView的背景，首先，切图的拉伸区是正确的，再观察右侧的标注图，可以得出如下结论：
1.横向内间距线的左端到切图左端的距离为控件的左侧内间距值；
2.横向内间距线的右端到切图右端的距离为控件的右侧内间距值。
（纵向内间距线原理同上）
虽然内间距线也可以画为多段，但是系统只关心最左端和最右端的位置，所以多段内间距线是没有任何意义的。
点九图中的内间距线，仅在代码中没有指定Padding属性的时候才会生效，但这不代表可以忽略点九图中的内间距线。切图都会被多次复用，很可能因为开发的疏忽在某些布局中忘记指定Padding属性，点九图中的内间距线是切图被正确显示的最后一道保障。
光学边界线详解
Optical bounds layout(光学边界布局)是在Android 4.3（Api level 18）中引入的一种新的布局对齐方式。
光学边界也叫做视觉边界，下图是一个带有投影的蓝色按钮切图。在视觉上，此图形的外轮廓是蓝色按钮所占区域，而不是切图实际所占区域。光学边界线标注的位置为投影的位置，表示此区域在视觉上不可察觉。
光学边界会导致布局结构复杂化，而且可以实现的视觉效果也有限，大家稍作了解就好，技术成熟的时候再深究不迟。
下图中，左侧是开启光学边界的效果，右侧是未开启光学边界的效果。
官方工具：draw9patch
为了方便大家检测点九图是否正确，我将谷歌在开发平台中提供的draw9patch工具进行了打包：
1.包括Mac和Win两个版本。
2.绿色软件，无需安装。
3.自带Java环境，双击直接运行。
4.无广告、无病毒、永久免费。
draw9patch工具使用很简单，就不多做讲解了。
在UI设计科学派公众号中回复“点九图”即可获得最新版的下载链接。
结束语和相关阅读
如果这篇文章让你有所收获，请转发给他人。当每一个UI设计师都可以不断学习和提高，UI设计所创造的价值也会越来越多，让我们为自己所爱的事业一起努力吧。
相关阅读
点九图工具官方用户指南