iPhone 开发中的屏幕适配问题总结

iPhone 开发中的屏幕适配问题总结

前言

随着iPhone的屏幕越来越多，各种尺寸让开发也需要跟Android一样，要做屏幕适配了。在开发过程中，跟设计师经常因为调整像素而争吵。为了解决这种问题，我写下此文，让开发跟设计可以欢乐的做朋友了。

此文将从以下几个方面出发，解决问题。

1. iPhone的几种屏幕

2. iPhone屏幕中的概念

3. 设计稿到代码的过程

4. 结合设计原则给出具体的实现方案

iPhone的几种屏幕

iphone 尺寸

iphone 尺寸进化

以上两张图完全介绍了现在所有的iPhone的屏幕。包括即将出现的iphone se它也是4寸屏。

从第一张图中发现，只有6p是3x的图，其余屏幕都是2x图。再次解释一下为什么6p是3x图。因为6p的实际像素是1080 * 1920. 1080 / 414 = 2.6。 但是让设计出一张2.6x的图，那岂不是要疯了。所以，苹果为了方面开发者，做出了3x的标准。然后苹果会自动给你缩放。详见第二张图。

iPhone屏幕中的概念

1. point（点）

   这个点是一个逻辑概念，是脱离屏幕而存在的。开发在写代码的时候，就用point来确定位置。

   在2x模式下， 1point = 2pixel。

   在3x模式下， 1point = 3pixel。

2. pixel （像素）

   像素是显示成像的最小单位。个人理解。
   设计给的图的标注，都是按照像素标的。

3. ppi （pixel per inch）

   解释一下就是每英寸的像素数量。ppi越高，说明屏幕越精细。

4. inch

   其实这个概念是最好理解的。直译就是英寸。是屏幕的物理单位。但是
   这个确是肉眼最直观的单位，上面说的3种概念，你都不能用肉眼看出来。例如，他说靠左了，那么它的参照物一定是整个屏幕的，这种直观的感觉都可以统一到屏幕的实际大小上来。而且，设计在拿着手机看效果的时候，给他直观的感觉也是以inch论的。

   1 inch = 2.54cm

设计稿到代码的过程

设计稿 --->代码
从一个完整的设计稿，到代码。我们需要以下两种元素的具体标注。

1. 图

   其实图片，我们需要设计给出对应屏幕模式的图片。2x的，需要在正常像素基础上乘以2。 3x的，需要在正常像素基础上乘以3。

2. 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模式下，基本看不出来。但是这里面有一个潜在的问题。

我把设计的排版布局总结为：

1. 横向直排；也就是从左到右进行布局。

2. 两头挤；也就是先定死两边的间距，然后往中间布局元素。

如果设计给的图是从左向右的布局，只是看两者间距。按照上述是没有问题的。

但是，如果设计是从两头往中间布局，先定死2边间距，然后再按照屏幕的宽适当调整元素间布局，这样就麻烦了。因为元素的个数是定死的，屏幕的宽是不一样的。这就导致了不同的屏幕宽度，元素的间距或者元素大小就要做适配了。

如果真的出现了从两头往中间布局的设计方案，就应该使用autolayout了。把元素的位置根据屏幕比例定死。比如3个元素，第一个元素就在屏幕的1/3处，第二个就在3/4,第三个就在4/5，这样，这些定死了。他们的间距就相应的定死了。这样的结果是，各种屏幕元素间的间距肯定是不一样的。所以，这个要跟设计在实际过程中探讨他们的设计方案。优先选用横向直排。其实选用两头挤。

在插一句，其实屏幕大了，应该是在能看清的前提下，一行多放点元素。而不是说各种屏幕都放同样多的元素。

比如说：

3.5inch 放10个元素

4inch 也放10个

5.5inch 也放10个

这种，我感觉应该是不合理的。5.5inch就应该放20个，或者更多。