7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Safe AreaとナビゲーションバーおよびツールバーとUIScrollView

Last updated at Posted at 2017-12-24

iPhone Xの登場と共にレイアウトの基準がSafe Areaへと変わりました。
Safe AreaについてはAppleのドキュメントをどうぞ。
Update your apps for iPhone X.
Positioning Content Relative to the Safe Area

その為、1番上のルートビューはなんでもかんでもSafe Areaに対してレイアウト設定すれば良いと阿呆な自分は思っていました。
ナビゲーションバーとツールバーがある画面でSafe Areaに対してUIScrollViewを上下左右ともにSpace=0として設定しました。(環境はXcode9.2)
top_safearea.png

iOS11.2のシミュレータでビルドするとこんな感じです。一見問題無いように見えます。
iPhone X 11.2とiPhone SE 11.2
iOS11.2_iPhoneX_safearea.png iOS11.2_iPhoneSE_safearea.png

これをiOS10.3のシミュレータでビルドすると、UIScrollViewの上下に変なスペースが出来ます。
iPhone SE 10.3
iOS10.3_iPhoneSE_safearea_top.png iOS10.3_iPhoneSE_safearea_bottom.png


Safe Areaのバグか?とすぐ人のせいにしてしまいますが、よくよく上記の画像を見るとナビゲーションバーやツールバーが真っ白で、ビューが下に入り込んで無いようです。(iOS7のころのを思い出します) そこでUIScrollViewの上下のスペースをSafe AreaにではなくSuperviewに対してSpace=0で設定します。

top_superview.png

すでにXcode上でナビゲーションバーとツールバーに色が透過しているのがわかります。ビルドしてみます。
iPhone X 11.2とiPhone SE 11.2
iOS11.2_iPhoneX_superview.png iOS11.2_iPhoneSE_superview.png

iPhone SE 10.3
iOS10.3_iPhoneSE_superview_top.png iOS10.3_iPhoneSE_superview_bottom.png


今度は大丈夫そうです。ちゃんとナビゲーションバーとツールバーの下に入り込んでいて問題ありません。 iOS10.3でも上下に変なスペースが出来なくなりました。

よく考えたら当たり前なのですが、ちょっと引っかかってしまったので記事にしてみました。
ちなみに、ナビゲーションバーやツールバーが無い場合はSuperviewではなくSafe Areaに対して設定しないとiPhone XのSafe Areaを見事に突破しますので、Safe Area外にパーツが配置されてしまうようなアプリではちゃんとSafe Areaに対して設定しましょう。(左: Superviewへ上下レイアウト, 右: Safe Areaへ上下レイアウト)
また、UIScrollView(またはそれを継承しているUITableViewなど)を使用しない場合は、ナビゲーションバーやツールバーがあってもSafe Areaへ対してのレイアウトで問題無いと思います。
no_bar_iPhone X_superview.png no_bar_iPhone X_safearea.png

※とあるアプリはSafe Areaを突破しステータスバーのアイコン部分に見事にボタンが重なり押すのがかなり困難状況になっていましたが普通にリリースされていたのでAppleのiPhone XのSafe Areaに対する審査は結構ザルなようです。

7
5
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
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?