iOS 7 之后蘋果給 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide 兩個屬性來描述不希望被透明的狀態(tài)欄或者導(dǎo)航欄遮擋的最高位置(status bar, navigation bar, toolbar, tab bar 等)。這個屬性的值是一個 length 屬性( topLayoutGuide.length)。 這個值可能由當(dāng)前的 ViewController 或者 NavigationController 或者 TabbarController 決定。
一個獨立的ViewController，不包含于任何其他的ViewController。如果狀態(tài)欄可見，topLayoutGuide表示狀態(tài)欄的底部，否則表示這個ViewController的上邊緣。
包含于其他ViewController的ViewController不對這個屬性起決定作用，而是由容器ViewController決定這個屬性的含義：
如果導(dǎo)航欄（Navigation Bar）可見，topLayoutGuide表示導(dǎo)航欄的底部。
如果狀態(tài)欄可見，topLayoutGuide表示狀態(tài)欄的底部。
-
如果都不可見，表示ViewController的上邊緣。
這部分還比較好理解，總之是屏幕上方任何遮擋內(nèi)容的欄的最底部。
iOS 11 開始棄用了這兩個屬性， 并且引入了 Safe Area 這個概念。蘋果建議: 不要把 Control 放在 Safe Area 之外的地方
// These objects may be used as layout items in the NSLayoutConstraint API
@available(iOS, introduced: 7.0, deprecated: 11.0) open var topLayoutGuide: UILayoutSupport { get } @available(iOS, introduced: 7.0, deprecated: 11.0) open var bottomLayoutGuide: UILayoutSupport { get }
今天, 來研究一下 iOS 11 中新引入的這個 API。
UIView 中的 safe area
iOS 11 中 UIViewController 的 topLayoutGuide 和 bottonLayoutGuide 兩個屬性被 UIView 中的 safe area 替代了。
@available(iOS 11.0, *)
open var safeAreaInsets: UIEdgeInsets { get } @available(iOS 11.0, *) open func safeAreaInsetsDidChange()
safeAreaInsets
這個屬性表示相對于屏幕四個邊的間距， 而不僅僅是頂部還有底部。這么說好像沒有什么感覺, 我們來看一看這個東西分別在 iPhone X 和 iPhone 8 中是什么樣的吧！
什么都沒有做, 只是新建了一個工程然后在
Main.storyboard
中的 UIViewController 中拖了一個橙色的 View 并且設(shè)置約束為:
在
ViewController.swift
的
viewDidLoad
中打印
override func viewDidLoad() {
super.viewDidLoad() print(view.safeAreaInsets) }// 無論是iPhone 8 還是 iPhone X 輸出結(jié)果均為
// UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
iPhone 8 VS iPhone X Safe Area (豎屏)
iPhone 8 VS iPhone X Safe Area (橫屏)
這樣對比可以看出, iPhone X 同時具有上下, 還有左右的 Safe Area。
**再來看這個例子: ** 拖兩個自定義的 View, 這個 View 上有一個 顯示很多字的Label。然后設(shè)置這兩個 View 的約束分別是:
let view1 = MyView()
let view2 = MyView()
view.addSubview(view1)
view.addSubview(view2)
let screenW = UIScreen.main.bounds.size.width
let screenH = UIScreen.main.bounds.size.height
view1.frame = CGRect(
x: 0, y: 0, width:screenW, height: 200)view2.frame = CGRect(
x: 0, y: screenH - 200, width:screenW, height: 200)
可以看出來， 子視圖被頂部的劉海以及底部的 home 指示區(qū)擋住了。我們可以使用 frame 布局或者 auto layout 來優(yōu)化這個地方:
let insets = UIApplication.shared.delegate?.window??.safeAreaInsets ?? UIEdgeInsets.zero
view1.frame = CGRect(
x: insets.left, y: insets.top, width:view.bounds.width - insets.left - insets.right, height: 200)view2.frame = CGRect(
x: insets.left, y: screenH - insets.bottom - 200, width:view.bounds.width - insets.left - insets.right, height: 200)
這樣起來好多了, 還有另外一個更好的辦法是直接在自定義的 View 中修改 Label 的布局:
override func layoutSubviews() {
super.layoutSubviews() if #available(iOS 11.0, *) { label.frame = safeAreaLayoutGuide.layoutFrame }}
這樣, 不僅僅是在 ViewController 中能夠使用 safe area 了。
UIViewController 中的 safe area
在 iOS 11 中 UIViewController 有一個新的屬性
@available(iOS 11.0, *)
open var additionalSafeAreaInsets: UIEdgeInsets
當(dāng) view controller 的子視圖覆蓋了嵌入的子 view controller 的視圖的時候。比如說， 當(dāng) UINavigationController 和 UITabbarController 中的 bar 是半透明(translucent) 狀態(tài)的時候, 就有
additionalSafeAreaInsets
自定義的 View 上面的 label 布局兼容了 safe area
// UIView
@available(iOS 11.0, *)
open func safeAreaInsetsDidChange()
//UIViewController
@available(iOS 11.0, *)
open func viewSafeAreaInsetsDidChange()
這兩個方法分別是 UIView 和 UIViewController 的 safe area insets 發(fā)生改變時調(diào)用的方法，如果需要做一些處理，可以重寫這個方法。有點類似于 KVO 的意思。
模擬 iPhone X 的 safe area
額外的 safe area insets 也能用來測試你的 app 是否支持 iPhone X。在沒有 iPhone X 也不方便使用模擬器的時候， 這個還是很有用的。
//豎屏
additionalSafeAreaInsets.top = 24.0
additionalSafeAreaInsets.bottom = 34.0
//豎屏, status bar 隱藏
additionalSafeAreaInsets.top = 44.0
additionalSafeAreaInsets.bottom = 34.0
//橫屏
additionalSafeAreaInsets.left = 44.0
additionalSafeAreaInsets.bottom = 21.0
additionalSafeAreaInsets.right = 44.0
UIScrollView 中的 safe area
在 scroll view 上加一個 label。設(shè)置scroll 的約束為:
scrollView.snp.makeConstraints { (make) in
make.edges.equalToSuperview() }
iOS 7 中引入 UIViewController 的 automaticallyAdjustsScrollViewInsets 屬性在 iOS11 中被廢棄掉了。取而代之的是 UIScrollView 的 contentInsetAdjustmentBehavior
@available(iOS 11.0, *)
public enum UIScrollViewContentInsetAdjustmentBehavior : Int {
case automatic //default value case scrollableAxes case never case always}
@available(iOS 11.0, *)
open var contentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentBehavior
Content Insets Adjustment Behavior
never 不做調(diào)整。
scrollableAxes content insets 只會針對 scrollview 滾動方向做調(diào)整。
always content insets 會針對兩個方向都做調(diào)整。
automatic 這是默認(rèn)值。當(dāng)下面的條件滿足時， 它跟 always 是一個意思
能夠水平滾動，不能垂直滾動
scroll view 是 當(dāng)前 view controller 的第一個視圖
這個controller 是被navigation controller 或者 tab bar controller 管理的
automaticallyAdjustsScrollViewInsets 為 true
在其他情況下 automoatc 跟 scrollableAxes 一樣
Adjusted Content Insets
iOS 11 中 UIScrollView 新加了一個屬性: adjustedContentInset
@available(iOS 11.0, *)
open var adjustedContentInset: UIEdgeInsets { get }
adjustedContentInset 和 contentInset 之間有什么區(qū)別呢？
在同時有 navigation 和 tab bar 的 view controller 中添加一個 scrollview 然后分別打印兩個值:
//iOS 10
//contentInset = UIEdgeInsets(top: 64.0, left: 0.0, bottom: 49.0, right: 0.0)
//iOS 11
//contentInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
//adjustedContentInset = UIEdgeInsets(top: 64.0, left: 0.0, bottom: 49.0, right: 0.0)
然后再設(shè)置:
// 給 scroll view 的四個方向都加 10 的間距
scrollView.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
打印:
//iOS 10
//contentInset = UIEdgeInsets(top: 74.0, left: 10.0, bottom: 59.0, right: 10.0)
//iOS 11
//contentInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
//adjustedContentInset = UIEdgeInsets(top: 74.0, left: 10.0, bottom: 59.0, right: 10.0)
由此可見，在 iOS 11 中 scroll view 實際的 content inset 可以通過 adjustedContentInset 獲取。這就是說如果你要適配 iOS 10 的話。這一部分的邏輯是不一樣的。
系統(tǒng)還提供了兩個方法來監(jiān)聽這個屬性的改變
//UIScrollView
@available(iOS 11.0, *)
open func adjustedContentInsetDidChange()
//UIScrollViewDelegate
@available(iOS 11.0, *)
optional public func scrollViewDidChangeAdjustedContentInset(_ scrollView: UIScrollView)
UITableView 中的 safe area
我們現(xiàn)在再來看一下 UITableView 中 safe area 的情況。我們先添加一個有自定義 header 以及自定義 cell 的 tableview。設(shè)置邊框為 self.view 的邊框。也就是
tableView.snp.makeConstraints { (make) in
make.edges.equalToSuperview()}
或者
tableView.frame = view.bounds
自定義的 header 上面有一個 lable，自定義的 cell 上面也有一個 label。將屏幕橫屏之后會發(fā)現(xiàn)，cell 以及 header 的布局均自動留出了 safe area 以外的距離。cell 還是那么大，只是 cell 的 contnt view 留出了相應(yīng)的距離。這其實是 UITableView 中新引入的屬性管理的:
@available(iOS 11.0, *)
open var insetsContentViewsToSafeArea: Bool
insetsContentViewsToSafeArea 的默認(rèn)值是 true， 將其設(shè)置成 no 之后:
可以看出來 footer 和 cell 的 content view 的大小跟 cell 的大小相同了。這就是說：在 iOS 11 下, 并不需要改變 header/footer/cell 的布局， 系統(tǒng)會自動區(qū)適配 safe area
需要注意的是, Xcode 9 中使用 IB 拖出來的 TableView 默認(rèn)的邊框是 safe area 的。所以實際運(yùn)行起來 tableview 都是在 safe area 之內(nèi)的。
UICollectionView 中的 safe area
我們在做一個相同的 collection view 來看一下 collection view 中是什么情況:
這是一個使用了
UICollectionViewFlowLayout
的 collection view。 滑動方向是豎向的。cell 透明， cell 的 content view 是白色的。這些都跟上面 table view 一樣。header(UICollectionReusableView) 沒有 content view 的概念, 所以給其自身設(shè)置了紅色的背景。
從截圖上可以看出來， collection view 并沒有默認(rèn)給 header cell footer 添加safe area 的間距。能夠?qū)⒉季终{(diào)整到合適的情況的方法只有將 header/ footer / cell 的子視圖跟其 safe area 關(guān)聯(lián)起來。跟 IB 中拖 table view 一個道理。
現(xiàn)在我們再試試把布局調(diào)整成更像 collection view 那樣:
截圖上可以看出來橫屏下, 左右兩邊的 cell 都被劉海擋住了。這種情況下, 我們可以通過修改 section insets 來適配 safe area 來解決這個問題。但是再 iOS 11 中， UICollectionViewFlowLayout 提供了一個新的屬性 sectionInsetReference 來幫你做這件事情。
@available(iOS 11.0, *)
public enum UICollectionViewFlowLayoutSectionInsetReference : Int {
case fromContentInset case fromSafeArea case fromLayoutMargins}
/// The reference boundary that the section insets will be defined as relative to. Defaults to
.fromContentInset./// NOTE: Content inset will always be respected at a minimum. For example, if the sectionInsetReference equals
.fromSafeArea, but the adjusted content inset is greater that the combination of the safe area and section insets, then section content will be aligned with the content inset instead.@available(iOS 11.0, *)
open var sectionInsetReference: UICollectionViewFlowLayoutSectionInsetReference
可以看出來，系統(tǒng)默認(rèn)是使用
.fromContentInset
我們再分別修改, 看具體會是什么樣子的。
fromSafeArea
這種情況下 section content insets 等于原來的大小加上 safe area insets 的大小。
跟使用
.fromLayoutMargins
相似使用這個屬性 colection view 的 layout margins 會被添加到 section content insets 上面。
IB 中的 Safe Area
前面的例子都說的是用代碼布局要實現(xiàn)的部分。但是很多人都還是習(xí)慣用 Interface Builder 來寫 UI 界面。蘋果在 WWDC 2107 Session 412 中提到:Storyboards 中的 safe area 是向下兼容的
也就是說, 即使在 iOS10 及以下的 target 中，也可以使用 safe area 來做布局。唯一需要做的就是給每個 stroyboard 勾選 Use Safe Area Layout Guide。實際測試看，應(yīng)該是 iOS9 以后都只需要這么做。
知識點
: 在使用 IB 設(shè)置約束之后， 注意看相對的是 superview 還是 topLayoutGuide/bottomLayoutGuide， 包括在 Xcode 9 中勾選了 Use Safe Area Layout Guide 之后，默認(rèn)應(yīng)該是相對于 safe area 了。
總結(jié)
在適配 iPhone X 的時候首先是要理解 safe area 是怎么回事。盲目的 if iPhoneX{} 只會給之后的工作代碼更多的麻煩。
如果只需要適配到 iOS9 之前的 storyboard 都只需要做一件事情。
-
Xcode9 用 IB 可以看得出來, safe area 到處都是了。理解起來很簡單。就是系統(tǒng)對每個 View 都添加了 safe area， 這個區(qū)域的大小，是否跟 view 的大小相同是系統(tǒng)來決定的。在這個 View 上的布局只需要相對于 safe area 就可以了。每個 View 的 safe area 都可以通過 iOS 11 新增的 API
safeAreaInsets
或者
safeAreaLayoutGuide
獲取。
-
對與 UIViewController 來說新增了
additionalSafeAreaInsets
這個屬性, 用來管理有 tabbar 或者 navigation bar 的情況下額外的情況。
對于 UIScrollView， UITableView， UICollectionView 這三個控件來說，系統(tǒng)以及做了大多數(shù)的事情。
scrollView 只需要設(shè)置 contentInsetAdjustmentBehavior 就可以很容易的適配帶 iPhoneX
tableView 只需要在 cell header footer 等設(shè)置約束的時候相對于 safe area 來做
對 collection view 來說修改 sectionInsetReference 為 .safeArea 就可以做大多數(shù)的事情了。
-
總的來說， safe area 可以看作是系統(tǒng)在所有的 view 上加了一個虛擬的 view， 這個虛擬的 view 的大小等都是跟 view 的位置等有關(guān)的(當(dāng)然是在 iPhoneX上才有值)
以后在寫代碼的時候，自定義的控件都盡量針對 safe area 這個虛擬的 view 進(jìn)行布局。
