Xcode 9的安全区

Question

在探索 Xcode9 Beta 时，在界面构建器上找到安全区查看层次结构查看器。好奇并尝试了解苹果上的安全区域文档，主要是文档说＆＃34;直接与Auto布局交互的视图区域＆＃34; 但它不满足我，我想知道这个新事物的实际用途。

有人有一些线索吗？

Apple doc for Safe area的结论段落。

  

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

Answer 1

  

安全区域是布局指南（Safe Area Layout Guide）   布局指南表示视图中不受条形和其他内容影响的部分。在iOS 11+中，Apple不赞成使用顶部和底部布局指南，并使用单个安全区域布局指南替换它们。

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

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

  

据Apple称，Xcode 9 - Release note   
Interface Builder使用UIView.safeAreaLayoutGuide替代UIViewController中不推荐使用的Top和Bottom布局指南。要使用新的安全区域，请在文件检查器中为视图控制器选择“安全区域布局指南”，然后在内容和新安全区域锚点之间添加约束。这可以防止您的内容被顶部和底部条形图以及tvOS上的过扫描区域遮挡。在部署到早期版本的iOS时，安全区域的约束将转换为顶部和底部。

以下是现有（顶部和底部）布局指南和安全区布局指南之间的比较（以产生类似的视觉效果）的简单参考。

安全区域布局：

<强>自动版式

如何使用安全区域布局？

按照以下步骤查找解决方案：

• 启用＆＃39;安全区域布局＆＃39;，如果未启用。
• 删除所有约束＆＃39;如果他们与超级视图显示连接，并使用安全布局锚重新附加所有内容。或者双击约束并编辑从超级视图到SafeArea锚点
的连接

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

以上是上述变更的结果

使用SafeArea进行布局设计
在设计iPhone X时，必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示器遮挡。

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

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

以下是示例代码（参考号：Safe Area Layout Guide）：
如果在代码中创建约束，请使用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)
   ])
}

结果：

点击UIView后，您可以轻松地以编程方式使用SafeAreaLayout。

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

以下是 Objective-C ：

中的示例代码

• How to add a safe area programmatically

以下是Safe Area Layout Guide

的Apple开发人员官方文档

由于需要安全区域来处理iPhone-X的用户界面设计。以下是How to design user interface for iPhone-X using Safe Area Layout

的基本准则

Answer 2

我想提及当我尝试调整基于SpriteKit的应用程序以避免圆形边缘时，首先引起我注意的事情＆＃34;缺口＆＃34;根据最新的Human Interface Guidelines建议的新iPhone X：{<1}}的新属性safeAreLayoutGuide需要在视图添加到<{strong>>后查询层次结构（例如，在UIView上）以报告有意义的布局框架（否则，它只返回整个屏幕大小）。

来自该物业的文件：

  

表示视图部分的布局指南   不受酒吧和其他内容的影响。   当视图在屏幕上可见时，本指南会反映导航栏，标签栏未覆盖的视图部分，   工具栏和其他祖先视图。 （在tvOS中，安全区域反映出来   未覆盖屏幕边框的区域。）如果视图不是   当前安装在视图层次结构中，或者尚不可见   在屏幕上，布局指南边缘等于视图的边缘。

（强调我的）

如果您在-viewDidAppear:之前阅读，则指南的-viewDidLoad:将为layoutFrame，而不是预期的{{0, 0}, {375, 812}}

Answer 3

• iOS 7.0-11.0早期＆lt; 已弃用＆gt; UIKit使用topLayoutGuide＆amp; bottomLayoutGuide UIView属性

• iOS11 +使用的safeAreaLayoutGuide也是UIView属性

• 从文件检查器中启用安全区域布局指南复选框。

• 安全区域可帮助您将视图置于整个界面的可见部分。

• 在 tvOS 中，安全区域还包括屏幕的过扫描插图，它代表屏幕边框覆盖的区域。

• safeAreaLayoutGuide反映导航栏，标签栏，工具栏和其他祖先视图未涵盖的视图部分。

• 使用安全区域来帮助您布置内容，例如UIButton 等

• 在设计iPhone X时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或访问主屏幕的指示器遮挡。

• 确保背景延伸到显示器的边缘，并且垂直可滚动的布局（如表格和集合）一直延伸到底部。

• iPhone X上的状态栏比其他iPhone更高。如果您的应用假设状态栏高度为状态栏下方的定位内容，则必须更新您的应用以根据用户的设备动态定位内容。请注意，当语音录制和位置跟踪等后台任务处于活动状态时，iPhone X上的状态栏不会更改高度 print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• 家用指示器容器的高度为34点。

• 启用安全区域布局指南后，您可以在界面构建器中看到安全区域限制属性。

您可以将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
        }

Answer 4

Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide作为UIViewController的属性。它们允许您创建约束，以防止UIKit栏（如状态，导航或标签栏）隐藏您的内容。这些布局指南在iOS 11中已弃用，并替换为单个安全区域布局指南。

有关详细信息，请参阅link。

Answer 5

  

“安全区域布局指南”有助于避免重置系统UI元素   定位内容和控件时。

安全区域是系统UI元素之间的区域，即状态栏，导航栏和工具栏或标签栏。因此，当您向应用添加状态栏时，安全区域会缩小。向应用添加导航栏时，安全区域会再次缩小。

在iPhone X上，即使没有显示条形，安全区域也会从纵向和底部屏幕边缘提供额外的插图。在景观中，安全区域从屏幕的两侧和家庭指示器插入。

这取自Apple的视频Designing for iPhone X，其中还可以看到不同元素如何影响安全区。