ios Xcode 9 的安全区域

Safe Area of Xcode 9

提问by dip

While exploring Xcode9 BetaFound Safe Areaon Interface builders View hierarchy viewer. Got curious and tried to know about Safe Area on Apples documentation, in gist the doc says "The the view area which directly interacts with Auto layout"But it did not satisfy me, I want to know Practical use of this new thing.

在探索界面构建器上的Xcode9 Beta发现安全区域时，查看层次结构查看器。很好奇并试图了解 Apples 文档中的 Safe Area，主要是文档说“与自动布局直接交互的视图区域”但它并没有让我满意，我想知道这个新东西的实际用途。

Do any one have some clue?

有没有人有一些线索？

Conclusion paragraph from Apple doc for Safe area.

Apple 文档中安全区域的结论段落。

The UILayoutGuide class is designed to perform all the tasks previously performed by dummy views, but to do it in a safer, more efficient manner. Layout guides do not define a new view. They do not participate in the view hierarchy. Instead, they simply define a rectangular region in their owning view's coordinate system that can interact with Auto Layout.

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

回答by Krunal

Safe Area is a layout guide (Safe Area Layout Guide).
The layout guide representing the portion of your view that is unobscured by bars and other content. In iOS 11+, Apple is deprecating the top and bottom layout guides and replacing them with a single safe area layout guide.

Safe Area 是一个布局指南（Safe Area Layout Guide）。
布局指南表示视图中未被条形和其他内容遮挡的部分。在 iOS 11+ 中，Apple 弃用了顶部和底部布局指南，并将其替换为单个安全区域布局指南。

When the view is visible onscreen, this guide reflects the portion of the view that is not covered by other content. The safe area of a view reflects the area covered by navigation bars, tab bars, toolbars, and other ancestors that obscure a view controller's view. (In tvOS, the safe area incorporates the screen's bezel, as defined by the overscanCompensationInsetsproperty of UIScreen.) It also covers any additional space defined by the view controller's additionalSafeAreaInsetsproperty. If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the layout guide always matches the edges of the view.

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

For the view controller's root view, the safe area in this property represents the entire portion of the view controller's content that is obscured, and any additional insets that you specified. For other views in the view hierarchy, the safe area reflects only the portion of that view that is obscured. For example, if a view is entirely within the safe area of its view controller's root view, the edge insets in this property are 0.

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

According to Apple, Xcode 9 - Release note
Interface Builder uses UIView.safeAreaLayoutGuide as a replacement for the deprecated Top and Bottom layout guides in UIViewController. To use the new safe area, select Safe Area Layout Guides in the File inspector for the view controller, and then add constraints between your content and the new safe area anchors. This prevents your content from being obscured by top and bottom bars, and by the overscan region on tvOS. Constraints to the safe area are converted to Top and Bottom when deploying to earlier versions of iOS.

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

---

---

Here is simple reference as a comparison (to make similar visual effect) between existing (Top & Bottom) Layout Guide and Safe Area Layout Guide.

这里是一个简单的参考，作为现有（顶部和底部）布局指南和安全区域布局指南之间的比较（以产生类似的视觉效果）。

Safe Area Layout:

安全区布局：

AutoLayout

自动布局

---

---

How to work with Safe Area Layout?

如何使用安全区域布局？

Follow these steps to find solution:

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

• Enable 'Safe Area Layout', if not enabled.
• Remove 'all constraint' if they shows connection with with Super viewand re-attach all with safe layout anchor. OR Double click on a constraint and edit connection from super view to SafeArea anchor

• 如果未启用，请启用“安全区域布局”。
• 如果它们显示与超级视图的连接，则删除“所有约束”，并使用安全布局锚重新附加所有约束。或双击约束并编辑从超级视图到 SafeArea 锚点的连接

Here is sample snapshot, how to enable safe area layout and edit constraint.

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

Here is result of above changes

这是上述更改的结果

---

---

Layout Design with SafeArea
When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, sensor housing, or the indicator for accessing the Home screen.

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

Most apps that use standard, system-provided UI elements like navigation bars, tables, and collections automatically adapt to the device's new form factor. Background materials extend to the edges of the display and UI elements are appropriately inset and positioned.

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

For apps with custom layouts, supporting iPhone X should also be relatively easy, especially if your app uses Auto Layout and adheres to safe area and margin layout guides.

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

---

---

Here is sample code (Ref from: Safe Area Layout Guide):
If you create your constraints in code use the safeAreaLayoutGuide property of UIView to get the relevant layout anchors. Let's recreate the above Interface Builder example in code to see how it looks:

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

Assuming we have the green view as a property in our view controller:

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

private let greenView = UIView()

We might have a function to set up the views and constraints called from viewDidLoad:

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

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

Create the leading and trailing margin constraints as always using the layoutMarginsGuide of the root view:

像往常一样使用根视图的 layoutMarginsGuide 创建前导和尾随边距约束：

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

Now unless you are targeting iOS 11 only you will need to wrap the safe area layout guide constraints with #available and fall back to top and bottom layout guides for earlier iOS versions:

现在，除非您只针对 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)
   ])
}

Result:

结果：

---

---

Following UIViewextension, make it easy for you to work with SafeAreaLayout programatically.

在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
    }
  }

}

---

