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界面生成器中的自動佈局技術