Xcode 9的安全区域

在探索Xcode9testing版时发现安全区在接口构build器上查看层次结构查看器。很好奇，试图了解苹果文档的安全区，在主要文档说“与Auto布局直接交互的视图区”但它不满足我，我想知道这个新事物的实际使用。做任何人有一些线索？

在这里输入图像描述

结论段来自Apple文档，用于安全区域。

UILayoutGuide类被devise为执行所有先前由虚拟视图执行的任务，但是以更安全，更高效的方式执行。布局指南不定义新视图。他们不参与视图层次结构。相反，他们只是在自己的视图的坐标系中定义一个矩形区域，可以与自动布局进行交互。

安全区域是布局指南（安全区域布局指南） 。
代表视图部分的布局指南不受条和其他内容的遮挡。在iOS 11中，Apple会弃用顶部和底部的布局指南，并将其replace为单个安全区布局指南。

当视图在屏幕上可见时，本指南将反映未被其他内容覆盖的视图部分。视图的安全区域反映了遮挡视图控制器视图的导航栏，选项卡栏，工具栏和其他祖先覆盖的区域。（在tvOS中，安全区域包含屏幕的边框，由UIScreen的overscanCompensationInsets属性定义）。它还涵盖由视图控制器的additionalSafeAreaInsets属性定义的所有额外空间。如果视图当前未安装在视图层次结构中，或者在屏幕上不可见，则布局指南始终与视图的边缘匹配。

对于视图控制器的根视图，此属性中的安全区域表示被遮挡的视图控制器内容的整个部分，以及您指定的任何附加的内嵌。对于视图层次结构中的其他视图，安全区域仅反映了被遮挡的那部分视图。例如，如果视图完全位于其视图控制器的根视图的安全区域内，则此属性中的边缘插槽为0。

根据苹果， Xcode 9 – 发行说明
Interface Builder使用UIView.safeAreaLayoutGuide作为UIViewController中弃用的顶部和底部布局指南的替代品。要使用新的安全区域，请在文件检查器中为视图控制器select“安全区域布局指南”，然后在内容和新的安全区域锚点之间添加约束条件。这样可以防止您的内容被顶部和底部条纹以及tvOS上的过扫描区域遮挡。部署到早期版本的iOS时，安全区域的约束将转换为Top和Bottom。

在这里输入图像描述

现有（顶部和底部）布局指南和安全区域布局指南之间的比较（做出类似的视觉效果）是一个简单的参考。

安全区域布局： 在这里输入图像描述

自动版式

在这里输入图像描述

如何启用和使用安全区域布局

按照以下步骤find解决scheme：

启用“安全区域布局”，如果未启用。
如果显示与超级视图的连接，则删除“全部约束”，然后使用安全的布局定位点重新添加全部约束。或者双击约束并编辑超级视图到SafeArea锚点的连接

这里是示例快照，如何启用安全区域布局和编辑约束。

在这里输入图像描述

这是上述变化的结果

在这里输入图像描述

采用SafeArea的布局devise
在为iPhone Xdevise时，您必须确保布局充满屏幕，并且不会被设备的圆angular，传感器shell或用于访问主屏幕的指示灯遮挡。

在这里输入图像描述

大多数使用标准，系统提供的UI元素（如导航栏，表格和集合）的应用程序会自动适应设备的新外形。背景材料延伸到显示器的边缘，并且UI元素被适当地插入和定位。

在这里输入图像描述

对于具有自定义布局的应用程序，支持iPhone X应该也相对容易，尤其是如果您的应用程序使用自动布局并遵守安全区域和边距布局指南。

在这里输入图像描述

以下是示例代码（参考：安全区域布局指南） ：
如果您在代码中创build约束，请使用UIView的safeAreaLayoutGuide属性来获取相关的布局锚点。让我们在代码中重新创build上面的Interface Builder示例，以查看它的外观：

假设我们在视图控制器中拥有绿色视图作为属性：

 private let greenView = UIView()

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

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

通常使用根视图的layoutMarginsGuide创build前导和尾随边距约束：

  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) ]) }

结果：

在这里输入图像描述

这里是苹果开发者官方文档的安全区域布局指南

需要安全区来处理iPhone-X的用户界面devise。以下是如何使用安全区域布局deviseiPhone-X用户界面的基本指南

我想提到一件事，当我尝试修改基于SpriteKit的应用程序以避免新的iPhone X的圆边和“缺口”时，首先引起了我的注意，正如最新的人机界面指南所使用的： UIView的新属性safeAreLayoutGuide在视图添加到层次结构（例如，在-viewDidAppear:以便报告有意义的布局框架（否则，它只是返回全屏大小）之后需要查询。

从物业的文件：

代表视图部分的布局指南不受条和其他内容的遮挡。 当视图在屏幕上可见时 ，本指南反映了导航栏，选项卡栏，工具栏和其他祖先视图未涵盖的视图部分。（在tvOS中，安全区域反映了未覆盖屏幕边框的区域。） 如果视图当前未安装在视图层次结构中，或者在屏幕上不可见，则布局引导边缘与视图的边缘相等 。

（重点是我的）

如果您早于-viewDidLoad:阅读，指南的layoutFrame将是{{0, 0}, {375, 812}} layoutFrame {{0, 0}, {375, 812}}而不是预期的{{0, 44}, {375, 734}} layoutFrame {{0, 0}, {375, 812}} layoutFrame {{0, 44}, {375, 734}}

早些时候在iOS 7.0-11.0中 < UIQit > UIKit使用了UIView属性的topLayoutGuide ＆ bottomLayoutGuide
iOS11 +使用safeAreaLayoutGuide ，它也是UIView属性
启用安全区域布局指南checkbox从文件检查器。
安全区域可帮助您将视图置于整个界面的可见部分。
在tvOS中，安全区域还包括屏幕的过扫描插图，它们代表屏幕覆盖的区域。
安全区域不包括导航栏，选项卡栏，工具栏和其他祖先视图。
使用安全的区域来帮助你布置像UIButton等内容
在为iPhone Xdevise时，您必须确保布局充满屏幕，并且不会被设备的圆angular，传感器shell或用于访问主屏幕的指示灯遮挡。
确保背景延伸到显示的边缘，垂直滚动的布局（如表格和集合）一直延续到底部。
iPhone X上的状态栏比其他iPhone上的状态栏更高。如果您的应用程序假定状态栏高度为固定状态栏下的定位内容，则必须更新您的应用程序以根据用户的设备dynamic定位内容。请注意，当iPhone X的后台任务（如print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones进行活动print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones时，iPhone X上的状态栏不会更改高度print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones
家庭指示器容器的高度是34点。
启用“ 安全区域布局指南”后 ，可以看到界面构build器中列出的安全区域限制属性。

在这里输入图像描述

您可以使用self.view.safeAreaLayoutGuide各个设置约束，

ObjC：

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO; UILayoutGuide * guide = self.view.safeAreaLayoutGuide; [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES; [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES; [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES; [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

迅速：

  demoView.translatesAutoresizingMaskIntoConstraints = false if #available(iOS 11.0, *) { let guide = self.view.safeAreaLayoutGuide demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true } else { NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true }

在这里输入图像描述