苹果如何在多尺寸屏中适配？

本文的标题是个问句，但是在iOS实际开发中程序员即使不知道这个问题答案也能开发，因为设计师会切出@1x，@2x，@3x这几种图片，开发者只需要放到对应位置即可。本文从问句出发，从基础概念和苹果的策略等方面进行解读，探究原理，体会优美。

基础概念

在进入优美设计之前，我们应该了解一些基础概念

像素

像素通俗来理解就是，组成图像的最小单位。把一张图片放大，就会发现很多小块，这些就是像素，需要注意的事像素虽然是组成图像的最小单位，但是像素的大小不是固定的，不同的显示设备上的像素大小可能不同。

分辨率

关于分辨率，主要会说到两种分辨率，一种是屏幕分辨率，另外一种是图像分辨率

• 屏幕分辨率：
  就用目前我用的显示器来举例，

  
  
  
  
  

  可以看到屏幕分辨率为3840 x 2160，那么它代表屏幕在水平方向有3840个像素点，垂直方向有2160个像素点。
  那么调整屏幕分辨率又是什么意思呢?

  
  
  
  
  通过上图可以看到，从左到右分辨率在不断增大，对于屏幕来说，分辨率越大，像素点越多，但是尺寸不变，从而像素点的大小就会变小（这也是刚刚提到的像素大小不是固定的）。这里还有一个有意思的地方，如果分辨率越大，图像就会相对变小，那么我们试着从原理上来解读下：分辨率变大，像素点变小，图像变小，说明图像的单位是像素。这里看上去是顺理成章的推理，其实是为后文讲述适配策略做铺垫。

• 图片分辨率
  查看图片的属性的时候，我们会发现有属性是分辨率大小，就拿前文中的图片来说
  

  
  
  可以看到image size是759 x 496 pixels，它代表这张图片显示在屏幕上，需要占据水平方向759个像素点，垂直方向的496个像素点。我们可以手动改变图片的像素，它就会进行大小视觉变化，原理上是因为占据的像素点变多了。如果只是对图片进行放大和缩小动画呢，放大到一定程度的时候竟然能看到像素块，这应该如何解释？这种操作其实是通过像素补充算法进行的，和我们之前所讲述的原理不冲突。此外还补充一点，有研究称超过300ppi（pixel per inch，即每英寸的像素点）的时候，人眼无法识别像素点。这就是为什么只能放大到一定程度我们才能看到像素点。

苹果的设备历史

现在即将进入最精彩的设计部分，但是我们得循序渐进，先来看看苹果设备变更历史

iphone横空出世

第一代产品是初代的iphone，它的屏幕分辨率是320 x 480

iphone 3 & iphone 3Gs

与初代分辨率保持不变，依然是320 x 480

iphone 4 & iphone 4s

在这个阶段苹果推出了Retina屏幕（视网膜屏幕），将屏幕分辨率大大提高，变为了原来的两倍，也就是640 x 960，但是物理尺寸是没有变的。然后，问题也相继而来

• 分辨率不同

  • 问题
    如果原来的APP运行在新的机型上面，将无法正常显示，因为之前的设计方式是按照像素来进行约束的，例如一个控件的frame是CGRectMake(20, 20, 100, 100)，就是说位于坐标轴x = 20，y = 20的位置，自身大小为100 x 100（单位是像素），那么在新的机型上面位置和大小均会减半，原因是因为屏幕大小没变，分辨率提高，导致像素大小变小，所以原本的x = 20所在的位置在物理上来说只有之前的一半，其他y，大小同理。

  • 解决方案
    这只是第一次机型屏幕尺寸改变，之后肯定还会推出更多不同尺寸的机型，长远考虑，苹果设计出了一劳永逸的方法，就是为开发者引入了一个新的概念——Point，从此以后，iOS设备上的长度单位从像素变成了点，来看看点的定义：

    • 在初代iphone & iphone 3 & iphone 3Gs中：1 point = 1 pixel
    • 而在iphone 4 & iphone 4s中：1 point = 2 pixel

    那么我们可以认为以上两种的屏幕均为320 x 480（单位为Point）

