セーフエリアはレイアウトガイド（セーフエリアレイアウトガイド）です。
バーやその他のコンテンツによって隠されていないビューの部分を表すレイアウトガイド。iOS 11以降では、Appleは上部と下部のレイアウトガイドを廃止し、それらを単一のセーフエリアレイアウトガイドに置き換えます。
ビューが画面上に表示されている場合、このガイドは、他のコンテンツでカバーされていないビューの部分を反映しています。ビューの安全領域は、ナビゲーションバー、タブバー、ツールバー、およびビューコントローラーのビューを不明瞭にする他の祖先で覆われた領域を反映しています。（tvOSでは、overscanCompensationInsetsUIScreen のプロパティで定義されているように、セーフエリアに画面のベゼルが組み込まれています。）ビューコントローラーのadditionalSafeAreaInsetsプロパティで定義されている追加の領域も含まれます。ビューがビュー階層に現在インストールされていない場合、またはまだ画面に表示されていない場合、レイアウトガイドは常にビューの端に一致します。
ビューコントローラーのルートビューの場合、このプロパティの安全領域は、ビューコントローラーのコンテンツの隠されている部分全体と、指定した追加のインセットを表します。ビュー階層内の他のビューの場合、安全領域には、そのビューの隠されている部分のみが反映されます。たとえば、ビューが完全にビューコントローラーのルートビューの安全領域内にある場合、このプロパティのエッジインセットは0です。
Appleによると、Xcode 9-リリースノート
Interface Builderは、UIViewControllerで廃止されたTopおよびBottomレイアウトガイドの代わりにUIView.safeAreaLayoutGuideを使用します。新しいセーフエリアを使用するには、ビューコントローラーのファイルインスペクターで[セーフエリアレイアウトガイド]を選択し、コンテンツと新しいセーフエリアアンカーの間に制約を追加します。これにより、トップバーとボトムバー、およびtvOSのオーバースキャン領域によってコンテンツが不明瞭にならないようにします。以前のバージョンのiOSに展開すると、安全領域への制約が上部と下部に変換されます。
以下は、既存の（上と下）レイアウトガイドとセーフエリアレイアウトガイドの比較（同様の視覚効果を実現するため）としての簡単なリファレンスです。
安全領域のレイアウト：
自動レイアウト
セーフエリアレイアウトの操作方法
次の手順に従って解決策を見つけてください。
- 有効になっていない場合は、「セーフエリアレイアウト」を有効にします。
- スーパービューとの接続が示されている場合は「すべての制約」を削除し、安全なレイアウトアンカーですべてを再接続します。または制約をダブルクリックして、スーパービューからSafeAreaアンカーへの接続を編集します
安全な領域のレイアウトを有効にし、制約を編集する方法のサンプルスナップショットを次に示します。
上記の変更の結果は次のとおりです
SafeAreaを使用し
たレイアウト設計 iPhone X向けに設計するときは、レイアウトが画面全体に表示され、デバイスの丸みを帯びた角、センサーハウジング、またはホーム画面にアクセスするためのインジケーターによって隠れないようにする必要があります。
ナビゲーションバー、テーブル、コレクションなど、システムが提供する標準のUI要素を使用するほとんどのアプリは、デバイスの新しいフォームファクターに自動的に適応します。背景のマテリアルはディスプレイの端まで広がり、UI要素は適切に挿入されて配置されます。
カスタムレイアウトのアプリの場合、特にアプリが自動レイアウトを使用し、安全な領域とマージンのレイアウトガイドに準拠している場合は、iPhone Xのサポートも比較的簡単です。
これがサンプルコードです（参照：セーフエリアレイアウトガイド）。
コードで制約を作成する場合は、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)
])
}
結果：
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
}
}
}
Objective-Cのサンプルコードは次のとおりです。
セーフエリアレイアウトガイドの Apple Developer公式ドキュメントはこちらです
iPhone-Xのユーザーインターフェイス設計を処理するには、セーフエリアが必要です。セーフエリアレイアウトを使用してiPhone-Xのユーザーインターフェイスを設計する方法の基本的なガイドラインは次のとおりです
