总结:

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

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

3.safeAreaInset 导致 Scrollview 偏移。

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

 

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

iPhone X 适配 ( iOS 11适配 )_iphone

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

iPhone X 适配 ( iOS 11适配 )_ios_02

iPhone X 适配 ( iOS 11适配 )_iphone_03

 

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

 

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

iPhone X 适配 ( iOS 11适配 )_状态栏_04

Status Bar 状态栏

 

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

iPhone X 适配 ( iOS 11适配 )_ide_05

iPhone X 适配 ( iOS 11适配 )_home键_06

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

 

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

 

底部区域

 

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

iPhone X 适配 ( iOS 11适配 )_iphone_07

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

iPhone X 适配 ( iOS 11适配 )_状态栏_08

SafeArea --> 安全区域

 

这个是很坑的一个地方.

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

iPhone X 适配 ( iOS 11适配 )_状态栏_09

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

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

iPhone X 适配 ( iOS 11适配 )_home键_10

刘海打理

 

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

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

iPhone X 适配 ( iOS 11适配 )_home键_11

iOS 11 之后的 NavigationBar

iPhone X 适配 ( iOS 11适配 )_ide_12

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 最低支持的版本)。

iPhone X 适配 ( iOS 11适配 )_ios_13

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

iPhone X 适配 ( iOS 11适配 )_ide_14

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

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

 

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

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

iPhone X 适配 ( iOS 11适配 )_ide_15

iPhone X 适配 ( iOS 11适配 )_iphone_16