iOS-屏幕适配（一）

iOS设备的分辨率和尺寸

(参考The Ultimate Guide To iPhone Resolutions)

分辨率

• 点（point）：

  开发过程中，所有基于坐标系的绘制都以point为单位，point和屏幕上的像素是一一对应的

• 渲染像素（Render Pixels）:

  以point为单位绘制最终渲染成pixels，这个过程被称为光栅化，基于point的坐标系乘以比例因子可以得到基于像素的坐标系，高比例因子会使更多的细节展示，目前的比例因子会是1x，2x，3x

• 物理像素（Physical Pixels）：

  设备屏幕实际像素

• 设备屏幕的物理长度（Physical Device）：

  设备的物理长度，使用英寸作为单位，比如iPhone8是4.7英寸，iPhone11是6.1英寸等，这里的数字是指手机屏幕对角线的物理长度，实际上会是Physical Pixels的像素值会渲染到该屏幕，而不是Render Pixels的像素值，屏幕上会有PPI（Pixels-per-inch）的特性，PPI的值告诉你每英寸会有多少像素渲染

iOS 各个设备对应的分辨率

机型	屏幕宽高(point)	渲染像素(pixel)	物理像素(pixel)	屏幕对角线长度(英寸）	屏幕模式
Phone 5,5s,5c,se	320 * 568	640 * 1136	640 * 1136	4(326 PPI)	2x
Phone 6,6s,7,8	375 × 667	750 * 1334	750 * 1334	4.7(326PPI)	2x
Phone 6p,6sp,7p,8p	414 * 736	1242 * 2208	1080 * 1920	5.5(401PPI)	3x
Phone X,Xs,11Pro	375 * 812	1125*2436	1125*2436	5.8(458PPI)	3x
Phone 11,Xr	414*896	828*1792	828*1792	6.1(326PPI)	2x
Phone 11Pro Max,Xs Max	414*896	1242 *2688	1242 *2688	6.5(458PPI)	3x
iPad 4,5,Air,Air2，mini3，mini4	1024×768	2048×1536	2048×1536	9.7(264ppi)	2x
iPad Pro	1366*1024	2732×2048	2732×2048	12.9(264ppi)	2x

屏幕模式（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 大小的图片，且图片的命名需要遵守以下规范:

Standard:<device_modifier>.<filename_extension>
High resolution:@2x<device_modifier>.<filename_extension>
High HD resolution:@3x<device_modifier>.<filename_extension>

ImageName:

图片名字，根据场景命名 device_modifier: 可选，可以是~ipad或者~iphone, 当需要为 iPad 和 iPhone 分别指定一套图时需要加上此字段 filename_extension: 图片后缀名，iOS中使用png图片

例如:
MyImage@2x.png - 2x 显示屏自动加载的图片版本
MyImage@3x.png - 3x 显示屏自动加载的图片版本
MyImage@2x~iphone.png - 2x iPhone 和 iPod touch 显示屏自动加载的图片版本
MyImage@3x~iphone.png - 3x iPhone and iPod 显示屏自动加载的图片版本

---

设计和开发之间的多屏适配问题

现在iPhone的屏幕尺寸也不再单一，那么现在以怎样的流程来进行iOS的研发更合适呢？

基本思路是

• 选择一种尺寸作为设计和开发基准
• 定义一套适配规则，自动适配剩下两种尺寸
• 特殊适配效果给出设计效果

这个问题很早之前在知乎上已经被讨论，附上链接：手机淘宝设计师pigtwo的回答

多屏适配规范

• 文字流式
• 控件弹性
• 图片等比缩放

多屏适配.jpg

控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势

---

关于xib、storyboard、代码

xib和StoryBoard

• xib:每个viewcontroller对应单独的xib，可以更加方便单独管理，项目也方便多人一起开发，改动视图方便，不用全局改动

• StoryBoard:StoryBoard是一个包含了多个xib的文件，管理方便，在StoryBoard中不仅可以看到每个ViewController的布局样式，也可以知道各个ViewController之间的转换关系

• 区别

  • 项目大的话，xib文件过多，不容易统一管理。跳转只能在代码实现，比较混乱
  • StoryBoard适合单独开发并且是中小型项目的时候使用

xib和代码区别

• xib优缺点

  • xib可视化，开发速度快，代码量少
  • 合作开发，彼此阅读困难，无法在git上查看历史改动，容易造成冲突，造成冲突后难以解决，容易产生不必要的commit
  • 性能上，xib加载慢，打开速度也慢，而且会占用app包的体积

• 代码优缺点

  • 灵活，方便，所有的属性都可以通过代码来控制，简单来说，xib能做的，纯代码都能做而他们不能做的，纯代码也能做
  • 对大型项目、团队开发都很友好，尤其是在版本控制，代码管理方面。唯一的缺点就是繁琐以及代码量大

常见布局方式

• 固定间距 ：不同尺寸下，间距总是固定的
• 流式布局 ： 文字、图片等在不同屏幕下流式排布，比如大屏下一行显示四张图片，小屏一行三张，图片尺寸固定
• 比例放大 ：间距、文字大小，图片大小等比例放大
• 保持比值 ：俩个UI元素或者图片的长宽等属性保持一定的比值
• 对齐 ：元素间按某个方向对齐

常见布局屏幕适配的方式

• Autoresizing

• AutoLayou

• VFL

• Masonry

• SnapKit

原文地址