Top and Bottom Layouts Guides

iOS11后苹果推出了”Safe Area Layout Guide”布局技术，废弃了iOS7推出的布局技术”Top and Bottom Layouts Guides”,”Top and Bottom Layouts Guides”寿终正寝，让我们回顾一下它彪悍的历史。

借用Harrison的一张图来说明一下”Top and Bottom Layouts Guides”

Apple 引入topLayoutGuide和bottomLayoutGuide做为UIViewController的属性,用来设置你内容区域不要被navigation、status、tabbar遮挡。
上图绿色部分的Content View，加了一个顶部约束相对于topLayoutGuide的底部的锚，加了一个底部约束相对于bottomLayoutGuide的顶部的锚。

Safe Area Layout Guide

safe Area帮助我们将View放到整个屏幕可视的区域。即使navigationbar被设置为透明，系统也认为安全区域是从navigationbar的bottom开始计算的

additionalSafeAreaInsets扩展安全区域
使用additionalSafeAreaInsets可以扩展安全区域使它包括你自定义的content,每个View、controller都可以改变安全区域嵌入的区域

safeAreaInsets
safeAreaInsets表示一个view距离该View的安全区域的边距。一个controller的根视图的safeAreaInsets包括了被statusBar、navigationBar、tabbar等覆盖的区域，同时包括
additionalSafeAreaInsets自定义的insert值。

Positioning Content Relative to the Safe Area

Adapt for Safe Area Layout Guide

tableview下移20pt或64pt

iOS11的automaticallyAdjustsScrollViewInsets被废弃了。在iOS 11中决定tableView的内容与边缘距离的是adjustedContentInset属性，而不是contentInset。
当tableView超出安全区域时系统自动调整了SafeAreaInsets值从而影响adjustedContentInset值。

iPhoneX的适配

iPhoneX设备的top多了刘海，bottom去了home键变成圆角的全屏区域。

竖屏

iPhone8 竖屏

iPhoneX 竖屏

iPhoneX竖屏状态时top的安全区域从20到44，如果带navigationbar则从64到88。bottom的安全区域从0变成34

横屏

iPhone8 横屏

iPhoneX 横屏

iPhoneX横屏状态时top安全区域为0，如果带navigationbar横屏下会缩小top为34，bottom的安全区域也为0，但是left和right都变成44

controls适配

所有的controls都不应该出现在safe area,项目中可能有一些自动布局的代码bottom的约束没有相对于bottomLayoutGuide，由于iPhoneX的底部是圆弧状的，所以控件如果靠边可能会被遮挡。适配的方法是添加约束到layoutMargins。

let margin = view.layoutMarginsGuide
NSLayoutConstraint.activate([
  button.leadingAnchor.constraint(equalTo: margin.leadingAnchor),
  button.bottomAnchor.constraint(equalTo: margin.bottomAnchor)
])

滑动手势适配

因为iPhoneX没有Home键，所以开锁是从底部往上滑来进行的。因此在底部34高度的区域，我们不应该放置会被响应的控件

Table View Content Insets适配

iOS11新增了一个insetsContentViewsToSafeArea属性来控制cell的content View是否insert到safe area。默认是true，这会导致在横屏时iPhoneX有一些微妙的变化。

看一下给Cell的content view设置背景色会是什么效果：

iPhone8下的效果：

iPhoneX下的效果：

为什么会有这样的效果，因为Cell的content View是在安全区域里面的。但是cell的backgroundView却扩展到整个屏幕，所以iPhoneX下设置背景色得设置cell的backgroundView而不是contentView的。
设置cell的backgroundView的效果如下