iPhoneXに対応しました！

ReluxをiPhoneXに対応しました！
発売前に対応は完了していたのですが...時間がとれず...（反省）

そしてAppタブの「iPhoneXにおすすめ」に掲載してただきました🎉

iPhoneX対応についてはいくつか記事があがっていますが、同じようにReluxでやったことについて書きたいと思います。載せているスクリーンショットはクリックで拡大することができます。拡大すると蟹が食べたくなるかも...

　

　

　

iPhoneX対応

開発環境

• Xcode9以降
• iOS SDK 11以降

セーフエリア

セーフエリアとは

アプリのコンテンツやUIが正しく表示され、操作しやすいように安全な領域（セーフエリア）が新たに設けられています。セーフエリアはAutoLayoutに対応していれば簡単に対応することができます！

参考URL
Update Apps for iPhone X - iOS - Apple Developer

画面上部の扱い

セーフエリアに基づいてステータスバーに自動的にスペースが挿入されます。
ステータスバーの高さを20pxとして扱っているアプリは、レイアウト崩れなどが発生する可能性があります。

丸みを帯びたディスプレイになったのでコンテンツやUIをコーナーに配置してはいけません。また、センサーハウジング（切り欠き部分）にもかぶらないように配置する必要があります。

画面下部の扱い

ホームインジケータに干渉しないようにする必要があります。
特に画面下部に固定するようなUIは特に注意です。

Storyboardでセーフエリアを有効にする

User Safe Area Layout Guides にチェックをいれることで有効になります。
有効にするとUILayoutGuideが追加されます。

ソースコード上からセーフエリアを取得する

safeAreaInsetsを使用します。
UIView の layoutSubviews もしくは UIViewController の viewWillLayoutSubviews で正しい値が取得できます。

参考記事
qiita.com

Swiftの場合

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    if #available(iOS 11.0, *) {
        let safeAreaInsets: UIEdgeInsets = view.safeAreaInsets
    }
}

Objective-Cの場合

- (void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];    
    if (@available(iOS 11.0, *)) {
        UIEdgeInsets safeAreaInsets = self.view.safeAreaInsets;
    }
}

スクリーンエッジジェスチャー

iPhoneXではスクリーンエッジジェスチャーで様々なことができます。

• ホームスクリーンに戻る
• アプリスイッチャー
• 通知センター
• コントロールセンター

この操作と干渉しないようにする必要があります。
干渉してしまう場合はエッジプロテクトを使用します。
エッジプロテクトを使用すると
1回目にアプリ固有のジェスチャーが呼び出され、
2回目にシステムジェスチャーが呼び出されます。

Swiftの場合

override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {
    return .bottom
}

Objective-Cの場合

- (UIRectEdge)preferredScreenEdgesDeferringSystemGestures {
    return UIRectEdgeBottom;
}

Reluxではセレクションズ（テーマ別まとめ）、人気宿ランキングでエッジプロテクトを使用しています。

Reluxで対応した内容は以上になります。
iPhoneXの画面いっぱに表示される写真が綺麗なので
ぜひダウンロードして触ってみてください🙏

Relux（リラックス）

• Loco Partners Co., Ltd.
• 旅行
• 無料
•