适配 iPhone X 之异形屏

苹果终于在一年一度的秋季发布会发布了 iPhone 十周年记念版：iPhone X。

iPhone X 是 2014 发布 iPhone 6 以后又一次外形的变化，也是 iPhone 历史上（可能）最大的一次外观变化。

我相信不少开发者和设计师看到 iPhone X 的这个「天猫内定」屏幕的时候内心十分苦恼：该怎么为这个机型作设计和适配？这篇文章从苹果的 iPhone X 开发和设计指南出发，试图来解决这个问题。

须要注意的是，本文不对设计指南完整的、不保留的搬运，而是根据指南和我的实操，作出的结论。完整的内容请自行查看文末连接。若有错误欢迎指出。

先抛数据

iPhone X 采用了 2436*1125 分辨率，拥有一块大约 2.17:1 的屏幕。iPhone X 的屏幕像素比 iPhone 8 高出 145 pt。适配 iPhone X 时并不须要像传闻的同样使用 @4x 的素材，而是继续使用 @3x 便可。苹果鼓励咱们使用 PDF 素材来缩小包大小。

iPhone X 的状态栏高度为 44 pt ，iPhone 8 和 iPhone 8 Plus 和之前同样为 20 点。通过个人测试，X 的 tabbar 比之前高出 43 个点（之前是 40，如今是 83）。须要注意的是，横屏时底部高度为 33 pt。这个数据能够用于底部适配，下文会讨论这个话题。

Safe Area

iOS 11 为屏幕适配引入了一个十分重要的概念：Safe Area.

顾名思义，Safe Area 指的是屏幕内适合放置控件的安全区域。概念太模糊，下面举例说明：

在没有状态栏和其余东西的 iPhone 8 里，Safe Area 是指整个屏幕。

当加入状态栏后，Safe Area 便向下减小了 20 个点。当咱们加入 Navigation 的时候，Safe Area 又减小了 44 个点。同理，咱们再加入 Tabbar 的时候，Safe Area 又减小了 44 个点。

在 iPhone X 里，当咱们没有使用状态栏时，Safe Area 依然和上下边有必定的距离。按照个人测量，此时距离底部应该是 43 个点，距离顶部应该是 44 个点。

同理，加入不一样 Bar 以后，iPhone X 的 Safe Area 都会有相应的变化。

横屏时， iPhone X 的 Safe Area 与左右和下部都有距离。须要注意的时，像 TableView 这样的控件，须要将它的 Cell ContentView 与 Safe Area 对齐，而把 TableView 内容扩展到整个手机。

所以，Auto layout 在 iPhone X 能够有很好的继承。

使用 Safe Area

在 xib 里使用 Safe Area 很简单，打开开关就能够了。而后就能够约定控件与 Safe Area 的约束来完成适配。

而在代码里使用 Safe Area，可使用 view 的 safeAreaLayoutGuide 属性。我找到的一段参考代码：

1 2 3 4 5 6 7

if #available(iOS 11, *) { let guide = view.safeAreaLayoutGuide NSLayoutConstraint.activate([ greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0), guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0) ]) }

顶部设计误区

先讲讲最基本的原则：不要由于 iPhone X 的圆角、「刘海」、底部 Home Button 的影响，把控件挡住，影响用户使用。

若是你的应用使用 Auto Layout，在很大程度上适配起来是没有压力的。

有些朋友在发布会之后苦恼于 iPhone X 奇葩的双耳朵设计，联想到 X 使用了 OLED 屏幕（黑色像素不发光），想到了把应用顶部作平，置于耳朵之下的设计方案。也有开发者为此造了轮子。

然而，根据苹果的设计指南，这类设计是不被容许的。你的应用应该尽量地充满整个屏幕，不能上下留边。

底部设计探讨

昨天我在朋友圈和微博发了这样的两幅图，并询问你们哪一个好。

看了你们的反馈，两种喜欢的人数基本同样（只相差一票）。这是我在给一个 SheetView 作 iPhone X 时候遇到的疑问。带着疑问我把设计指南的视频又从新看了一遍。

先说结论，这里应该是第二种设计是被苹果鼓励的。下面从设计指南中找答案。

设计指南对底部适配有两种说法。一是不要将控件放置在易被误触的 Home 区域，二是鼓励你们把屏幕充满，包括底部。

这里的 SheetView 应该符合哪一种状况呢？仔细听设计指南后发现，两种说法是在讨论不一样状况时候出现的：一是讨论 button 和手势，二是讲到 TableView 时提到。并且，谈到第二种状况时，视频也指出应该把 TableView 和 CollectionView 这类控件充满屏幕。

我又担忧这些还不够证实结论，我又再次看了一下系统层的 AlertSheet 是怎么实现的。答案更支撑了个人结论。

于是，iPhone X 的底部设计既须要考虑避免用户误触，也须要尽量的把内容填充屏幕。我的结论：若是控件不具备内容属性，那不该该覆盖住 Home 区域

结论

以上是我适配 iPhone X 的一些总结。若有错误欢迎及时指出。

更多我的分享，能够瞧瞧我不怎么更新的技术博客：iOSHub。固然还有非技术的ChanTalk。