iOS屏幕适配(续)

上一篇博客总结了iOS屏幕适配的若干技巧,本文再补充几点别的方面

设计图

一般会先由美工做出界面的设计图,然后开发再去实现。上一篇博客说的主要是,开发怎么实现的问题。实际上从设计图这个环节,就需要开始考虑界面适配的问题。主要是2点:

1、出几张图

如果以iPhone6为基准出设计图的话,一般很难完美地适配到iPhone4,5和6P上,因为屏幕尺寸差异很大。一般在6上摆得很紧凑好看,在4和5上就会摆不下(溢出屏幕),在6P上则会有比较大的空隙

通常有几种办法:

设计元素的位置和大小,不用具体的数值,而是使用百分比,这样在每种屏幕上会适配。但是通常这只是理想情况,因为4种屏幕的宽高比都不一样,必然会出现拉伸的情况;可能在4上的显示区域和点击区域都会非常小;而且也难以达到最佳视觉效果

尽量考虑流式布局,比如瀑布流,滚动页面等,这样由于页面可滚动,通常不会出现太大的问题。相比之下,把显示区域限制在一个屏幕里,就容易出问题

最完美的办法,出4张设计图,尺寸用具体数值而不是百分比。这种做法可以在每个屏幕上达到最佳效果。当然设计和开发的工作量也是最大的

2、点和分辨率的关系

iOS在开发的时候,用的单位是point,可是一般只有开发人员才理解这个概念,设计师画图时一般都是用分辨率。在4,5,6上都是2X分辨率,而在6P上是3X分辨率。在设计的时候,必须考虑这点

比如说,字体大小在2x屏上是24px,一定要尽量在3x上设计成36px,这样开发不需要做任何判断,字体大小自然会乘以1.5。一个反面的例子,设计图上2x屏是24px,3x屏是28px,这通常就是一个错误的设计。开发只能根据屏幕类型,设置UIFont的大小,而且28还无法被3整除

再比如说,设计一个元素距离左边距在2x屏上是10px,那么在3x屏上就设计成15px,开发也不需要做任何改动

兼容WEB页面

还有一种情况,某些页面需要在APP上实现,同时也要在web页面上实现。我们一开始错误的做法,是要求web页面去“精确”地实现APP的设计图。实际上这是不可能的,因为2点:

1、WEB页面使用的CSS布局方法,跟iOS界面开发的思路有很大差异,在实现上会有问题

2、WEB页面要面对的手机屏幕尺寸更多,无论是设计还是开发,要精确地匹配N种屏幕,根本不可能

所以,正确的做法,是针对WEB页面再出一张设计图,其中的尺寸用百分比决定:

技术分享

如上图,在APP设计图里可以精确确定每个单元格的宽度,而在WEB里,应该指定每个单元格占屏幕宽度的50%。甚至,在WEB上应该用响应式布局来处理尺寸差异巨大的屏幕,不过这是另一个话题,不延伸了

UIFont到底有多大

这个是我们试错试出来的,其实非常简单,设置

[UIFont systemFontOfSize:16]

这个字体在2x屏上就是32px,在3x屏上会自然变成48px,非常方便

同理,设置一个UIView的frame为

CGRectMake(0, 0, 100, 100);

在2x屏上是200px * 200px的矩形,在3x屏上是300px * 300px的矩形

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。