iOS 11布局——SafeArea

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 的控件挡住的区域。如下图所示：

safearea示意图.png iphonex-safearea.png

使用xib

如果要保证布局区域在safe area内，使用UIView 的safeAreaLayoutGuide 属性，相对safeAreaLayoutGuide进行布局。在xib中可以在xib文件属性勾选Use Safe Area Layout Guides,在使用约束的时候相对Safe Area 布局，如图所示：

xib_safearea.jpeg xib_constraint_safearea.jpeg

使用代码添加约束

使用代码添加约束：

        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：

代码添加safeGuide约束.png

不使用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的改变。