酷应用

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。