---

Here is sample code in Objective-C:

以下是Objective-C 中的示例代码：

• How to add a safe area programmatically

• 如何以编程方式添加安全区域

---

---

Here is Apple Developer Official Documentation for Safe Area Layout Guide

这是安全区域布局指南的Apple Developer 官方文档

Safe Area is required to handle user interface design for iPhone-X. Here is basic guideline for How to design user interface for iPhone-X using Safe Area Layout

需要 Safe Area 来处理 iPhone-X 的用户界面设计。这是如何使用安全区域布局为 iPhone-X 设计用户界面的基本指南

回答by Nicolas Miari

I want to mentionsomething that caught me first when I was trying to adapt a SpriteKit-based app to avoid the round edges and "notch" of the new iPhone X, as suggested by the latest Human Interface Guidelines: The new property safeAreaLayoutGuideof UIViewneeds to be queried afterthe view has been added to the hierarchy (for example, on -viewDidAppear:) in order to report a meaningful layout frame (otherwise, it just returns the full screen size).

我想提的东西，首先吸引我，当我试图去适应一个基于SpriteKit应用程序内，以避免圆边和新的iPhone X的“缺口”，通过最新的建议人机界面指南：新属性safeAreaLayoutGuide的UIView需求，被查询后视图已经被加入到该层次结构中（例如，在 -viewDidAppear:为了报告有意义的布局框（否则，它只是返回全屏大小））。

From the property's documentation:

从物业的文件：

The layout guide representing the portion of your view that is unobscured by bars and other content. When the view is visible onscreen, this guide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. (In tvOS, the safe area reflects the area not covered the screen's bezel.) If the view is not currently installed in a view hierarchy, or is not yet visible onscreen, the layout guide edges are equal to the edges of the view.

布局指南表示视图中未被条形和其他内容遮挡的部分。 当视图在屏幕上可见时，本指南反映了未被导航栏、标签栏、工具栏和其他祖先视图覆盖的视图部分。（在 tvOS 中，安全区域反映了屏幕边框未覆盖的区域。）如果视图当前未安装在视图层次结构中，或者尚未在屏幕上可见，则布局指南边缘等于视图的边缘。

(emphasis mine)

（强调我的）

If you read it as early as -viewDidLoad:, the layoutFrameof the guide will be {{0, 0}, {375, 812}}instead of the expected {{0, 44}, {375, 734}}

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

回答by Hyman

• Earlier in iOS 7.0–11.0 <Deprecated> UIKituses the topLayoutGuide& bottomLayoutGuidewhich is UIViewproperty

• iOS11+ uses safeAreaLayoutGuidewhich is also UIViewproperty

• Enable Safe Area Layout Guidecheck box from file inspector.

• Safe areas help you place your views within the visible portion of the overall interface.

• In tvOS, the safe area also includes the screen's overscan insets, which represent the area covered by the screen's bezel.

• safeAreaLayoutGuide reflects the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor viewss.

• Use safe areas as an aid to laying out your content like UIButtonetc.

• When designing for iPhone X, you must ensure that layouts fill the screen and aren't obscured by the device's rounded corners, sensor housing, or the indicator for accessing the Home screen.

• Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom.

• The status bar is taller on iPhone X than on other iPhones. If your app assumes a fixed status bar height for positioning content below the status bar, you must update your app to dynamically position content based on the user's device. Note that the status bar on iPhone X doesn't change height when background tasks like voice recording and location tracking are active print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• Height of home indicator container is 34 points.

• Once you enable Safe Area Layout Guideyou can see safe area constraints property listed in the interface builder.

• 在 iOS 7.0–11.0 的早期 < Deprecated>UIKit使用topLayoutGuide& 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 点。

• 启用安全区域布局指南后，您可以看到界面构建器中列出的安全区域约束属性。

You can set constraints with respective of self.view.safeAreaLayoutGuideas-

您可以分别设置约束作为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;

Swift:

迅速：

   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
        }

回答by Kemo

Apple introduced the topLayoutGuide and bottomLayoutGuide as properties of UIViewController way back in iOS 7. They allowed you to create constraints to keep your content from being hidden by UIKit bars like the status, navigation or tab bar. These layout guides are deprecated in iOS 11 and replaced by a single safe area layout guide.

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

Refer linkfor more information.

有关更多信息，请参阅链接。

回答by Yannick

The Safe Area Layout Guide helps avoid underlapping System UI elements when positioning content and controls.

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

The Safe Area is the area in between System UI elements which are Status Bar, Navigation Bar and Tool Bar or Tab Bar. So when you add a Status bar to your app, the Safe Area shrink. When you add a Navigation Bar to your app, the Safe Area shrinks again.

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

On the iPhone X, the Safe Area provides additional inset from the top and bottom screen edges in portrait even when no bar is shown. In landscape, the Safe Area is inset from the sides of the screens and the home indicator.

在 iPhone X 上，即使没有显示栏，安全区域也会从纵向的顶部和底部屏幕边缘提供额外的插入。在横向，安全区域从屏幕和主页指示器的侧面插入。

This is taken from Apple's video Designing for iPhone Xwhere they also visualize how different elements affect the Safe Area.

这取自 Apple 的iPhone X 设计视频，他们还可视化了不同元素如何影响安全区域。