Help us understand the problem. What is going on with this article?

iPhone Xのセーフエリアやマージン幅について

More than 1 year has passed since last update.

論理尺度比較図

ピクセル値ではなく、iOS ランタイムで扱われる論理尺度での比較図を作りました。単位は pt です。プログラミングにおいては実際にはこちらの座標系が利用されるからです。

iPhone X Series
iPhone X, iPhone XR, iPhone XS, iPhone XS Max 反映版。間違ってたらごめんなさい。

デバイス 解像度 論理尺度 物理尺度 セーフエリア(縦) セーフエリア(横)
iPhone XS Max 3x 414×896 pt 1242×2688 px 414×818 pt 808×393 pt
iPhone XR 2x 414×896 pt 828×1792 px 414×818 pt 808×393 pt
iPhone XS 3x 375×812 pt 1125×2436 px 375×734 pt 724×354 pt
iPhone X 3x 375×812 pt 1125×2436 px 375×734 pt 724×354 pt

X と XS はレイアウトの上では同一です。XR と XS Max は物理サイズと解像度が異なるだけで、論理尺度では一致することがわかります。また、414 という数値は Plus 系に出てきた値であることから、XS Max は Plus 級であることが見て取れます。

iPhone シリーズのレイアウトに関するより詳しい情報は HIG にまとまっています。
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

Large Title 時のステータスバーとナビゲーションバーの高さ

iPhone 8 と iPhone X の高さを比較すると、その差は145ptとなります。Large Title 時のナビゲーションバー下端までの距離は 140pt ですから、差し引いた分が iPhone 4.7" の高さと一致するかと思いきや実は5ptずれるようです。(過去に一致すると書いてしまっていたのは間違いでした。)

ステータスバーのアイコンは中央に配置されていることや、ツールバーとタブバーの高さの差異が無くなったなどの特徴を目視で判断することができます。

iPhone 8 vs. iPhone X, XS

スクリーンショット 2017-09-20 2.17.06.png
iOS HIG (2017); https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Interface Builder でマージン位置にガイド線を引く

Editor > Canvas > Show Layout Rectangles でガイド線を表示できる。

適切なマージンを保つ Auto Layout 制約を設定

Constrain to margins を有効にし、左右制約を Safe Area ではなく View を対象にする。マージンを0にする。
Portrait/Landscapeで変化するマージン幅にも対応できる。

usagimaru
ソフトウェアデザイン
https://interactionmania.com
goodpatch
Goodpatch(株式会社グッドパッチ)は東京、ベルリン、台北にあるWeb / iOS / AndroidなどマルチデバイスアプリケーションのUIデザイン会社です。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
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.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした