Apple Watch series 4が発表されました。
画面が大きくなり、iPhone Xのような角丸のOLEDが搭載されています。
iPhone Xのノッチや角丸に対応させるためにiOS 11ではSafe Areaというのが導入されたように、watchOS5でもseries 4の角丸に対応させるためSafe Areaが導入されました。
その点色々とややこしくなったので、そのまとめです。
基本的にはここの内容になってます
Designing for Apple Watch Series 4
画面サイズ
| モデル | 画面解像度 | ポイント | 倍率 |
|---|---|---|---|
| 38mm | 272x340 | 136x170 | 2 |
| 40mm | 324x394 | 162x197 | 2 |
| 42mm | 312x390 | 156x195 | 2 |
| 44mm | 368x448 | 184x224 | 2 |
40mmと42mmを比較すると、40mmのほうが少しだけ画面解像度が大きいですが、ほとんど違いはありません。
なので、画面をレイアウトするときは、40mmと42mmのサイズを共通にし、38mmではそれをスケールダウン、44mmではスケールアップをすればいいみたいです。
画面サイズによって実行するプログラムを変えたい場合、
WKInterfaceDevice.current().screenBoundsでポイントの値が取得できるので、それを使ってif分岐しましょう。
Safe Area
Apple Watch series 4ではiPhone Xのように画面四隅が丸くなっています。
そのため、画面いっぱいにコンテンツを表示すると、四隅が欠けてしまいます。
Safe Areaはそれを防ぐために、コンテンツが欠けることなく表示できる長方形のエリアを定めたものです。
Apple Watch series 4では、下の表に書いてあるサイズで上下に余白を設けて定義してあります。
| モデル | top | left | bottom | right |
|---|---|---|---|---|
| series4 40mm | 28pt | 0.5pt | 28pt | 0.5pt |
| series4 44mm | 31pt | 0.5pt | 31pt | 0.5pt |
Storyboard
Storyboardでは自動でSafe Area内に配置されます。
HeightをRelative Containerで1倍にすればSafe Area内で最大の高さになりますし、
Vertical AlignをBottomにすればSafe Areaの下部につきます。
しかし、スクロールをしない1画面のレイアウトではSafe Area外の領域も使っていっぱいに表示させたい場合がほとんどでしょう。
そんなときは、Interface ControllerのFixed to screen edgesをオンにすれば、Safe Areaを無視して画面いっぱいにレイアウトされるようになります。
実行結果はこんな感じ
左からそれぞれ
- series 3 42mm
- series 4 40mm, Fixed to screen edgesオフ
- series 4 40mm, Fixed to screen edgesオン
です。
ちなみに、StoryboardのプレビューはSafeAreaや画面の角丸を反映していないので、シミュレータで実行しないとレイアウトの確認はあんまりできない。早く対応してくれないかな。
Swift
watchOS5では、WKInterfaceControllerがcontentSafeAreaInsetsという値を持っており、これがSafe Area外部の余白のサイズになります。
ただし、僕の環境で確認すると、初回にawakeとwillActivateが呼び出されるタイミングではcontentSafeAreaInsetsがゼロになっており、didAppearの時点では正確な値が格納されていたので、プログラムからInterfaceController表示時にレイアウト調整を行なっている人は注意してください。