はじめに

こんにちは！

12/9の記事に引き続き、iPhoneXについて書こうと思います。
認識違いがありましたらご報告いただけると幸いです。

ご存知の通り、iPhoneXはベゼルレスの全面スクリーンになりホームボタンも廃止されました。
そこで既存アプリの表示はどうなるのかといいますと...ということを一度記事にしておりますので、
一度目を通して頂いてからのほうがわかりやすいかもしれませんｗ

ざっくりした説明ですが、非対応アプリは従来と同じサイズで表示され、
対応アプリでは上下余すことなく情報が表示されるようになります。

さて、本題ですがiPhoneXには画面上部にセンサー類を配置しているため切り欠きがあります。

今回はこの切り欠きをどうするのかについて調べてみたいと思います！

切り欠きを考慮したレイアウト

iOS11からレイアウトにSafeAreaという概念が導入されました。
これは主にiPhoneXのレイアウトに必要な概念です。

簡単に説明すると、画面上部の凹部分と画面下部のホームバーと呼ばれる操作領域を避けてレイアウトしてね、というものです。

凹部分に何か重要な情報があったとしても表示できませんし、
ホームバーとボタン類が被ればユーザビリティが下がるのは当然ですよね。

ではどうすればSafeAreaを考慮したレイアウトができるのか。。。

上下○○ptは配置しちゃダメとか？
え？固定幅なの？

いいえ、違います。（※）

難しいことは考えず、簡単にiPhoneX対応ができちゃうんです。

そう、AutoLayoutならね。

ちょっとおふざけが過ぎました...（言ってみたかっただけ）

さて本題に戻りますが！！

ご存知の方だらけだとは思いますが、iOSのレイアウト方法にAutoLayoutというものが存在します。
もし知らねーよって方はAutoLayoutについて軽く解説した記事も書いていますので良ければこちらも...^^(宣伝ｗ)

このAutoLayoutを使用していると、自動でSafeAreaを計算し配置してくれる便利な機能を使えます。
SafeArea内に配置すればiPhoneXの各種部分に干渉せず、
大画面かつ新体験をユーザーに提供することができるというわけです。
~~開発者泣かせの端末もこれでOK！~~

過去に書いた記事でも言っておりますが、レイアウトを行う上でAutoLayoutが使いにくい場合があります。

~~（あります。と断言しましたが僕はAutoLayoutで事足りるアプリしか作っていないので、あるそうです、が正しい。。。）~~

そんな場合でもSafeAreaを考慮してレイアウトを行わなければなりません。
僕はまだやったことはありませんが、コードからSafeAreaの値を取得しViewの位置を調整する方法が一般的だそうです。（UIViewのsafeAreaInsetsで取得できるらしい）

上のほうで言った、

いいえ、違います。（※）

の※の意はこれです...。

AutoLayoutばかり使用できるわけではないので、どちらの方法も勉強しなきゃですね。。。

超ざっくりした説明になりましたが、
そんなものがあるんだな～、やってみようかな～、と思っていただければ幸いです！！
僕はまだまだSwiftに苦戦させられる日々です。。。
~~まずXcodeに慣れない。~~

ではではこの辺で！

P.S. iPhoneXが寝起きの顔を認証してくれないのが最近の悩みです。