开发必备的图片格式——.9图的原理和陷阱

前言

在大型项目开发中，图片拉伸的场景十分常见，而在这种场景下.9图就能发挥极大的作用。比如开发提示气泡时，气泡背景要随着文字数量的增加而进行延伸，而这气泡背景便是使用到了.9图（如下图所示）。

格式

• .9图的后缀格式为：.9.png

作用

• .9图可以进行拉伸，如水平、竖直方向的延长，而清晰度不变。

• 令一张图片实现多种拉伸效果，减少UI切图的使用，降低包体积。

在UE提供的原始图中，图片的四周会有黑色的线条，这些黑色横线正是.9图能够实现拉伸的原理所在。

.9图原理，黑色横线作用

• 顶部横线代表水平延伸的时候，其他位置不变，此处横线做水平延伸的部分。

• 底部横线代表水平延伸的时候，内容在水平方向的显示区域。

• 左方竖线代表竖直延伸的时候，其他位置不变，此处横线做竖直延伸部分。

• 右方竖线代表竖直延伸的时候，内容在竖直方向的显示区域。       

将一张.9图导入进Android studio的drawable文件夹后，如下图所示。      

         右方的三张图片，即.9图竖直拉伸、水平拉伸、水平和竖直同时拉伸的展现。

自定义.9图内容展示的区域

了解黑色横线作用之后，将.9图内容的显示区域自定义出来就比较容易了。只要移动4根黑色横线的位置、形成两个矩形交集的部分（下图的粉红色区域），即可查看.9图在水平、竖直方向延伸时的内容显示区域。                

注意尖端三角形的拉伸

有一个值得注意的问题是，如果.9图是气泡形状，带着一个尖尖的三角形时，如果在图片拉伸时不愿意改变三角形的形状，可以将顶部或左方作拉伸用途的黑色横线切分为两部分，如下图所示。这样做就可以避免.9图对三角形区域也进行拉伸。       

错误做法如下，尖端三角形的角度也改变了。

内边距问题

因为.9图的内容显示区域可拉伸，那么，当黑色横线没有紧贴,9图边缘、而是隔开一段距离时，那隔开的这段距离就是.9图自带的内边距。下图中连接粉红色区域的四条黑线的长度，即内边距大小。

        

而在布局代码中使用.9图时，就不需要再写padding值。如果写了padding属性，会与.9图自带的内边距发生冲突而失效。

外边距问题

在开发中，可能会遇到一个问题，那就是.9图在Android Studio的UI展示区域，明明是设置为了紧贴着边缘顶部区域，为什么运行在真机上查看效果时却是和顶部隔开了一段距离？

• 原因在于.9图会自带一个类似margin的外边距，也即图片和黑色横线之间的距离。

下图中存在的四个黑框即.9图的外边距背景。      

如果想解决这个问题、不要外边距的话，那就需要UE重新裁切出一张新的图片，把图片和黑色横线之间的距离切掉即可。

编译失败问题

在使用.9图做背景时，有时候可能会发生编译失败。

AAPT: error: file failed to compile.

• 其中的原因，很有可能是因为某一边缺少了一条黑色横线，使内容显示的区域没有在.9图中定义出来，导致编译失败。

• 解决的办法是，对黑色横线进行拉伸，使图片四周都出现黑色横线，展示出内容在.9图上的显示区域。

更多技术文章欢迎关注公众号度熊君。