点九图完全解析附官方工具
发布时间:2019-09-13 发布者:文案编辑 来源:原创/投稿/转载

  你真的了解android的点九图吗?读完这一篇,再来回答这个问题,废话少说,先看看本文要讲的主要内容:

  下图是一张android系统中的典型点九切图,先来了解下点九图的结构,文章接下来

  上下左右各留有1px的标识线区,此区内不能有半透明像素(特别注意:切图若有投影,不要泄漏到标识线区)。

  伸缩标识线与内间距标识线),光学标识线为不透明的纯红色(#ff0000)。

  点九图的特殊结构会导致其4个顶角处成为“绝对禁区”,这4个1像素×1像素的区域内不能有任何内容。

  伸缩线标注了切图内的拉伸区域/收缩区域。一般来说点九图越小越好,因此通常切图尺寸都要小于控件尺寸,但这并不意味着不会出现切图尺寸大于控件尺寸的情况,在这种情况下,切图会根据伸缩线来进行缩小。

  下图中,左侧为测试所用的三色点九图,右侧为测试程序的展示效果,从实验的结果得到三个结论:

  3.当伸缩区缩小到0之后,切图整体继续收缩(Android 4.3之前表现不同,谷歌公布的Android系统9月份的月度版本分布图数据显示4.3之前的机型占比不足7%,所以可忽略此情况)。

  伸缩线支持多段标注,可以同时拉伸/缩放切图中的多个不相邻区域。从下图的实验结果可以得出一个结论:

  关于内间距线,很多人有所误解。因为内间距线所标注的是控件的内间距,而不是点九图的内间距,所以,内间距线跟点九图本身并没有直接的联系。

  观察下面的点九图,这个点九图的横向伸缩线与横向内间距线没有重叠。那么,这张图可以正常显示吗?

  如下图所示,将点九图设置为TextView的背景,首先,切图的拉伸区是正确的,再观察右侧的标注图,可以得出如下结论:

  虽然内间距线也可以画为多段,但是系统只关心最左端和最右端的位置,所以多段内间距线是没有任何意义的。

  点九图中的内间距线,仅在代码中没有指定Padding属性的时候才会生效,但这不代表可以忽略点九图中的内间距线。切图都会被多次复用,很可能因为开发的疏忽在某些布局中忘记指定Padding属性,点九图中的内间距线是切图被正确显示的最后一道保障。

  光学边界也叫做视觉边界,下图是一个带有投影的蓝色按钮切图。在视觉上,此图形的外轮廓是蓝色按钮所占区域,而不是切图实际所占区域。光学边界线标注的位置为投影的位置,表示此区域在视觉上不可察觉。

  光学边界会导致布局结构复杂化,而且可以实现的视觉效果也有限,大家稍作了解就好,技术成熟的时候再深究不迟。

  为了方便大家检测点九图是否正确,我将谷歌在开发平台中提供的draw9patch工具进行了打包:

  我想通过{我是程序员}系列文章为大家更深入地讲解跟UI相关的编程知识,作为UI骨骼设计思想的补充,通过这些文章,你不仅可以更加深入地了解android系统设计的规范,还可以掌握更多提高工作效率和解决开发问题的方法。