前言
苹果公司于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。
取消选中
Content View Insets To Safe Area
,那么这时TableCell的ContentView将不受到Safe Area的限制,填充满整个TableCell视图区域。
来看看取消选中Content View Insets To Safe Area
后的效果。
这样HeaderView的背景设置就会好多了,是我们所要设置的效果。
参考
iPhone X 设计适配指南 & iOS 11 新特性 (中文)
您在阅读该文章的过程中,如若对该文章有技术错误或值得优化的建议,欢迎大家加QQ:690091622 进行技术交流和探讨。
网友评论