点九图完全解析-附官方工具

搞懂点九图看这一篇就够了。

 

 

内容简介

 

你真的了解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设计科学派公众号中回复“点九图”获得最软件新版本的下载链接。