为 iPhone X 构建 App

只需将你的 App 按照 iOS 11 SDK 进行修改 就可以充分利用 iPhone X 搭载的超视网膜显示屏 如果你的 App 主要基于标准 UIKit 控件 并且使用 Auto Layout 那么接下来的任务就会很轻松 因为绝大多数工作都会由 UIKit 为你代劳

如果你使用自定义控件或没有使用 Auto Layout 或者 你的 App 是一款自定义全屏 App 像很多游戏那样 你也不必担心 虽然你确实有一些工作要做 但这之中并没有难点 而且我们有很多内建支持工具 比如全新推出的 Safe Area Layout Guide 无论如何 你都需要全面测试你的 App 尤其是在横向模式下 以确保万无一失

最新版 Xcode 包含支持 iPhone X 的 Simulator 让你可以你改变绝大多数的布局 尤其是调整 关于 Safe Area 的布局 对于一些 App 比如使用 Metal 或是前置摄像头等硬件功能的 App 最好在实际设备上进行测试 让我们来看看全新的 iPhone X Simulator 同其他 iPhone 或 iPad Simulator 一样 你可以直接使用系统内置的 App 这样 你就可以很好地通过实例 观察不同的 UIKit 组件在 iPhone X 上的表现 比如 文件 App 就展示了很多最新的 iOS 11 API 的实际应用 比如一体式搜索栏和大号导航栏标题 别忘了 你还可以在 Simulator 中 登录 iCloud 帐户 并访问你的 iCloud Drive 这样 你就可以方便地将文件 或者照片等测试文件传输到 Simulator 中 另一个不错的例子是通讯录 App 它展示了列表视图如何在 iPhone X 上呈现 一定要将 Simulator 旋转至横向模式 这样就可以看到一些行为 比如区域 Header 横跨屏幕 而表格元素则遵照 Safe Area 的原则 保持缩进 我们稍后还会讲到表格视图 接下来 我们来看看我负责的一款 App WWDC 我花了一点时间 让它适配 iPhone X 我想分享一下 我遇到的有关 布局的问题 以及我的解决方案 WWDC 是一款 典型的真实存在的 App 它已经面世了很多年 这些年来有很多工程师都 参与了它的编写 它既有很多标准控件和 Auto Layout 也有自定义视图 App 中较老的部分甚至使用了手动布局 我会用这款 App 来强调三处 需要针对 iPhone X 进行适配的地方 首先 我在 Xcode 9 中打开工程文件 将 Base SDK 设为 iOS 11 这样 我们就可以以原生分辨率运行 App 了 当你设置你的 App 时 如果你发现 App 没有在完整 iPhone X 分辨率下运行 请再次检查一下你是否配置了 Launch Storyboard 因为也需要设置这一部分 好的 我们的初始视图是 Videos 标签页 看起来还不错 这些全部使用今年的新代码 使用了遵循 Auto Layout 的 UICollectionView 以及标准导航栏和工具栏控件 所以当然绝大多数界面的 布局都没问题 因为 UIKit 为我代劳了大部分工作 有一个地方没有使用 Auto Layout 那就是 News 标签页 我们来看一下 其实这个视图看起来还不错 尽管所有的 UI 都是手动布局 尽管我们没有直接使用 Auto Layout 负责布局的代码也会注意到 布局边距嵌入 UIKit 便会自动调整布局边距的嵌入 以遵循 Safe Area 我遇到的第一个问题 就是在 News 标签页 中的全屏照片查看器 尽管这个视图使用 Auto Layout 但页面控件的位置太靠下了 已经和主屏幕指示器重叠到了一起 这里问题在于页面控件的底部约束 是与父视图相关的 也就是主屏幕指示器后面的整个屏幕 所以 我们不应该根据父视图进行约束 而应该将页面控件 按照底部的 Safe Area Layout Guide 进行约束 现在就来改一下

在 Xcode 中打开这个界面 在我调整约束之前 我需要先在这个 xib 文件中开启 Safe Area Layout Guide Xcode 9 之前的版本创建的 Storyboard 和 xib 文件 不会自动将 Safe Area Layout Guide 功能打开 需要进入文档检查器 勾选“Use Safe Area Layout Guides”复选框 需要注意一点是 对于 iOS Storyboard 打开这项功能将会自动升级 绑定到场景的顶部和底部 Layout Guide 约束 Leading Edge 以及 Trailing Edge 所以勾选这项后一定要检查测试 Auto Layout 的约束

现在 我可以选择页面控件的底部约束 看一下这个约束的属性检查器 这里我们看到约束与父视图的 底边相连 这就是为什么页面控件非常靠下的原因 如果我们让这个约束 不与父视图相连 而是与 Safe Area 相连 那么在 iPhone X 上 页面控件 就会自动位于主屏幕指示器之上

当我构建 运行 页面控件就会处于正确位置 在竖向模式和横向模式都有效 接下来 看看我遇到的第二个问题 问题出在 Videos 标签页 同样 看上去还不错 但如果我调出搜索栏 嗯 看起来不太对 让我们来和通讯录 App 对比一下 有些东西看起来不太对 搜索栏的背景颜色不太对 大小也不太对 如果我旋转到横向模式 可以看到 这里也有些不太对 搜索栏和“Cancel”按钮都被屏幕的 圆角裁掉了一部分 这个典型的例子说明注意 Safe Area 的存在至关重要 对于这个搜索栏 WWDC 所做的 是直接显示一个 UI 搜索控制器 而在 iOS 11 中 搜索栏可以集成到导航栏中 也就可以给出正确的呈现方式 就像通讯录中的那样 让我们看一下代码做一些改动

