ios11
NIFTYDay 5

iOS11 / iPhone X 対応をした話

More than 1 year has passed since last update.

この記事はNIFTY Advent Calendar 2017の5日目の記事です。
4日目は@kanishionoriさんの「CSS3 animationで絵文字をよりエモくする方法」という記事でした。

はじめに

この記事は、iOS11 / iPhone X 対応をするためにこんなことをしましたというメモです。
ちなみにわたしはiOSアプリ開発を始めたばかりの初心者です。そのため記事中「は????」となる部分があるかもしれません。ぜひアドバイスください。
よろしくお願いします。

iOS11 に対応する

余白を最適化

状況

iOS11ではUIScrollViewContentInsetAdjustmentBehaviorが追加され、Navigation bar / Tool bar分の余白が自動でとられるようになりました。
これまでcontentInsetで余白を指定していた場合には、余計に広く表示されてしまいます。

対応

iOS11のみ余白をいれないようにしました。

if (UIDevice.current.systemVersion as NSString).floatValue < 11.0 {
    self.view.contentInset = UIEdgeInsets(top: self.topLayoutGuide.length, left: 0, bottom: 0, right: 0)
}

テーブルヘッダー/フッターの高さを最適化

状況

UITableViewのSelf-Sizingがデフォルトになったことにより、高さが規定より小さくならなくなりました。
これにより高さを0にしていたフッターの幅がおおきくなり、表示が崩れてしまいました。

対応

下のように指定するとこれまで通りの表示となります。

self.tableView.estimatedSectionHeaderHeight = 0;
self.tableView.estimatedSectionFooterHeight = 0;

サーチバーの高さを最適化

状況

サーチバーの高さが高くなったせいで、アニメーションやら表示やらに様々な影響がでてしまいました。

対応

ゴリゴリ高さ指定しました。

if #available(iOS 11.0, *) {
    searchBar.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
}

iPhone X に対応する

iPhone X の縦長画面に最適化

状況

iPhone Xに最適化されていない場合、上下に黒帯が表示されてしまいます。

対応

iPhone X用の1125px×2436pxのスプラッシュ画像を設定しました。
これだけでいいの…?うそでしょ…?感すごかったです。

SafeAreaに対応する

状況

画面最下部に要素を設置していると、ホームインジケーターにかぶってしまいます。
触るアクションのある要素はSafeArea内におさめましょう。

対応その1:safeAreaInsetsを使う

self.view.safeAreaInsetsでSafeAreaの広さを取得できます!
viewWillLayoutSubviews以降のタイミングだと計算済みで使えるそうです。

対応その2:safeAreaLayoutGuideを使う

self.view.safeAreaInsetsviewWillLayoutSubviewsの時点でまだ0だったりすることもあり、扱いがむずかしいです。対してこちらはLayoutGuideなのでタイミング関係ありません。心強い味方です(AutoLayoutになっているor簡単に移行できるなら)。

if (@available(iOS 11.0, *)) {
    self.view.addConstraints([
        subview.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor, constant: -44.0),
        subview.heightAnchor.constraint(equalToConstant: 44.0)
    ])
}

まとめ

iOS11/iPhone Xのために対応したのは以下の4点でした。

  • UITableViewのSelf-Sizingがデフォルトになった
  • contentInsetの調整がいらなくなった
  • サーチバーの高さが高くなった
  • iPhone Xの縦長画面
  • SafeAreaという概念が出てきた

悲しいことに、謎アニメーションなどはまだ問題として残っていますが、見つけて直すことができたのは上の4点起因のものくらいです。
もっと精進したいとおもいます。

明日は@tsubasaogawaさんの記事です。よろしくお願いします!!