SafeArea

概要

SafeArea とは

SafeArea を把握する

例えば iPhone X のような従来とは異なるエッジを持つ端末に対して、ノッチ部分やその他画面隅は SafeArea 外となっている。これに加えて、View には様々なコンポーネントがのり、そのために下側の View が見えなくなってしまう場合もある。これは例えば、ナビゲーションバーやタブバー、ツールバー等である。このような場合にも、SafeArea はこれらの領域を不可視領域を判断し、可視領域のみを返してくれる。

SafeArea を拡張する

サンプル

試しに、以下のように SafeArea を出力させてみる。

code:ViewController.swift

import UIKit

class FirstViewController: UIViewController {

@IBOutlet var mainView: UIView!

override func viewDidLoad() {

super.viewDidLoad()

Swift.print(UIScreen.main.bounds.size)

Swift.print(mainView.safeAreaLayoutGuide.layoutFrame)

Swift.print(mainView.safeAreaInsets)

}

override func viewDidAppear(_ animated: Bool) {

Swift.print(mainView.safeAreaLayoutGuide.layoutFrame)

Swift.print(mainView.safeAreaInsets)

}

}

code:NextViewController.swift

import UIKit

class SecondViewController: UIViewController {

@IBOutlet var mainView: UIView!

override func viewDidLoad() {

super.viewDidLoad()

Swift.print(mainView.safeAreaLayoutGuide.layoutFrame)

Swift.print(mainView.safeAreaInsets)

}

override func viewDidAppear(_ animated: Bool) {

Swift.print(mainView.safeAreaLayoutGuide.layoutFrame)

Swift.print(mainView.safeAreaInsets)

}

}

https://gyazo.com/afc33e4569898c6df14c18174bdfd316

これを iPhoneX のシミュレーターで実行して画面遷移すると、結果は以下のようになる。

code:text

(375.0, 812.0)

(0.0, 0.0, 375.0, 812.0)

UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)

(0.0, 44.0, 375.0, 734.0)

UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)

(0.0, 0.0, 375.0, 812.0)

UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)

(0.0, 0.0, 375.0, 690.0)

UIEdgeInsets(top: 88.0, left: 0.0, bottom: 34.0, right: 0.0)