Safe Area Layout Guide


原文:Safe Area Layout Guide

Apple在iOS 7中引入了topLayoutGuidebottomLayoutGuide作為UIViewController屬性。它們允許您創建約束,以保持內容不被狀態,導航或標簽欄等UIKit欄隱藏。 這些布局指南在iOS 11中已被棄用,並被單個安全區域布局指南所取代。

Top and Bottom Layouts Guides - 概述

使用嵌入在導航控制器和標簽欄中的視圖控制器使用頂部和底部布局指南的示例:

Top and Bottom Layout Guides

 

綠色內容視圖對頂部布局指南的底部錨點具有頂部約束,並且對底部布局指南的頂部錨點具有底部約束。 布局指南適應各種條的存在和尺寸。

Safe Area Layout Guide

iOS 11中的新功能,蘋果正在棄用頂部和底部的布局指南,並將其替換為單個安全區域布局指南:

Safe Area Layout Guide

我們的約束現在是安全區域布局指南的頂部和底部錨點。 這不是一個很大的變化,但我認為這更容易理解。 您還可以方便地訪問安全區域的寬度,高度和中心的布局錨點。

遷移故事板

如果您在故事板中創建約束,Apple已嘗試自動化Xcode 9中的更改。 下面是我在Xcode 8中為前面的例子創建的約束:

Xcode 8 constraints

 

頂部和底部布局指南的約束具有標准間距常數以創建一些填充:

Top Layout Guide constraint

我不知道將來會不會改變,但是在使用Xcode 9 beta 2編寫文件時,您將不會收到棄用警告,直到您將部署目標更改為iOS 11.0。

蘋果在WWDC 2017 Session 412中告訴我們,使用安全區域的故事板可向后部署。 這意味着即使您仍然針對iOS 10及更早版本,您也可以在Interface Builder中切換到使用安全區域布局指南。

您可以通過更改故事板文件檢查器中的設置,將頂部和底部布局指南轉換為安全區域布局指南。 您需要為您的項目中的每個故事板執行此操作。

Enable Safe Area Layout Guides

 

故事板自動將頂部和底部布局指南替換為安全區域,並更新約束:

Safe Area Constraints

缺少間距(注:constraints to margins無效)

不幸的是,遷移不是沒有問題。 對安全區布局指南的約束似乎不符合標准間距。檢查約束表示為具有標准間距:

Standard spacing

 

但是當布局運行時, 標准間距失效了

Missing spacing

這似乎是Interface Builder中的一個錯誤( rdar:// 32970194 ),因為它不允許您使用“標准”間距為安全區域布局指南創建約束。 解決方法是手動將缺少的間距添加到頂部和底部約束:

Manual spacing

 

希望Apple在未來的更新中修復這一點,因為手動修復這個更大的項目將是痛苦的。

在代碼中創建約束

如果您在代碼中創建約束,請使用UIViewsafeAreaLayoutGuide屬性來獲取相關的布局錨點。 讓我們在代碼中重新創建上面的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)
   ])
}

 

筆記:

  • safeAreaLayoutGuideUIView的屬性,其中topLayoutGuidebottomLayoutGuideUIViewController屬性。 iOS 11的beta種子在UIViewController上也有一個safeAreaLayoutGuide屬性,但不推薦使用。
  • constraintEqualToSystemSpacingBelow方法在iOS 11中是新的,並且不需要硬編碼標准間距。 還有小於或大於版本。 對於水平間距也有constraintEqualToSystemSpacingAfter 。
  • 如果您有自定義工具欄,則可以使用UIViewController上的additionalSafeAreaInsets屬性來增加安全區域的大小。

更多細節


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM