269
242

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.

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で変化するマージン幅にも対応できる。

269
242
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
269
242

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?