安卓点九图原理与完全解析+photoshop制作9png图以及附官方工具

作者:本站编辑发布时间:2022-10-18 来源:本站原创点击数:

你真的了解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工具使用很简单，就不多做讲解了。

在这里插入图片描述

在photoshop中做9PNG图

在这里插入图片描述

安卓app启动图打包变形问题处理;

.9.png

相信很多UI设计师应该和我一样遇到过这种APP打包启动图变形的问题，很多人都是交给前端工程师调控，但是并不是所有的人都会处理这种情况。

启动图变形，用户和老板看到的第一眼是什么感觉，这设计的什么玩意，还能变形感觉设计师很不专业，这种东西怎么讲，你没办法，只可以自己默默承受；

但是

如果作为UI设计师的我们可以直接给前端.9.png图片，就可以解决了这个启动图变形的问题，我也是探索了好久，每次怀着激动的心情做好3张自己以为做好的.9.png图片给前端时，一启动，就会给我重重的一下，还是变形，但是我一直都在寻找方法，直到这两天，我终于研究出来这个逻辑和规范，废话不多说了，直接和大家分享一下我自己的想法：

就拿我最近做的一款APP—崇礼启动图来举例

1.需要先准备好需要打包的3张启动图尺寸，分别是：

480*762px；

在这里插入图片描述