16、iOS屏幕等比例适配

1、基础概念

1.1 分辨率相关的概念

• 点(Points):
  是iOS开发中引入的抽象单位，称作点。开发过程中所有基于坐标系的绘制都是以point作为单位，在iPhone 2G,3G,3GS的年代，point 和屏幕上的像素是完全一一对应的，即 320 * 480 (points), 也是 320 * 480 (pixels)
• 渲染像素 （Rendered Pixels）：
  Rendered Pixels: 渲染像素， 以 point 为单位的绘制最终都会渲染成 pixels，这个过程被称为光栅化。基于 point 的坐标系乘以比例因子可以得到基于像素的坐标系，高比例因子会使更多的细节展示，目前的比例因子会是 1x，2x，3x
• 物理像素（Physical Pixels）:
  Physical Pixels: 物理像素，就是设备屏幕实际的像素
• 设备屏幕的物理长度（Physical Device）：
  Physical Device: 设备屏幕的物理长度，使用英寸作为单位。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。实际上会是Physical Pixels的像素值(而不是Rendered Pixels的像素值)会渲染到该屏幕上, 屏幕会有 PPI(pixels-per-inch) 的特性，PPI 的值告诉你每英寸会有多少像素渲染。

如果使用物理像素

来看一下，一个100px的正方形在不同手机下的打开的效果。

iPhone 3GS和iPhone 4的屏幕大小一样，但是iPhone 4的像素密度是iPhone 3GS的2两倍。所以一样100px的正方形，在iPhone 4上看起来像是缩小了一倍。在iPhone 4和iPhone 6上的显示大小是一样的。

如果使用点

00pt的正方形在不同手机下打开的效果是如何的。

1.2 1x、2x、3x的含义

屏幕模式，描述的就是屏幕中一个点有多少个 Rendered Pixels 渲染，对于2倍屏(又称 Retina 显示屏)，会有 2 * 2 = 4 个像素的面积渲染，对于3倍屏(又称 Retina HD 显示屏)，会有 3 * 3 = 9 个像素的面积渲染。

iOS 开发中，所有控件的坐标以及控件大小都是以点为单位的，假如我在屏幕上需要展示一张 20 * 20 (单位：point)大小的图片，那么设计师应该怎么给我图呢？这里就会用到屏幕模式的概念，如果屏幕是 2x，那么就需要提供 40 * 40 (单位: pixel)大小的图片，如果屏幕是 3x，那么就提供 60 * 60 大小的图片。

2x屏幕的设备会自动加载 [email protected] 命名的图片资源，3x屏幕的设备会自动加载 [email protected] 的图片, 现在基本没有 1x屏幕的设备了，可以不用提供这个分辨率的图片了。

2、适配的过程

我们以iPhone 6的例子来看看适配的过程。

2.1 从UI到开发

开发实际使用的单位是pt。而UI给出的视觉稿是以px为单位的。所以，首先需要将px转化成pt。
在这一步，要搞清楚UI给出的视觉稿以什么分辨率作为基准。如果是iPhone 6的640 × 960px，则用@2x作为缩放因子。如果是iPhone 6 Plus的1242 × 2208px（注意，不是1080 × 1920px），则用@3x作为缩放因子。

假设以iPhone 6作为基准，需要绘制一个40px的按钮。以@2x进行缩放，开发以20pt进行绘制。

2.2 适配规则

等比缩放

iPhone 5和iPhone 6/7/8 和 iPhone 6/7/8 Plus之间虽然屏幕尺寸变大了，但是，其比例都是16:9。

通过弹性放大的方式将其等比的放大来适应屏幕的变化。

可以看到，不同的屏幕尺寸不一样，可是显示的内容却是一致的。

变大后的失真的问题

因为图标通常都是位图。所以不可以避免的，经过拉大后图标会出现失真的问题。

为此iPhone提供了一套解决方案。为不同分辨率的设备提供不同分辨率的图标。iPhone 3GS~iPhoneX有着三种不同的缩放因子，根据不同的缩放因子，我们需要提供三种分辨率的图标：@1x/@2x/@3x。

UI以[email protected]/[email protected]/[email protected]为命名，程序自动根据不同的屏幕使用不同的icon图标。

适配基础规则

文字流式（fluid）

屏幕变大时，保持文字大小不变，随着屏幕变大，横向拉宽文字的显示区域。

为什么要保持文字大小不变
字体不是越大越好的。通过测试，iPhone的字体大概在20px~36px时（排除某些特殊的设计），会得到比较良好的阅读体验。保持字体大小在一定范围内，就是为了保证阅读起来比较舒服。

控件弹性（flexible）

屏幕变大时，保持控件大小不变，随着屏幕的变大，横向调整控件的相对位置。

相比于将控件固定在某个位置上，这种布局能更好地保持控件在页面上的平衡。同时，也能保证屏幕变大的时候，控件不会因为被拉大而失真。

图片等比缩放（scale）

对于图片，屏幕变大时，没办法只拉伸横向的，这样会导致图片的比例失调。所以，对于图片，要保证等比放大。也就是说，在宽度跟随屏幕变大的时候，高度也等比地变大。

图片相对于图标来说，有更高的像素，所以拉大图片失真的效果并不明显。

举例

3、xib等比缩放适配

3.1 xib构建的界面约束采用百分比布局布局

设置宽度

设置相对于容器宽度的百分比

固定宽高比,设定其 Aspect Ratio

设置view与父容器边距

4、通过代码的方式控制