watchOS 8.0 のシミュレーター（2021/11/23 現在、12/29 修正）で調査したので、置いておきます。
具体的な値
基本的に、x 軸 は minimum layout margin の位置に配置する感じです。y 軸は規則性がいまいち見えてこないのでよくわかりません。元々のステータスバーの高さも絡んでくるので、Apple が算出したものを使うのがベターでしょう。
| デバイス | 配置 | Font Size, Font Weight, Image Scale (Baseline offset) | Spacing | First Baseline from Top |
|---|---|---|---|---|
| 38mm | (1, 1) 9.5x18 | 15pt, Medium, Small (1pt) | 2.5pt | 15pt |
| 42mm | (1, 2.5) 10.5x18 | 16pt, Medium, Small (1pt) | 3.5pt | 16.5pt |
| 40mm | (8.5, 6) 12.5x18 | 16pt, Medium, Medium (3pt) | 3pt | 20pt |
| 44mm | (9.5, 7.5) 13.5x18 | 17pt, Medium, Medium (3pt) | 3pt | 22pt |
| 41mm | (11, 10) 14x18.5 | 18pt, Medium, Medium (3pt) | 3pt | 25pt |
| 45mm | (12, 10) 15x19.5 | 19pt, Medium, Medium (3pt) | 3pt | 26pt |
文字サイズ
現在、watchOS 8.3 でのみ調査しております。
また、次のページを参照すること。
- PUICNavigationBarSmallTitleLabel: .headline (Semi-Bold) / .body (Regular) の Medium 版 (legibilityWeight が Bold の場合、Bold。ただし、SwiftUI が勝手に対応してくれます)
- PUICNavigationBarLargeTitleLabel: (次表の Large Title)pt, Regular 固定 (legibilityWeight が Bold の場合、Semi-Bold。ただし、SwiftUI が勝手に対応してくれます)
太字はデフォルト設定の場合。「-」はそもそも設定で選べない。
| デバイス | xSmall | Small | Large | xLarge | xxLarge | xxxLarge | AX1 | AX2 | AX3 | Large Title | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 38mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | - | - | - | |
| 42mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | - | - | - | |
| 40mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | - | - | 25 | |
| 44mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 26 | |
| 41mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | |
| 45mm | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 26 |
Typography のページも書いてあるが、デフォルト設定は以下の通り。ただし、AX* というアクセシビリティー向けのサイズ設定が 44mm, 41mm, 45mm 以外に提供されないと書いてあるが、実際は AX2, AX3 のみで、AX1 は全てのデバイスに提供されている。
- Small: 38mm のデフォルト
- Large: 40mm, 41mm, 42mm のデフォルト
- xLarge: 44mm, 45mm のデフォルト
レイアウト
- V: .top + offset = .firstBaseLine (offset は 1 つ目の表の最後の項目参照)
- H: [minimum layout margin] + Back + [Spacing] + Title + [Spacing] + PUICStatusBarNavigationElement
or,
- H w/o Back: [minimum layout margin] + Title + [Spacing] + PUICStatusBarNavigationElement
時計の部分 (PUICStatusBarNavigationElement) は時間によって変動するっぽい。おそらく OS レベルだと API 叩いて、それを Auto Layout に指定しているのだと思う。もしやるなら、文字サイズ揃えたやつでシミュレーションして非表示にするとか？ 分間ごとに更新するシステム実装が必要。
注意
- Image Scale とは imageScale (SwiftUI) や UIImage.SymbolScale (UIKit) のこと
- First Baseline from Top とは画面上部と firstBaseline の offset。Auto Layout ベースでレイアウトされているので、この値を抽出した。アイコンにもタイトルにも両方同じ値が指定されている。
