はじめに
Xcodeで『.xib』や『Main.storyboard』で表示される画面を触っていて、ViewとSafe Areaの違いについて気になり、まとめました。
「Viewは画面全体を示しているのに、Safe Areaはなんで上下を除いた中央部分だけなのか？」
そんな疑問を解決するために、iPhoneの画面構造を「Safe Area」と「システム予約領域」、そしてそれらを正しく配置するための「Constraints（制約）」という3つのキーワードで整理しました。
1. iPhoneの画面は大きく2層に分けられる?
iPhoneの画面をレイアウトする際、Viewの「画面全体」を使えばいいというわけではありませんでした。画面にはiOSシステム専用の場所が最初から決まっていたからです。
私なりに調べて大きく2つに分けられていることに気がつきました。
システム予約領域（避けるべきハードウェア部分）
iOSが、時刻や電波状況を表示したり、ホーム画面に戻るためのスワイプ操作を受け付けたりするために、すでに使用不可なエリアです。
- 上部： ステータスバー、ノッチ、Dynamic Islandがあるエリア。
- 下部： ホームインジケーター（ホームに戻るための細い棒）があるエリア。
Safe Area（ユーザーが快適に操作できる安全な場所）
上下の予約領域を除いた部分であるSafe Areaが、**「アプリのコンテンツを安全に配置できるエリア」**のことです。Safe Areaがあることにより、ハードウェア部分との干渉を避けられ、もしiPhoneの形状等が変わったとしても、制作したアプリが崩れる心配がなくなります。
2. 図解で見る画面構造
言葉で説明するよりも、図で見ると一目瞭然です。
※Nano bananaで生成しております。
- 赤色のエリア（システム予約領域）： 既にiOSのための場所になっていて、ボタンやラベルの配置はできません。
- 緑色のエリア（Safe Area）： 私たちのアプリのための場所。ここにボタンやラベル等々を配置します。
- 一番外側の青枠（View / Superview）： 背景色や背景画像は、この全体に広げることで使用するアプリの世界観を感じられます。
3. コンテンツを固定する「Constraints（制約）」
これは私の戒めになりますが...
ラベルやボタン等(コンテンツ)を置いたら「必ず」制約をつける。
Xcodeでラベル（UILabel）を配置しただけでは、iPhoneの機種（画面サイズ）が変わった瞬間にレイアウトがおかしなことになりました。
崩れないレイアウトを作るための鉄則は、**制約（上下左右の配置を決める）**です。
どんなに小さなパーツでも、配置したら必ず制約を定義する癖をつけていきたいと思います。
まとめ
iPhoneレイアウトの基本は、この3つです。
- 予約領域（赤）：システム専用。文字やボタンの配置は禁止！
- Safe Area（緑）：ナビゲーションバーなどの『システム要素』や『ハードウェアの物理的な形状』にコンテンツ（文字やボタン等々）が遮られない部分
- Constraints（制約）：アプリが崩れないために配置（上下左右）を決める
今回は普段何気なく使用しているiPhoneの画面に色々なルールが設定されていることを
Swift学習を通して理解できた気がしました。これからも広く深く学んでいきます。