(cache)iOSアプリのiPhoneX対応メモ

概要

safeAreaにタップできるボタン等を置かない
iPhoneXに合わせて見た目を調整する

SafeAreaとは

iPhoneXの場合は

フロントカメラとかぶっている部分(Top:34pt)、
従来のホームボタンっぽい操作とぶつかる部分(Bottom:44px)

をsafeAreaとして、タイトルやボタン等は置かないが背景等は表示するようにします。

SafeAreaの取得(Storyboard/AutoLayout)

Safe Area Relative Marginの項目がデフォルトでOnだと思うので、
そのままLayoutGuideにそって今まで通り作ると対応される。

SafeAreaの取得(コード)

iOS11からUIViewにsafeAreaInsetsメソッドが追加されているので、そこから取得する。

コード上で対応する際の注意点

そのViewの位置に応じたSafeAreaInsetsが返ってくる
- TopのSafeAreaが34ptだとして、Topから15pt離れた位置に置いたViewには34-15=19ptのSafeAreaInsets.topが取得できる
addSubviewされる前など、ビューが追加されてない(ViewHierarchyに入っていない)ときはUIEdgeInsets.zeroが返ってくる

困ったこと

static let barHeight = CGFloat(30)

みたいな定数に応じてtableViewのlayoutやConsetInsetsをView追加前に調整している場合に、上手くUIView.safeAreaInsetsを使って調整することができなかった。

暫定的な対応としてUIScreen.main.boundsをつかってiPhoneXかどうか判定して、iPhoneXの場合は考慮するべきinsetsを返すextentionを作って調整した。

class func screenSafeAreaInsets() -> UIEdgeInsets {
    let isiPhoneX = UIScreen.main.bounds.size == CGSize(width: 375, height: 812)
    return isiPhoneX ? UIEdgeInsets.init(top: 44, left: 0, bottom: 34, right: 0) : .zero
}
// iPhoneX以外にもSafeAreaInsetsを考慮するべき状況は増えていくと思うので、あくまで暫定的な対応として使ってください。画面回転は考慮していません。