YAZエンジニアが運営するメディア

iPhoneXのデザインを検討する際は、

Human Interface Guidelinesに沿ったデザインにする必要があります。

特に今回注意すべき点は、以下の2点です。

• デバイスの丸みを帯びた四隅、センサーハウジング、ホーム画面アクセス用のインジケータについて
  　画面の最上部や最下部に黒色のバーを表示して覆い隠さない。
• どの向きでも、画面の四隅やデバイスのセンサーハウジングで表示が途切れたり、ホーム画面アクセス用の
  　インジケータで要素が隠れたりしないようにする。

ViewをSafeAreaにおさめる為に

iPhoneXのSafeAreaに関して、基本的にはStoryboardのAutoLayoutで対応します。

しかし今回は、コードで動的に対応する為にSafeAreaを取得する方法を紹介します。

safeAreaInsets

SafeAreaの上下左右は、safeAreaInsetsから取得することができます。

ただし、これはiOS11以上の場合のみ取得可能で、iOS10以前のバージョンでは、取得できません。

StatusBar：SafeAreaより上部の余白

safeAreaより上部の余白はStatusBarと呼ばれ、

safeAreaより上の余白の高さ＝StatusBarの高さです。

StatusBarは従来のiPhone端末でも存在するものなので、

StatusBarの高さを変えて対応する場合は、以下の方法で高さを取得します。

StatusBarの高さの取得方法

高さ：UIApplication.shared.statusBarFrame.size.height

これにより、iPhoneXの時とそれ以外の既存iPhone端末の時で、値を振り分けることができます。

StatusBarの値は、現時点では以下の通りです。

iPhoneX：44pt

それ以外のiPhone端末：20pt

HomeIndicator：SafeAreaより下部の余白

一方で、safeAreaより下部の余白はHomeIndicatorと呼ばれ、

safeAreaより下部の余白の高さ＝HomeIndicatorの高さになります。

そして、HomeIndicatorの高さの値は、SafeAreaInsets.bottomで取得できます。

HomeIndicatorの高さの取得方法

高さ：UIApplication.shared.keyWindow!.safeAreaInsets.bottom

先ほどお話したように、safeAreaInsetsはiOS11以上のみ取得可能なので、以下のように記述します。

if #available(iOS 11.0, *) {
　　　//iOSが11以上の端末での処理　
}

safeAreaInsets.bottomの値は、現時点では以下の通りです。

iPhoneX：34pt

iPhoneX以外のiOS11以上の端末：0pt

コードでScrollViewを後付けし、且つStoryboardで修正できない場合など

ScrollViewをコードにて後付けして、Storyboardで修正できない場合があります。

そんな時は、（少し力技ですが）上からその場所を隠してしまいましょう。

viewで、SafeArea外を隠す方法です。

StatusBarとHomeIndicatorの範囲に同サイズのviewを重ねます。

手順

1. StatusBar、HomeIndicatorと同様の位置、サイズでviewを作成
2. viewにaddする

【例】

//ステータスバー
　　　let statusBarView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: view.frame.size.width, height: UIApplication.shared.statusBarFrame.size.height))
　　　statusBarView.backgroundColor = UIColor(hexString: "FFFFFF")
　　　self.view.addSubview(statusBarView)

//ホームインデケータ
if #available(iOS 11.0, *) {
　　　let homeIndicatorView = UIView.init(frame: CGRect.init(x: 0, y: view.frame.height-UIApplication.shared.keyWindow!.safeAreaInsets.bottom, width: view.frame.size.width, height: UIApplication.shared.keyWindow!.safeAreaInsets.bottom))
　　　homeIndicatorView.backgroundColor = UIColor(hexString: "FFFFFF")
　　　self.view.addSubview(homeIndicatorView)
}

最後に

いかがだったでしょうか？

最後に、目視やデバッグでの動作確認のみならず、以下の項目も確認を忘れずに！

□他の端末、バージョンに影響はないか？

□iPhoneXのガイドラインに沿ったレイアウトか？