Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
35
Help us understand the problem. What is going on with this article?
@yuukiw00w

iPhoneX対応について

More than 3 years have passed since last update.

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

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カラー)対応となり、色味が変わる
35
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
35
Help us understand the problem. What is going on with this article?