iOS应用适配iPhone X

前言

    苹果公司于2017年9月13日凌晨发布了两款新的手机——iPhon 8与iPhone X。令人惊艳的是，其中iPhone X采用了圆角显示屏和个人觉得奇丑无比的顶部“齐刘海”。感觉乔布斯如果看了这样的设计，气得可能从坟墓里钻出来。

iPhone X.jpg

    开个玩笑，言归正传。
    作为开发者来说，最应该关心的是应用是否在iPhone X上显示正常和适配问题。
    不用我们去测试应用的显示问题，苹果官方就给出了相应的解决方案。
具体地址为：Building Apps for iPhone X

    以下为视频要点总结。

1.全屏视图底部

Snip20170916_6.png

    如图所示，这是一个图片预览功能，可以通过左右滑动来切换图片，底部的PageControl控件显示了当前预览图片的索引。但是，PageControl已经抵住了底部显示的“home键”，这样页面UI显示很不雅观。

    解决方案如下：

Snip20170916_7.png

    切换到视图Xib界面，将PageControl底部自动布局调整为与Safe Area对齐而不再是父视图。

    修改后的效果如下：

Snip20170916_8.png

    这样，界面就明显好看多了。

2.SearchBar

    SearchBar是很多界面搜索时都有的一个控件。其在iPhone X横屏状态下显示如下：

Snip20170916_9.png

    从图片可以看出，SearchBar的左上部和右上部因为圆角屏幕的关系无法完全显示出来。
    当然，苹果不会让用户界面显示这样的UI效果的，解决方案如下：

    这是一个弹出SearchController的方法，为了适配iPhone X界面显示，我们添加了如阴影所示的两行代码。

    适配后的显示效果如下：

Snip20170916_13.png

    这样显示就好看多了，再横屏状态下，SearchBar两端会自动居中缩进，错开了两端的圆角显示区域。

3.HeaderView

    许多应用使用TableView时都会去设置HeaderView，我们看看在iPhone X下显示的效果。

Snip20170916_15.png

    如图中的箭头标示，HeaderView的背景两端颜色出现了断层。我们来看看具体实现代码。

Snip20170916_17.png

    我们设置的HeaderView的ContentView为我们的目标颜色，只有中间部分视图区域达到了显示效果，两端其他区域没有设置成功，那么两端的其他区域会是什么呢？我们来看看其原理。

Snip20170916_24.png

    如示意图显示，当选中配置项Content View Insets To Safe Area时，这时，TableCell的ContentView视图区域是不会超出Safe Area。

Snip20170916_19.png

    取消选中 Content View Insets To Safe Area，那么这时TableCell的ContentView将不受到Safe Area的限制，填充满整个TableCell视图区域。

    来看看取消选中Content View Insets To Safe Area后的效果。

Snip20170916_25.png

    这样HeaderView的背景设置就会好多了，是我们所要设置的效果。

参考

    iPhone X 设计适配指南 & iOS 11 新特性 (中文)

  您在阅读该文章的过程中，如若对该文章有技术错误或值得优化的建议，欢迎大家加QQ：690091622 进行技术交流和探讨。