iPhone X 适配(全)

iPhone X 刘海机于9月13日发布，给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑，iPhone X 怎么适配？我们 App 的脑袋会不会也长一刘海出来？Tabbar 会不会被圆角？先来看一下美团 App 的表现：

图 1.1 启动时的 App 表现           图 1.2 下拉刷新之后的表现

图 1.3 搜索的表现          图 1.4 “我的Tab”表现

在图1.1中乍一看表现还不错，可是在图1.2中，下拉刷新之后，我们的导航栏还是被刘海挡住了。搜索也中枪，搜索首页没有办法取消，“热门搜索区域”也多出来一块儿空白。另外，“我的Tab”页部分如图1.3、图1.4所示，导航栏回不去了，右上角的三个UIBarButtonItem也不见了。其他还有很多UI上的Bug，等着我们去一一发现并修改。

针对可能出现的问题，苹果在 developer.apple.com 上给出了一些建议。其中一个是 HIG (Human Interface Guideline)。另外 WWDC 会议官方 App 的作者，也给出了适配时的一些经验。

我们来看看他们是怎么说的。

HIG部分

首先看一下各个机型尺寸的变化。

图 2.1 各版本 iPhone 的尺寸

下图是 iPhone X 对比其他机型的变化部分。iPhone X 和 iPhone 8 的宽度一致，在垂直方向上多了145pt，这就意味着首页可以展示更多的内容，多出来的这20%的垂直空间，也许可以挂上更高价值的运营位。

图2.2 iPhone X 和其他设备的尺寸对比

布局

注意图2.2蓝色部分，你会发现这些都算在了展示内容的区域。所以我们在设计的时候，要避免内容被圆角、刘海给挡住。Like this：

图 2.3 CGRectMake(0,0,100,100)

iPhone X 的坐标系统以及能显示内容的区域如下图所示：

图 2.4 iPhone X 的显示区域

Status Bar

iPhone X 上的 StatusBar 高度比之前的 iPhone 高一些，也就是说，我们如果写死20pt高度的 frame 布局，都要大面积修(tu)改(xue)。在 iPhone X 上，通过打印 [[UIApplication sharedApplication] statusBarFrame] 可以看到，高度是44pt。

图 2.5 iPhone X 的状态栏高度

"如果你的 App 是隐藏 StatusBar 的，建议重新考虑。iPhone X 为用户在垂直空间上提供了更多展示余地，且状态栏中也包含了用户需要知道的信息，除非能通过隐藏状态栏带给用户额外的价值，否则苹果建议大家将状态栏还给用户。"

另外还有一点，用户在使用 iPhone X 打电话的时候，StatusBar 的高度也不会发生变化了。

屏幕底部