文章阅读时长:大约6分钟
此篇讲一下常见的页面适配规范,即UI稿在不同型号设备上的表现效果。
选择一、全局等比缩放
表现:把UI稿上的所有间隔、字体大小、宽高等,以屏幕宽度为准,按比例放大。
个人评价:简单粗暴,越大屏幕手机越显粗糙,图片等资源容易失真,市场上比较少App用这种。
选择二、按不同控件分别适配
1、图标尺寸固定,间距自适应:
(此适配方式实现成本较低,在各大机型中表现良好,各大App皆有采用。)
如xhs这个例子,中间三个icon的宽度在任何屏幕下都是48,随着屏幕宽度变大,icon间的间隔变大;
2、等比例缩放:
用等比例缩放元素控件的宽高,常用于banner图、视频预览图等。
3、弹性适配:
以xhs搜索列表为例,每行Item分PartA、PartB两个部分,其中间留白部分根据屏幕宽度弹性变化,其他属性如字体、高度等不变。(弹性适配需要注意好PartA右边不要超过PartB左边,现在一般列表型的控件,都用此种适配方式)
4、文字适配:
以具体情况分别适配,如要展示完整文字的就不限定行数、限定行数超过就以省略号结尾的。
-
1、相同的文字,屏幕越宽,行数越少。(代码本质上,就是Text控件左右两边与屏幕固定15间距,超过自动换行)
2、限定行数,如只能展示一行,超出的以...结尾。
5、图片适配:
图片适配的实现代码里,一般有完整展示图片且填满控件、等比缩放展示完整图片、等比缩放填满控件等。
-
1、完整展示图片且填满控件。此适配方式不管是横图还是竖图都能完整展示,缺点是会拉伸图片
-
2、等比缩放展示完整图片。这种适配方式可以让图片完整展示,也不会被拉伸,但是控件没有撑满,有留白现象;
-
3、等比缩放填满控件。这种适配方式能让图片比例正常,也不会留白,但是超出的部分会被截掉。在图片适配中最为常用。