• 图片如何处理
  • 问题
    分辨率的问题通过Point概念引入得以解决，由于新旧机型使用point作为统一单位，也就是说在旧的机型上面本来的元素，在新的机型上面将会拉伸，这里的拉伸理解为分辨率翻倍，才能保证物理视觉上大小是一样的。那么对于颜色和文字等这些矢量元素来说，拉伸是不影响的。但是对于图片这种非矢量元素，如果拉伸，可能会导致在新的机型上看起来比较模糊。
  • 解决方案
    苹果要求开发者对图片进行适配，具体的方案就是每张图片都要求有同一内容的不同分辨率版本，例如一张图片的大小为20 x 20（单位为point），需要传入一张20 x 20（单位为pixel），和一张40 x 40（单位为pixel）。并且苹果规定使用规范的名字来区分它们，旧设备需要的图片名字不变，新设备需要的图片在名字后面加上@2x，代表着在该设备上1 point = 2 pixel。这样一来，APP执行的时候，如果是新的机型，首先会使用带有@2x的图片，如果没有，才会使用不带@2x的图片。所以，如果开发者按照规定传入规范的图片，那么APP就能在不同设备上都具有良好的显示。

iphone 5 & iphone 5s

2012年，苹果发布了iphone 5，iphone 5的物理尺寸变成了320 x 568，回顾之前的物理尺寸，是320 x 480，在改变上来说只是变长了88。之前的APP依然是可以在iphone 5上运行，只不过上下将会分别留出44的黑色区域。苹果规定，如果APP设置了iphone 5的启动图片，那么就代表适配了iphone 5，这时候上下部分不变，将中间部分拉伸，黑色部分就没有了。

iphone 6 & iphone 6s

2014年，苹果又推出了iphoen 6，物理尺寸变成了375 x 667

iphone 6p

在iphone 6诞生之后不久，苹果推出了第一款plus级别的iphone 6plus，其屏幕物理尺寸为414 x 736，由于分辨率提高很多，所以苹果在对图片的适配方面加上了@3x的规定，用于在iphone 6plus上显示的图片。到了这个时候，屏幕物理尺寸已经有很多种了

iphone 5之前	iphone 5/5s	iphone 6/6s	iphone 6plus
320 x 480	320 x 568	375 x 667	414 x 736

• 问题
  那么如果使用之前的绝对布局，就是直接写死控件的位置，x、y为多少直接定好，这种方式的布局可能会导致在不同物理尺寸的屏幕上显示效果不尽相同。
• 解决方案
  苹果早在iOS 6的时候就推出了一款新的技术，那就是AutoLayout。这是一种全新的布局模式，和原来直接设定控件位置不同，这种布局指定控件之间的相对位置，约束他们之间的关系。这种布局模式可以很好适应不同尺寸的屏幕。关于该技术的使用这里不做详细说明，有兴趣的可以查阅学习。

iphone 7 & iphone 7plus

2016年，iphone 7 和 iphone 7plus推出，其屏幕的物理尺寸和iphone 6 以及 iphone 6plus差不多

iphone 8 & iphone 8plus

2017年，iphone 8 和iphone 8plus推出，物理尺寸依然变化不大

iphone X

iphone X是苹果划时代的产品，开启了全面屏的时代，他的物理尺寸为375 x 812，由于分辨率很高，对于iphone X，也应该使用@3x规格的图片。除此之外，由于iphone X的特别，所以我们还在其他地方进行适配。之前的屏幕都是直角，而iphone X则是圆角，再加上顶部摄像头所在的“刘海”位置，以及底部取代了home键的白色横条，所以安全域不在是满屏，而是上下各自切掉一部分。上下所切掉的部分分别为44和33，那么我们重新计算下安全域的高度，812 - 44 - 33 = 735。实际上相比iphone 6/6s/7/8，宽度相同，只是高度上高了67。相比当年iphone 5 到iphone 6的过渡，iphone X对设计师来说，影响不是很大。