Safe Area Layout Guide

原文：Safe Area Layout Guide

Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide做为UIViewController属性。它们容许您建立约束，以保持内容不被状态，导航或标签栏等UIKit栏隐藏。 这些布局指南在iOS 11中已被弃用，并被单个安全区域布局指南所取代。

Top and Bottom Layouts Guides - 概述

使用嵌入在导航控制器和标签栏中的视图控制器使用顶部和底部布局指南的示例：

 

绿色内容视图对顶部布局指南的底部锚点具备顶部约束，而且对底部布局指南的顶部锚点具备底部约束。 布局指南适应各类条的存在和尺寸。

Safe Area Layout Guide

iOS 11中的新功能，苹果正在弃用顶部和底部的布局指南，并将其替换为单个安全区域布局指南：

咱们的约束如今是安全区域布局指南的顶部和底部锚点。 这不是一个很大的变化，但我认为这更容易理解。 您还能够方便地访问安全区域的宽度，高度和中心的布局锚点。

迁移故事板

若是您在故事板中建立约束，Apple已尝试自动化Xcode 9中的更改。 下面是我在Xcode 8中为前面的例子建立的约束：

 

顶部和底部布局指南的约束具备标准间距常数以建立一些填充：

我不知道未来会不会改变，可是在使用Xcode 9 beta 2编写文件时，您将不会收到弃用警告，直到您将部署目标更改成iOS 11.0。

苹果在WWDC 2017 Session 412中告诉咱们，使用安全区域的故事板可向后部署。 这意味着即便您仍然针对iOS 10及更早版本，您也能够在Interface Builder中切换到使用安全区域布局指南。

您能够经过更改故事板文件检查器中的设置，将顶部和底部布局指南转换为安全区域布局指南。 您须要为您的项目中的每一个故事板执行此操做。

 

故事板自动将顶部和底部布局指南替换为安全区域，并更新约束：

缺乏间距（注：constraints to margins无效）

不幸的是，迁移不是没有问题。 对安全区布局指南的约束彷佛不符合标准间距。检查约束表示为具备标准间距：

 

可是当布局运行时， 标准间距失效了

这彷佛是Interface Builder中的一个错误（ rdar：// 32970194 ），由于它不容许您使用“标准”间距为安全区域布局指南建立约束。 解决方法是手动将缺乏的间距添加到顶部和底部约束：

 

但愿Apple在将来的更新中修复这一点，由于手动修复这个更大的项目将是痛苦的。

在代码中建立约束

若是您在代码中建立约束，请使用UIView的safeAreaLayoutGuide属性来获取相关的布局锚点。 让咱们在代码中从新建立上面的Interface Builder示例，看看它的外观：

假设咱们在视图控制器中有绿色视图做为属性：

 private let greenView = UIView()

咱们可能有一个功能来设置从viewDidLoad调用的视图和约束：

 private func setupView() { 
     greenView.translatesAutoresizingMaskIntoConstraints = false
     greenView.backgroundColor = .green view.addSubview(greenView) 
}

 

始终使用根视图的layoutMarginsGuide建立前导和尾随边距约束：

let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
      ])

 

如今，除非您仅定位到iOS 11，不然您须要将#available的安全区域布局指南约束包装起来，并回到早期iOS版本的顶部和底部布局指南：

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}

 

笔记：

• safeAreaLayoutGuide是UIView的属性，其中topLayoutGuide和bottomLayoutGuide是UIViewController属性。 iOS 11的beta种子在UIViewController上也有一个safeAreaLayoutGuide属性，但不推荐使用。
• constraintEqualToSystemSpacingBelow方法在iOS 11中是新的，而且不须要硬编码标准间距。 还有小于或大于版本。 对于水平间距也有constraintEqualToSystemSpacingAfter 。
• 若是您有自定义工具栏，则可使用UIViewController上的additionalSafeAreaInsets属性来增长安全区域的大小。

更多细节

• WWDC 2017 Session 412界面生成器中的自动布局技术