你真的了解android的点九图吗？读完这一篇，再来回答这个问题，废话少说，先看看本文要讲的主要内容：
点九图简介
下图是一张android系统中的典型点九切图，先来了解下点九图的结构，文章接下来
还会对每个结构做详细的介绍。
制作点九图有四个硬性要求，只要满足这四点，点九图就可以被正确识别。
要求一
/p>
名称格式必须为：文件名称.9.png。
要求二/p>
上下左右各留有1px的标识线区，此区内不能有半透明像素（特别注意：切图若有投影，不要泄漏到标识线区）。
要求三/p>
伸缩标识线与内间距标识线为不透明的纯黑色(#)，光学标识线为不透明的纯红色(#ff)。
要求四/p>
点九图的特殊结构会导致其4个顶角处成为“绝对禁区”，这4个1像素×1像素的区域内不能有任何内容。
伸缩线详解
伸缩线标注了切图内的拉伸区域/收缩区域。一般来说点九图越小越好，因此通常切图尺寸都要小于控件尺寸，但这并不意味着不会出现切图尺寸大于控件尺寸的情况，在这种情况下，切图会根据伸缩线来进行缩小。
下图中，左侧为测试所用的三色点九图，右侧为测试程序的展示效果，从实验的结果得到三个结论：
1.切图拉伸时，仅伸缩区会被拉伸。2.切图收缩时，首先伸缩区会被收缩。3.当伸缩区缩小到0之后，切图整体继续收缩（Android4.3之前表现不同，谷歌公布的Android系统9月份的月度版本分布图数据显示4.3之前的机型占比不足7%，所以可忽略此情况）。
伸缩线支持多段标注，可以同时拉伸/缩放切图中的多个不相邻区域。从下图的实验结果可以得出一个结论：
每个区域的拉伸/放缩长度与本区的伸缩标识线长度成正比。
纵向的伸缩标识线原理和横向伸缩标识线的原理一致，就不再赘述。
内间距线详解
关于内间距线，很多人有所误解。因为内间距线所标注的是控件的内间距，而不是点九图的内间距，所以，内间距线跟点九图本身并没有直接的联系。
观察下面的点九图，这个点九图的横向伸缩线与横向内间距线没有重叠。那么，这张图可以正常显示吗？
如下图所示，将点九图设置为TextView的背景，首先，切图的拉伸区是正确的，再观察右侧的标注图，可以得出如下结论：
1.横向内间距线的左端到切图左端的距离为控件的左侧内间距值；2.横向内间距线的右端到切图右端的距离为控件的右侧内间距值。
（纵向内间距线原理同上）
虽然内间距线也可以画为多段，但是系统只关心最左端和最右端的位置，所以多段内间距线是没有任何意义的。
点九图中的内间距线，仅在代码中没有指定Padding属性的时候才会生效，但这不代表可以忽略点九图中的内间距线。切图都会被多次复用，很可能因为开发的疏忽在某些布局中忘记指定Padding属性，点九图中的内间距线是切图被正确显示的最后一道保障。
光学边界线详解
Opticalboundslayout(光学边界布局)是在Android4.3（Apilevel18）中引入的一种新的布局对齐方式。
光学边界也叫做视觉边界，下图是一个带有投影的蓝色按钮切图。在视觉上，此图形的外轮廓是蓝色按钮所占区域，而不是切图实际所占区域。光学边界线标注的位置为投影的位置，表示此区域在视觉上不可察觉。
光学边界会导致布局结构复杂化，而且可以实现的视觉效果也有限，大家稍作了解就好，技术成熟的时候再深究不迟。
下图中，左侧是开启光学边界的效果，右侧是未开启光学边界的效果。
官方工具：draw9patch
为了方便大家检测点九图是否正确，我将谷歌在开发平台中提供的draw9patch工具进行了打包：
1.包括Mac和Win两个版本。2.绿色软件，无需安装。3.自带Java环境，双击直接运行。4.无广告、无病毒、永久免费。
draw9patch工具使用很简单，就不多做讲解了。
在photoshop中做9PNG图
安卓app启动图打包变形问题处理;
.9.png
相信很多UI设计师应该和我一样遇到过这种APP打包启动图变形的问题，很多人都是交给前端工程师调控，但是并不是所有的人都会处理这种情况。
启动图变形，用户和老板看到的第一眼是什么感觉，这设计的什么玩意，还能变形感觉设计师很不专业，这种东西怎么讲，你没办法，只可以自己默默承受；
但是
如果作为UI设计师的我们可以直接给前端.9.png图片，就可以解决了这个启动图变形的问题，我也是探索了好久，每次怀着激动的心情做好3张自己以为做好的.9.png图片给前端时，一启动，就会给我重重的一下，还是变形，但是我一直都在寻找方法，直到这两天，我终于研究出来这个逻辑和规范，废话不多说了，直接和大家分享一下我自己的想法：
就拿我最近做的一款APP—崇礼启动图来举例
1.需要先准备好需要打包的3张启动图尺寸，分别是：
*px；
*px；
*px
先拿*这个尺寸进行.9.png图片制作方法讲解
2.将*启动图拖入PS中
3.让当前图层上下左右各留1透明像素，可以说一下我自己的做法：
3.1ctrl+a全选：作用是选中当前图层选区
3.2执行菜单栏—选择—修改—收缩—1px—勾选应用画布边缘效果—点击确定：作用是上下左右各收缩了1像素
3.3shift+i反向：作用是选中外面一圈宽度为1px的范围
3.4.直接delete，就做好了当前图层边缘自带1px的透明像素
当前图层大小就可以理解为*px，上下左右各存在1px的透明像素
4.开始要在透明像素上做文章了，看好我的表演
首先要理解一下这个透明像素是干嘛用的？
主要是来绘制黑线；
这个黑线是干嘛用的？
具体我也不知道，但是想做.9.png就得绘制黑线；
左边黑线绘制范围：可以横向拉伸画布的区域（简单理解就是空白的区域，你怎么拉伸都不会变形的区域）进行绘制宽度为1px，高度为npx的黑线；
上边黑线绘制范围：可以纵向拉伸画布的区域（）进行绘制高度为1px，宽度为npx的黑线；
右边黑线绘制范围：除了最上1px透明像素和最下1px透明像素，剩下全部进行绘制宽度为1px，高度为-1-1=px的黑线
下边黑线绘制范围：除了最左1px透明像素和最右1px透明像素，剩下全部进行绘制高度为1px，宽度为-1-1=px的黑线
四个方向绘制的黑线位置怎么确定？
左侧：从上往下:11px是透明像素+1（启动图标的底部位置-》当前图层的顶部位置）是透明像素+1（标语/广告语的顶部位置-》启动图标的底部位置）是黑线+1（标语/广告语的顶部位置-》标语/广告语的底部位置）是透明像素+1（标语/广告语的底部位置-》当前图层的底部位置）是透明像素+11px是透明像素
直接上图，直观明了
整体左侧效果：
上面：从左到右：11px是透明像素+（广告语左侧或者启动图标左侧（谁靠左边近就以谁为标准）-》当前图层左侧位置）1px是黑线+剩余长度*1px是透明像素
直接上图，直观明了
右侧：从上到下：11px是透明像素+1（当前图层顶部-》当前图层底部）1px是黑线+11px是透明像素
直接上图，直观明了：
下面：从左到右：11px是透明像素+（当前图层左侧-》当前图层右侧）1px是黑线+1*1px是透明像素
上图
黑线怎么绘制呢？
PS英文输入法按一下键盘上的D，恢复默认的前后背景色，前景色为黑色就ok了；
选框框选透明像素，alt+delete填充前景色就填充上黑色了；
4.1绘制参考线，这是必须的，可以严格的划分出来准备绘制黑线和透明像素的区域范围
需要在哪里进行绘制呢？
先上图让大家看一下这种样板
左上角，左下角，右上角，右下角需要各留1px透明像素不可以动，这个非常关键
绘制完成上下左右的黑线后，将该图层三大键+s导出为（xxx.9.png），要注意前面的xxx.9是当前图片的名字（是图片的名称），后面的png是当前图片的后缀名（是图片的属性），图片属性还是正常的png图片，但是名字是xxx.9
最后总结一下重点：
1.当前图层左上角，左下角，右上角，右下角一直都会有1*1px的透明像素
2.黑线绘制最好就用选区绘制，alt+delete填充前景色黑色，黑色一定是纯黑色：#
3.上黑线只存在左侧部分，左侧开始位置为当前图层最左侧，左侧结束位置为广告语或者是启动图标最左侧（具体看谁距离左侧图层更近）
4.左黑线存在启动图标以下位置到广告语以上位置
5.下黑线和右黑线只有两头是1*1px的透明像素，剩下的都是黑线
6.导出图片一定是xxx.9.png
同样的道理做好px和px就好了；
把三张图片（.9.png/.9.png/.9.png）交付给前端就OK了!
