LoginSignup
20
13

More than 5 years have passed since last update.

平成最後のセーフエリア対応の話をしよう。

Posted at

はじめに

この投稿はCyberAgent Developers Advent Calendar 2018 6日目の記事です!

6日目は現在AbemaTV iOSチームのメンバーの一人であるcokaholicが担当します。

今回は今年の多数の新型iOSデバイスの登場によってさらに多様化した2018年12月現在でのセーフエリア対応について、わかったことや対応する際に気をつけることをTips形式で話していこうと思います。

改めてセーフエリアとは

  • AppleがiOS11から導入した概念
  • ナビゲーションバーやステータスバーなどの外側のUIに被らない安全な領域を取得できる
  • iPhone Xなどの角丸なディスプレイに対しても安全にレイアウトできる領域を取得できる
  • 使用するにはXcode 9+、iOS 11+ SDKが必要

セーフエリア

【随時更新】iPhoneX完全対応マニュアルより

新型iOSデバイスの登場

2017年9月12日のiPhone Xが発表され、セーフエリアの導入により、iOS開発者の間に激震が走り、2018年4月以降に申請するiOSアプリはiPhone Xに対応することが必須化され、そして、iPhone Xの発表からちょうど1年後である2018年9月12日、AppleはiPhone XS, XS Max, XRという3つの新たなiPhoneを発表しました。
image.png

そしてさらに、日本がハロウィンで大騒ぎしている最中である2018年10月30日、Appleは新型のiPad Proを発表しました。ホームボタンが消えたそのフォルムを見た瞬間、私は新たなセーフエリア対応の幕開けを感じました。(新型iPad ProのsafeAreaInsetsの値についての記事はコチラ

image.png

2018年12月現在でのセーフエリア対応Tips

1. isIphoneXはもう使えない

私が以前、【随時更新】iPhoneX完全対応マニュアルを書いた2017年10月時点では角丸なディスプレイに対応するセーフエリアを持ったiOSデバイスはiPhone Xのみでしたが、2018年12月現在、角丸なディスプレイに対応するセーフエリアを持ったiOSデバイスは以下の5種類にまで増えました。

  • iPhone X (5.8 inch)
  • iPhone XS (5.8 inch)
  • iPhone XS Max (6.5 inch)
  • iPhone XR (6.1 inch)
  • iPad Pro (mid2018) (11 inch, 12.9 inch)

このことから、いままで Ekhoo/Device などで端末バージョンや画面サイズを使って isIphoneX: Bool なる判定を行うことができていましたが、もはやこれまで😇

2. iPadであっても角丸なディスプレイに対応するセーフエリアの考慮が必要

いままで角丸なディスプレイに対応するセーフエリアの考慮をしなくても良かったiPadですが、2018年10月30日に発表された下記画像のようにホームボタンを取り除き、Home Indicatorを搭載した新型iPad Proの登場により、iPadでも角丸なディスプレイに対応するセーフエリアの考慮が必要になりました。
そのため、単純なisPad: Boolでのレイアウトに関する分岐などは見直す必要があります。
とはいえ、あらかじめAutolayoutでtopbottomのセーフエリアを考慮してレイアウトされたビューに関しては、特に修正する必要は無さそうです。

image.png

3. Xcode 10.1以降でビルドしないと、新型iPad Proではセーフエリアが使えない

Appleが 余計な 気を利かせたのか、Xcode 10.1以降でビルドしていないアプリでは、新型iPad Proのセーフエリア部分である上下セーフエリアが勝手に切り取られて表示されてしまいます。
そのため、Xcode 10.1以降でビルドしないと、新型iPad Proのセーフエリアは確認できません。
以下の画像は、Xcode 10.1以降でビルドしていないアプリ(Chrome)の表示例です。上下のセーフエリア部分が黒塗りになってしまい、レイアウトから外されてしまっていることがわかります。

image.png

また、Xcode 10.1以降でビルドしないと、UIViewControllertraitCollectionのオーバーライドが上手くいかないこともわかっております。
ですので、iPadに対応したアプリケーションは、新型iPad Proで正しい表示を行うためにも、できるだけ早くXcode 10.1以降でビルドしたアプリでアップデートを行うことをお勧めします。

 最後に

今回のTipsはここまでとなります。
今年の9月に発表されたiPhone XS, XS Max, XRと今回発表された新型iPad Pro (2018) の流れを見る限り、今後のAppleの新デバイスはFace IDを活用したホームボタン無しのHome Indicatorを持ったデバイスがどんどん増えていくと思われます。
そのため、今後のiOSアプリ開発ではセーフエリアを考慮したレイアウトやデザインを意識することが必須となっていくのではないかと思いました。
そして、新型iPad Proはとても使いやすく、毎日重宝しております(個人的感想)。

以上です!
最後まで読んでいただき、ありがとうございました!

20
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
13