看看全世界的开发者怎么适配iPhone X的“刘海”

点击上方“中兴开发者社区”，关注我们

每天读一篇一线开发者原创好文

以下内容来自品玩

北京时间 9 月 12 日凌晨，苹果在乔布斯剧院发布iPhone X。

为了实现更为安全的面部识别，iPhone X正面的全面屏上方有一条刘海。然而对于开发者来说，适配成了大问题：

这个屏幕上的刘海究竟要怎么适配呀！！！

经过一段时间的沉淀，全世界的开发者们似乎已经找到几种适配刘海全面屏的方法。

首先是纵向上的问题：

纵向上主要是顶部的导航栏、状态栏和底部TabBar的问题。

iPhone X开发尺寸与iPhone 8的宽度一致，在垂直方向上多了145pt，意味着多出20%的垂直空间。

而且多出来的145pt是被刘海切割成异形区域。

于是有人尝试，既然苹果没有把刘海做齐，通过软件把刘海两侧的空白填上不就可以了嘛。

这样是不是就顺眼多了？“Ears”的名称也很贴切吧

然而苹果明确禁止这种做法。

苹果规定：注意内容不要被裁切，建议内容为居中对称已不被圆角或传感器等遮挡，也建议使用系统提供的的元素以及自动布局来构建页面获得更好的适配效果。注意StatusBar的高度，iPhone X的状态栏高度会更高，如果有开发者对NavgationBar的位置是通过固定值进行位置的定位的，建议升级App。

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

苹果给出设计布局的安全区意见是这样的：

也就是说，开发者还要保证设计布局能够填充整个屏幕，而核心内容又不能被设备的大圆角、传感器(齐刘海)、以及底部的Home Indicator遮挡。

如果没有适配iPhone X，就会变成这样的：

图片来源：奇点开发者@图拉鼎（注：新版奇点已适配）

另一款成功适配的APP效果图是这样的：

图片来源：四叶新媒体联合创始人微博@Saic

当然，比起纵向的问题，横向的适配问题更大，槽点也更多。

首先是苹果iOS自带的Safari在横屏状态下网页两侧会填充一定的空白，变成这样的：

与此对应，苹果给出的横屏状态下的安全区域是这样的：

好吧，既然要加载空白区域，那滚动的时候滚动条该怎么“优雅”的穿过刘海？

苹果的Safari滚动条在横屏状态下穿过刘海的时候变成贪吃蛇了？

还有这样的：

当然，这些都是苹果不允许的。

还有开发者把功能键的弹出放在刘海那一侧，由于也是黑色的背景，看起来更有一体感了：

图片来源Twitter: 0therPlanet

而横屏打游戏的时候，操作界面被刘海遮挡。所以操作功能键需要放在苹果建议的安全区域，其他的背景图用来填充空白。

也就是说，按照苹果的开发指南，无论横屏还是竖屏，要适配iPhone X这样有刘海的屏幕，除了审美需（被）要（迫）提（适）高（应），APP 重要的功能键、TabBar 等需要放在苹果建议的安全区域内，其他的地方用APP背景页或者状态栏填充。

而如果想把男女朋友的照片设为锁屏壁纸的话，需要找一张人物稍微“居中”或者“居下”的照片。

否则会变成这样：

还有一些需要我们的审美去适应的情况，尤其是全屏模式下浏览照片、看视频以及Safari阅读模式。

比如这样的：

图片来源：微博@Jonny

iPhone X刘海里的Face ID虽然很强大，但是这样的异形屏真是难为开发者和用户了。

哦，对了关于开头那个王者荣耀的吐槽，中关村在线的评测已经给出了答案。

腾讯官方的适配方法是这样的：