这就是搜索栏的代码部分 我要做两处改动 第一步 对于这个视图控制器 不显示搜索控制器 而是把它交给 UINavigationItem 第二步 我要将搜索控制器的“isActive”属性设置为“true” 这样会使导航栏 激活搜索控制器并开始编辑 注意 我们可以使用“Availability Support”这项功能 让设置仅对 iOS 11 有效 而在旧版本的 iOS 上 保留现有的行为 让我们构建运行 看看效果如何 好多了 这看起来 像是 iOS 11 上 搜索栏的正确样式了 横向模式呢 棒极了 现在 搜索栏正好在 Safe Area 里 而这全都是由导航栏 自动帮我们处理的 如果你的 UI 中有搜索栏和导航栏 你一定要在 iOS 11 中做类似的改动

现在我们来看看 App 中第三处 需要改进的地方 这是 Schedule 标签页 我们使用来 UITableView 布局在竖向模式下看起来不错 虽说这里搜索栏的样式 也不太对 这个搜索栏恰好是作为 Header 视图插入到表格视图的 但我们可以像刚才一样改动 也就是让搜索栏集成到导航栏中 我要将搜索控制器 设为视图控制器的导航项 再设置合适的活动状态 我们来构建并运行一下 看起来不错 如果我旋转到横向模式 搜索栏看起来不错 而且几乎所有 UI 看上去都遵照 Safe Area 排布 但仔细观察 我们自定义了一个背景颜色 用在表格区域的 Header 这样似乎有问题 颜色应该一直延伸到屏幕边缘 就像通讯录 App 里那样 来看一下代码 就会发现 App 将背景颜色 设成了 Header 视图的 contentView 这看上去还挺合理的 事实上 在除 iPhone X 之外的 iPhone 上都没问题 那问题出在哪里呢 要知道发生了什么 我们要深入细节 看看 iPhone X 上 表格视图是如何排布元素的 为帮助理解 让我们从 Xcode 里非常实用的 View Hierarchy Debugger 入手 这就是我们刚才看到的视图 在右下角 我可以调节可见视图范围 来保留表格视图 并隐藏其他视图 表格视图的尺寸为整个屏幕 现在 我要调整可见范围 来显示表格视图的单元格 请注意单元格的边缘是如何延伸的 我来选中高亮一个单元格 再将 Safe Area 覆盖在这个视图上 来表示它的位置 现在 我要继续扩展可见范围 把更多视图显示出来

可以看到单元格的内容视图 自动嵌入在 Safe Area 中 这就会导致 虽然表格单元格的大小 横跨整个屏幕 单元格的内容视图 却是在 Safe Area 中的

我来高亮一下刚才提到的 一些视图 但现在这个界面有一点混乱 所以 我们来简化一下并且加上标记

默认情况下 表格单元格会嵌入自己的内容视图 这样就能位于 Safe Area 以内 这种嵌入行为是你可以控制的 Xcode 中 你可以勾选 “Content View”的“Insets To Safe Area”复选框 代码中也有对应的属性可以设置

如果不勾选复选框 内容视图就不会嵌入 而是会跨越整个屏幕

最后还有一点 无论内容视图的嵌入如何设置 内容视图的布局边距 始终默认与 Safe Area 关联 同内容视图嵌入类似 也有一些属性可以让你控制 布局边距的行为 关于这一点 以及其他与边距相关的选项更多细节可以查阅文档 以及 WWDC 视频 我在最后也会介绍

好的 我们已经知道表格视图是如何 遵照 Safe Area 排布单元格的了 让我们回到代码 来设置 Header 视图 的背景颜色 可以看到 我们只针对内容视图进行设置 而内容视图已经嵌入 Safe Area 了

此时 我们有几种办法 来解决这个问题 其中之一就是 禁用表格视图默认将 内容视图嵌入 Safe Area 的行为 但这样一来也会影响 内容视图里的其他内容 也无法使用这项挺有用的默认行为 相反 这里最好的解决办法 是设定背景视图的背景颜色 这与嵌入的内容视图不同 而是可以横跨整个单元格 且不受任何 Safe Area 嵌入的影响

如此改动后 我们构建运行 就从这样 Header 的背景颜色 不横跨屏幕 到这样 色块横跨整个表格 但内容视图完全不变 看上去好多了

这就是我在为 iPhone X 适配 WWDC 时 遇到的三个问题示例 修复起来不难 基本都与 横屏视图有关 我再提几点注意事项 遵循 iOS 11 SDK 并且使用 Launch Storyboard 可以让你的 App 使用原生全分辨率 虽然竖向模式下也可能会遇到一些问题 但绝大多数问题都出在横向模式 所以 一定要旋转一下界面并测试你的 UI 既要测试向左旋转 也要测试向右旋转 遵循 Safe Area 可以避免大多数问题 Auto Layout 和 safeAreaLayoutGuides 可以自动解决很多排版方面的问题 但如果你要用手动布局 你也可以使用 Safe Area 嵌入 自由计算所需的布局数据 这些信息使用 UIView 类即可访问 还有一点很重要 就是不要让元素 干扰屏幕底部的主屏幕指示器 欲知关于主屏幕指示器更多详情 以及为 iPhone X 进行设计的其他方面 一定要观看“Designing for iPhone X”这个视频 其中有很多 至关重要的细节 可以帮你的 App 适配新的超视网膜显示屏 WWDC 2017 也有一些很关键的视频 比如介绍了 Safe Area Layout Guide 探讨了处理手势的重要变动 以及如何利用 iOS 11 的新特性 比如对一体式搜索栏的支持 等等 当然 你也可以访问 developer.apple.com 或者开发者论坛 以获取更多信息 谢谢