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

原创文章 分类: 教程 版权:
1947 68 11 5
2017-10-11
26.3
编辑推荐

读完这一篇,你会发现自己对点九图一无所知

Image title


内容简介


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


Image title



点九图简介


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

还会对每个结构做详细的介绍。


Image title


制作点九图有四个硬性要求,只要满足这四点,点九图就可以被正确识别。

要求一:
名称格式必须为:文件名称.9.png。

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

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

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


Image title



伸缩线详解


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

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

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


Image title


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


每个区域的拉伸/放缩长度与本区的伸缩标识线长度成正比。


Image title


纵向的伸缩标识线原理和横向伸缩标识线的原理一致,就不再赘述。



内间距线详解


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

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


Image title


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

1.横向内间距线的左端到切图左端的距离为控件的左侧内间距值;
2.横向内间距线的右端到切图右端的距离为控件的右侧内间距值。

(纵向内间距线原理同上)


Image title


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


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


Image title



光学边界线详解


Optical bounds layout(光学边界布局)是在Android 4.3(Api level 18)中引入的一种新的布局对齐方式。

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


Image title


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

下图中,左侧是开启光学边界的效果,右侧是未开启光学边界的效果。


Image title



官方工具:draw9patch


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

1.包括Mac和Win两个版本。
2.绿色软件,无需安装。
3.自带Java环境,双击直接运行。
4.无广告、无病毒、永久免费。

draw9patch工具使用很简单,就不多做讲解了。


UI设计科学派公众号中回复“点九图”获得最软件新版本的下载链接。


Image title



结束语和相关阅读


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

如果这篇文章让你有所收获,请分享给更多人。当每一个UI设计师都可以不断学习和提高,UI设计所创造的价值也会越来越多,让我们为自己所爱的事业一起努力吧。



相关阅读


切图在APP内部的运作机制:UI懂开发,坚决不做战五渣!





bingxueling

Hope,Power.

1043粉丝/23关注

面向价值设计•导论sogou手机输入法项目总结四-皮肤架构

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN