41
34

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.

iPhoneX対応について

Last updated at Posted at 2017-10-16

備忘録を兼ねてます。適宜情報を追加していきます。

iPhoneX概要

・発売予定日:2017/11/3(金)
・画面サイズ:375 x 812
・セーフエリア(Portrait):375 x 734
・セーフエリア(Landscape):724 x 354
その他は以下の記事らへん参照のこと。
iPhoneXでのAutoLayoutをきれいに書くための試行錯誤
iPhone Xのセーフエリアやマージン幅について

最低限把握すべき内容

  • iPhoneXで全画面表示にする方法(スプラッシュ画面設定:General>App Icons and Launch Images内の設定による)
    • スプラッシュ画面設定でlaunch imageを使用:iPhoneX用の画像(1125px x 2436px)を設定する
    • スプラッシュ画面設定でlaunch screenを使用:何もしなくてもok
  • launch screenを使っていると問答無用で全画面になるため、safe areaに早急に対応しないとiPhoneXでレイアウトが崩れる危険性が高い(角丸や上部中央の受話口周りの切り欠きでUI要素がかぶるなど)
  • セーフエリア(safe area)の概念が新しく追加された(iPhoneXには切り欠きや角丸、ホームバーがあるため、それらに重ならない安全な領域として新しく作られた概念)
  • 画面下部でのスワイプジェスチャはホームバー側が優先してしまうため、効かなくなる

対応について

  • UIScrollViewでcontentInsetAdjustmentBehaviorというプロパティが増えている。デフォルトだとautomaticが設定されており、contentInsetに自動で良い感じの値をセットしてくれるが、これが鬱陶しい場合はneverにセットする。UITableViewやUIWebviewのscrollViewプロパティも同様であることに注意(参考になる記事
  • storyboardのconstraintで、relative marginsのチェックのon/offによってsafety marginが考慮されたりされなかったりする。意図した描画と違うかどうかはiPhone XのDevice表示で確認するとわかるので、意図した表示と違う場合はconstraintのsecond itemでRelative to marginのチェックを確認する(参考になる記事
  • コードからsafe areaを取得する場合は、UIViewのsafeAreaInstesプロパティを使う。なお、これはviewの配置箇所に対して相対的に取られるもので、viewWillLayoutSubviews以降のライフサイクルで取れる。もしくはUIView#layoutSubviewsでも取れる(参考になる記事

デザインについて

  • safe area外を黒く塗りつぶしたりしてはいけない。標準のmapアプリのように、レイアウトとしては画面全体となるように良い感じに設計しなくてはいけない(ナビゲーションバーやタブバーなどを標準のまま使用する場合は自動で良い感じにしてくれるが、多くの場合は独自の設計が入り込んでいるので全て確認が必要)
  • 全画面に表示はするが、操作可能なパーツはsafe area外に配置しないこと
  • 画像は@3xが適用される。launch imageは1125px x 2436pxとなる
  • ステータスバーが従来の高さと変わるため、決め打ちの値にしているとおかしくなりがち。しかも従来はステータスバー上に通話中等のバックグラウンドタスクが表示されると高さが変わったが、iPhoneXでは変わらない
  • 画面が縦長で従来のものとはだいぶアスペクト比が違う
  • iPhoneXからワイドカラー(P3カラー)対応となり、色味が変わる
41
34
4

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
41
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?