前言
苹果公司于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 进行技术交流和探讨。
网友评论