iPhoneXのSafeArea対処法

2018年8月22日

 

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のガイドラインに沿ったレイアウトか?

 

この記事を書いた人

籾山遥

haruka_momiyama

関連記事

おすすめの記事