iPhone X 适配 ( iOS 11适配 ) 打理刘海

百家 作者:iOS开发 2017-12-15 11:47:12

点击上方“iOS开发”,选择“置顶公众号”

关键时刻,第一时间送达!


故事背景


iPhone X 刘海机于9月份发布以来,备受诟病,给科技带来一个宴会.给coder却带来一份淡淡的凉意---> 怎么适配呢?

我们的APP会不会被遮住,多出来一个刘海? 我们底下的Tabbar会变成什么样? Home键去哪了? 公司会不会给我们配一个iPhone X的测试机(权当意淫吧)?


据说WWDC大会上给出了适配建议,打开看了(好吧,我承认我听不懂).最近项目需要做适配,就在网上搜集了一些资料,总结一下,放在这里.供大家参考.


先看看iPhone各机型的尺寸吧.


各版本 iPhone 的尺寸


下面是iPhone X 对比其他机型的变化图.iPhone X和iPhone 8 在宽度上是一致的,在垂直方向上多出了145pt,这就意味着首页可以展示更多的内容,这对于一些大IP来说可能是一个巨大的价值,但是对于众多小众APP来说,我们还是关心适配的问题吧.


iPhone X和iPhone 8的区别


布局


CGRectMake(0,0,100,100) 和 CGRectMake(0,0,375,100)


如上图所示,我们会发现,刘海会遮住我们的视图控件,所以我们设计的时候要避免关键内容被遮盖.


iPhone X可以展示的区域以及坐标系统如下图:


iPhone X 的显示区域


Status Bar 状态栏


我们用系统的navigationBar会发现,它会自动变高,如下图所示.其实是上面原先20pt的Status Bar变高了,我们通过打印Status Bar的frame可以发现,它变成了44pt.


系统的navigationBar


Status Bar 的frame


住:如果你的APP是隐藏状态栏的,建议重新考虑,首先,状态栏包含了用户想要的信息,其次,如果隐藏了,你的上边的刘海两侧的空白会很难看


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


底部区域


iPhone X取消了Home键,但是苹果公司给用户流出来一个一个叫做Home Indicator的区域,在这个区域,你向上滑动,就等同于原来点击了Home键,就会回到手机桌面. 这部分的高度是固定的--34pt.(除了iPhone X,其他手机没有这个区域,因为Home键还在).


Home Indicator


如果你的底部是 TabBar,那么 Home Indicator 背景会来自于 TabBar 背景的延伸,如果我们是一个 feed 流的页面,那么底部会展示 feed 流的局部。意思是如果有 TabBar,那么那个区域会延展你的 barTintColor;没有的话,就显示透明的(参照 Setting)。之所以这么设计,是为了让 indicator 清晰可见,告诉用户你可以滑动这部分区域。所以苹果不建议我们的 UI 元素过于靠近这部分区域。


有 TabBar 的 Home Indicator 区


SafeArea --> 安全区域


这个是很坑的一个地方.

iOS 11 废弃了 iOS 7 之后出现的 topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide 概念。我们的UI元素都应该布局在这些区域之内,避免被各种 bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。


iPhone 的 SafeArea


如果我们用了 AutoLayout,并且开启了 safeAreaLayoutGuide,布局会自动加上这些 safeLayoutGuide,你的视图不会超出这部分 SafeArea。如下图所示,如果你需要增加 Guide 的区域,那么可以设置 self.additionalSafeAreaInsets 来增加区域。

默认的 SafeArea 和 self.additionalSafeAreaInsets = UIEdgeInsetsMake(64, 0, 0, 0);


SafeArea


刘海打理


1.我们的页面大多会上移,这属于于“状态栏变高系列”,解决方案就是把固定的20pt高度改成 [[UIApplication sharedApplication] statusBarFrame].size.height]。

2.搜索页面输入框的位置发生了偏移,这是因为 iOS 11 的导航栏的视图层级结构发生了变化,和 iPhone X 的并无直接关系。iOS 11 导航栏的视图层级关系如下:


iOS 11 之后的 NavigationBar


iOS 11 之前的 NavigationBar


适配方式是:取到这个 _UIButtonBarStackView 的位置和尺寸信息,然后更改 PFBNavigationBarContainerView 的 X 坐标。


3.iOS 11 之后 scrollview 多出来一个 adjustedContentInset 区域。UItableView 会发生偏移.那为什么会发生偏移?这个偏移的值又是怎么确定的?其实是当 Tableview 的 frame 超出了 safeArea 范围之后,系统会调整内容的位置。系统通过设置 adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移.注意一下这个 adjustedContentInset 是 readOnly 的属性。我们可以通过设置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来纠正这个位置。当然还可以通过设置 tableview.contentOffset 来抵消这个值,但还是推荐第一种。


iOS 11的适配


1.xib 里适配 iPhone X 的话,可以开启 UseSafeAreaLayoutGuides(但是这个是需要在 iOS 9 之后才能用,需要看你的 App 最低支持的版本)。


xib 属性


2.如果用的系统 SearchViewController,发现没有灰色蒙层了,可以这么试试。之所以可以这么改,是因为 iOS 11 的 NavigationBar 和 SearchViewController 集成在一块儿了。


iOS 11 UISearchViewController适配


3.横屏下的 UITableView,SenctionHeader 的背景颜色不是设置的那个颜色。


iOS 11 横屏 Tableview 的作用方式


这个问题的原因是:横屏下的 UITableView,Cell 都是和屏幕一样宽,但是 Cell 的 ContentView 会被 inset 到 SafeArea 区域。


解决方法是:可以通过调整 Tableview 的默认行为,改变 contentView 的属性(如上图 inset To SafeArea)来让 contentview 顶到边缘,弊端是会改变整个 cell 的内容显示,而且 contentView 的 layoutMargin 依然还是相对于 SafeArea 的。


最佳方案是:改变 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。


iOS 11 修改前后的样式对比


最后总结:


1.状态栏高度发生变化,解决方案:布局的时候这个高度不要写死,通过方法获取高度.

2.导航栏的视图层级结构发生变化而导致 UI(titleView、UIBarButtonItem) 问题。

3.safeAreaInset 导致 Scrollview 偏移。

4.Tabbar发生变化,建议用系统的tabbar.



  • 来自:iOS_xuanhe

  • 链接:http://www.jianshu.com/p/93674591dacc

  • iOS开发整理发布,转载请联系作者授权

【点击成为Android大神】

关注公众号:拾黑(shiheibook)了解更多

[广告]赞助链接:

四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接