iOS 11 引入了safe area的概念，safe area 定义了视图的可视区域，保证在safe area 区域内的子view不会被遮挡。引出这个概念可能是因为iPhone x 的顶部刘海和底部的home操作区域的问题。本文将介绍如何使用 safe area进行布局。
除了前面提到的iPhone X的问题，UIKit 定义的navigation controller、tabbar controller会展示一个顶部的导航栏或者底部的tabbar，也会遮挡一部分 child view controller的视图。safe area 描述当前view不被父Controller 的控件挡住的区域。如下图所示：
使用xib
如果要保证布局区域在safe area内，使用UIView 的safeAreaLayoutGuide 属性，相对safeAreaLayoutGuide进行布局。在xib中可以在xib文件属性勾选Use Safe Area Layout Guides,在使用约束的时候相对Safe Area 布局，如图所示：
使用代码添加约束
使用代码添加约束：
let subview:UIView = UIView.init(frame: CGRect.init())
self.view.addSubview(subview)
subview.backgroundColor = UIColor.green
subview.translatesAutoresizingMaskIntoConstraints = false //
let layoutguid = view.safeAreaLayoutGuide //相对safeAreaLayoutGuide布局
subview.topAnchor.constraint(equalTo: layoutguid.topAnchor, constant: 0).isActive = true
subview.bottomAnchor.constraint(equalTo: layoutguid.bottomAnchor, constant: 0).isActive = true
subview.rightAnchor.constraint(equalTo: layoutguid.rightAnchor, constant: 0).isActive = true
subview.addConstraint(NSLayoutConstraint.init(item: subview,
attribute: .width,
relatedBy: .equal,
toItem: nil,
attribute: .width,
multiplier: 1, constant: 20))
在safeArea内添加一个绿色的subView：
不使用AutoLayout
如果不适用AutoLayout，可以通过UIView的safeAreaInsets属性获取到safeArea的inset：
override func viewDidLoad() {
super.viewDidLoad()
let subview: UIView = UIView.init(frame: CGRect.init())
self.view.addSubview(subview)
subview.backgroundColor = UIColor.green
self.subView = subview
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if let subview = self.subView {
let insets = view.safeAreaInsets
let width: CGFloat = 20.0
let x = view.frame.width - insets.right - width
let y = insets.top
let height = view.frame.height - insets.top - insets.bottom
subview.frame = CGRect.init(x: x, y: y, width: width, height: height)
}
}
由于UIView的safeAreaInsets只有在添加到视图层级后才生效，所以把布局代码写下viewDidLayoutSubviews方法中。布局结果和上图一样。
调整safeArea
通过UIViewController的additionalSafeAreaInsets属性，可以修改View的safeArea。通过修改safeArea，所有相对safeArea布局的UI都会跟着调整。比如，我们有一个自定义的Container ViewController，在底部增加一个工具栏bar，其childViewController的视图会比这个bar挡住，这个时候可以调整childViewController的additionalSafeAreaInsets, 同样，需要在UIView添加到视图层级中才会生效，所以写在ContainerViewController的ViewDidAppear方法内：
override func viewDidAppear(_ animated: Bool) {
var newSafeArea = view.safeAreaInsets
// Adjust the safe area to accommodate
// the height of the bottom view.
if let bottomViewHeight = bottomView?.bounds.size.height {
newSafeArea.bottom += bottomViewHeight
}
// Adjust the safe area insets of the
// embedded child view controller.
let child = self.childViewControllers[0]
child.additionalSafeAreaInsets = newSafeArea
}
在ViewController的root view 的safeArea发生变化时会调用safeAreaInsetsDidChange()方法，可以在这个方法监听safeArea的改变。
