LoginSignup
270
244

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-19

論理尺度比較図

ピクセル値ではなく、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で変化するマージン幅にも対応できる。

270
244
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
270
244