安卓的屏幕尺寸太碎片化了,在做启动图的时候可以使用安卓的.9图来做,还有一个常见的例子就是聊天的气泡,因为每次输入的内容长度不一样,导致需要做自适应。.9图就是在安卓上的一个比较好的自适应方案。

.9图是什么

.9图主要由一个素材图片配合上下左右的宽度为1px的黑线构成。

要求黑线的所有像素颜色为#000000,不可存在灰色、半透明的情况
黑线属于图片素材外的元素,例如图片尺寸为100px*100px,.9图制作完成后图片尺寸应该为102px*102px

黑线的作用

如果图片上覆盖了内容,例如文字气泡中的文字,那么右侧的纵向内容条、底部的横向内容条就相当于规划了文字显示的区域。

如果内容的尺寸超出了图片素材的尺寸,为了做自适应我们需要放大图片素材,横向宽度需要变大时,不会整个拉伸全部图片,而是只拉伸一部分。就是顶部的横向拉伸条区域。

纵向拉伸也是同理。

Sketch中制作

将元素放入一个画板中

调整画布尺寸,分别增加2个像素,将图片元素调整到x=1,y=1的位置上

使用形状工具绘制黑线,需要注意对齐像素

Photoshop中制作

打开图片素材

点击图像->画布大小宽度和高度分别+2

绘制可以对齐像素的黑线

常见错误

在对接开发前可以先检查一下黑线是否成功对齐像素,不存在半透明像素的情况。

照片的最外一圈像素只能是#000000或者是透明。