iPhone X対応に向けて。デバイスに寄らないコンテンツ表示のtips的なの

こんにちは、こがです。

春ですね、例年はなんともないのですが今年はどうしてかとても花粉症に悩まされています。こがです。
そして春と言えば、iOSアプリの新規リリースでとうとうiPhone Xへの対応が必須になりましたね。
そんな対応をする際に役に立つと思うものを記事にしてみようと思います。

説明

一つのサンプルとして下端に広告をレイアウトする際にどうするのかというのを紹介しようと思います。

まずは、イメージ画像から見てもらうのがイメージしてもらいやすいのかなと思います。

一つ目がiPhone 8 Plusでの表示です。
二つ目がiPhone Xでの表示です。

ナビゲーションバーが青色で、コンテンツ領域が水色、広告が白という風になっています。
iPhone 8 Plusでは広告が下端にぴったりくっついています。
iPhone XではHome Indicatorの領域がナビゲーションバーと同じ青色になっています。

こんな感じでiPhone Xとそれ以外で表示の切り替えをスマートにする方法です。

やりかた

前提として今回表示する広告コンテンツは高さが50(px?)とします。

下端に表示するViewのAutolayoutの制約として以下の感じに設定します

  • Viewの上端をSafe Areaの下端に対して-50(広告の高さの負値)を設定します
  • Viewの下端をSuper viewの下端に揃えます
  • 表示したい広告をこの対象のViewの上端に揃えます

どうでしょう?とっても簡単だと思いませんか!
しかも、簡単でかつiPhone Xとそれ以外とで同じ方法での実装が出来るのでとてもスマートだと思っています。
是非この方法を使ってみてください!

ということで今回はデバイスに寄らないコンテンツ表示のtipsでした!
ではでは