[解決済み] Xcode 9の安全領域

質問

探索中 Xcode9ベータ版 発見 安全なエリア を発見しました。気になってAppleのドキュメントでSafe Areaについて調べたら、gistにこう書いてあった。 Autoレイアウトと直接対話するビューエリアです。 しかし、それは私を満足させませんでした、私はこの新しいものの実用的な使用を知りたいのです。

どなたか手がかりをお持ちではないでしょうか？

Apple doc for Safe area の結論の段落です。

UILayoutGuide クラスは、以前ダミービューによって実行されたすべてのタスクを実行するように設計されていますが、より安全で効率的な方法でそれを行うために設計されています。レイアウトガイドは、新しいビューを定義するわけではありません。また、ビュー階層に参加することもありません。代わりに、それらは単に、Auto Layoutと対話することができるそれらの所有のビューの座標系で長方形の領域を定義します。

どのように解決するのですか?

<ブロッククオート

セーフエリアは、レイアウトガイド( セーフエリア・レイアウトガイド ) .

バーや他のコンテンツによって遮蔽されていないビューの部分を表すレイアウトガイドです。iOS 11+ では、Apple は上部と下部のレイアウト ガイドを非推奨とし、単一のセーフ エリア レイアウト ガイドに置き換えます。

ビューが画面上に表示されているとき、このガイドは、他のコンテンツによって覆われていないビューの部分を反映しています。ビューの安全領域は、ナビゲーション バー、タブ バー、ツールバー、およびビュー コントローラーのビューを見えなくするその他の祖先によって覆われる領域を反映しています。(tvOSでは、安全領域は、画面のベゼルに組み込まれ、そのベゼルは overscanCompensationInsets プロパティで定義されています)。また、ビューコントローラの additionalSafeAreaInsets プロパティで定義された追加のスペースもカバーします。ビューが現在ビュー階層にインストールされていない場合、またはまだ画面上に表示されていない場合、レイアウトガイドは常にビューのエッジに一致します。

ビューコントローラのルートビューの場合、このプロパティの安全領域は、ビューコントローラのコンテンツの隠蔽されている部分全体と、指定した追加のインセットを表します。ビュー階層内の他のビューの場合、安全領域は、そのビューの隠蔽されている部分のみを反映します。例えば、ビューが完全にそのビューコントローラーのルートビューの安全領域内にある場合、このプロパティのエッジインセットは0になります。

Appleによると Xcode 9 - リリースノート

Interface Builder は、UIViewController の非推奨のトップとボトムのレイアウトガイドの代わりとして UIView.safeAreaLayoutGuide を使用します。新しいセーフエリアを使用するには、ビューコントローラのファイルインスペクタでセーフエリアレイアウトガイドを選択し、コンテンツと新しいセーフエリアアンカーとの間に制約を追加します。これにより、コンテンツがトップバーとボトムバー、およびtvOSのオーバースキャン領域によって隠されるのを防ぐことができます。iOS の以前のバージョンにデプロイする場合、安全領域への制約は Top and Bottom に変換されます。

---

既存の (上下の) レイアウト ガイドとセーフ エリア レイアウト ガイドの比較 (同様の視覚効果を得るため) として、簡単な参考例を示します。

セーフエリアレイアウト。

オートレイアウト

---

セーフエリアレイアウトで作業するには？

以下の手順で解決してください。

• セーフ エリア レイアウト」が有効でない場合は、有効にします。
• との接続を示す場合、'all constraint' を削除する。 スーパー表示 で接続されている場合は、すべての制約を削除し、セーフレイアウトアンカーで再接続します。または、制約をダブルクリックし、スーパー・ビューからセーフ・エリア・アンカーへの接続を編集する。

セーフエリアレイアウトを有効にし、制約を編集する方法のスナップショットのサンプルです。

上記の変更の結果は以下のとおりです。

---

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 Official Documentation for セーフエリア レイアウト ガイド

iPhone-Xのユーザーインターフェースデザインを担当するには、セーフエリアが必要です。以下はその基本的なガイドラインです。 iPhone-XのユーザーインターフェイスをSafe Area Layoutでデザインする方法