iPhone 开发中的屏幕适配问题总结
前言
随着iPhone的屏幕越来越多,各种尺寸让开发也需要跟Android一样,要做屏幕适配了。在开发过程中,跟设计师经常因为调整像素而争吵。为了解决这种问题,我写下此文,让开发跟设计可以欢乐的做朋友了。
此文将从以下几个方面出发,解决问题。
iPhone的几种屏幕
iPhone屏幕中的概念
设计稿到代码的过程
结合设计原则给出具体的实现方案
iPhone的几种屏幕
以上两张图完全介绍了现在所有的iPhone的屏幕。包括即将出现的iphone se它也是4寸屏。
从第一张图中发现,只有6p是3x的图,其余屏幕都是2x图。再次解释一下为什么6p是3x图。因为6p的实际像素是1080 * 1920. 1080 / 414 = 2.6。 但是让设计出一张2.6x的图,那岂不是要疯了。所以,苹果为了方面开发者,做出了3x的标准。然后苹果会自动给你缩放。详见第二张图。
iPhone屏幕中的概念
-
point(点)
这个点是一个逻辑概念,是脱离屏幕而存在的。开发在写代码的时候,就用point来确定位置。
在2x模式下, 1point = 2pixel。
在3x模式下, 1point = 3pixel。
-
pixel (像素)
像素是显示成像的最小单位。个人理解。
设计给的图的标注,都是按照像素标的。 -
ppi (pixel per inch)
解释一下就是每英寸的像素数量。ppi越高,说明屏幕越精细。
-
inch
其实这个概念是最好理解的。直译就是英寸。是屏幕的物理单位。但是
这个确是肉眼最直观的单位,上面说的3种概念,你都不能用肉眼看出来。例如,他说靠左了,那么它的参照物一定是整个屏幕的,这种直观的感觉都可以统一到屏幕的实际大小上来。而且,设计在拿着手机看效果的时候,给他直观的感觉也是以inch论的。1 inch = 2.54cm
设计稿到代码的过程
设计稿 --->代码
从一个完整的设计稿,到代码。我们需要以下两种元素的具体标注。
-
图
其实图片,我们需要设计给出对应屏幕模式的图片。2x的,需要在正常像素基础上乘以2。 3x的,需要在正常像素基础上乘以3。
-
frame,间距
各种元素间需要间距,元素自身需要frame。设计给的稿的标注一般都是按照像素标注的。而在苹果中的单位是point。所以我们要进行一次换算。如果设计按照2x模式给的标注。那么我们在用的时候就要除以2。按照3x(6p)模式给的标注,那我们得除3,得出相应的point然后再写入代码。
理想状态是设计针对各种模式(2x , 3x),各种屏幕(3.5,4,4.7,5.5)分别做出设计稿。这样就完美了。其实这种方案不仅仅给设计带来的大量的工作量,而对开发也带来了很大的工作量。现在基本的做法都是,设计会针对一种主流的屏幕给出设计稿,然后开发按照上面的说换算完毕后,进行编码。在然后根据具体运行效果做出微调。其实在开发过程中,这些微调是最耗费工时的。
问题来源,设计会根据看到的实际运行效果进行微调。
那么微调,是靠什么感知的呢?当然是肉眼观察。当然,设计的眼睛都可以达到像素级。不过,他们靠的还是感知。
下面我举一个例子:
在屏幕两个View间距10point。那么这个10point,在2x与3x下究竟会不会有很大差别呢?
按照常理推断。10point 在2x下对应 20 pixel。在3x 对应30 pixel。 这样对比的话那简直差别太大了。
其实如果代码里写就是10,不针对2x,3x做区分。那他的效果是啥样的。
既然设计靠肉眼去看,那么咱们就统一换算乘inch,这种最接近肉眼的单位。
2x:
10 * 2 / 326 = 0.061
3x:
10 * 3 / 1.15 * 401 = 0.065 (1.15是上面苹果给你缩放的倍数)
综上例子说明,同样10p , 在肉眼看起来其实没有多大差别。
结合设计原则给出具体的实现方案
在上面已经提到了,如果设计针对2x给的标注,你完全可以用在3x模式下,基本看不出来。但是这里面有一个潜在的问题。
我把设计的排版布局总结为:
横向直排;也就是从左到右进行布局。
两头挤;也就是先定死两边的间距,然后往中间布局元素。
如果设计给的图是从左向右的布局,只是看两者间距。按照上述是没有问题的。
但是,如果设计是从两头往中间布局,先定死2边间距,然后再按照屏幕的宽适当调整元素间布局,这样就麻烦了。因为元素的个数是定死的,屏幕的宽是不一样的。这就导致了不同的屏幕宽度,元素的间距或者元素大小就要做适配了。
如果真的出现了从两头往中间布局的设计方案,就应该使用autolayout了。把元素的位置根据屏幕比例定死。比如3个元素,第一个元素就在屏幕的1/3处,第二个就在3/4,第三个就在4/5,这样,这些定死了。他们的间距就相应的定死了。这样的结果是,各种屏幕元素间的间距肯定是不一样的。所以,这个要跟设计在实际过程中探讨他们的设计方案。优先选用横向直排。其实选用两头挤。
在插一句,其实屏幕大了,应该是在能看清的前提下,一行多放点元素。而不是说各种屏幕都放同样多的元素。
比如说:
3.5inch 放10个元素
4inch 也放10个
5.5inch 也放10个
这种,我感觉应该是不合理的。5.5inch就应该放20个,或者更多。