これはWatchKit Advent Calendar 2014の20日目の記事です。 Apple Watchの画面レイアウトはiOSアプリと少し違います。 簡単にまとめてみました。
Apple Watchの画面レイアウト
Apple Watchでは、画面に様々な画面パーツを置くことができます。 ただ、iOSと大きく違う点は、その画面パーツの位置とサイズをCGRectで指定することができないということです。
では、Apple Watchでは、画面パーツの位置やサイズをどのように指定するのでしょうか。
画面パーツのサイズ指定
まず、画面パーツのサイズ（幅、高さ）は下記の３通りの方法で指定することができます。
- Size to fit Content（親アイテムをFillする指定）
- Relative to Container（親アイテムに対する比率で指定）
- Fixed（ピクセル値指定）
「Size to fit Content」は、親のアイテムを満たす幅（高さ）で表示されます。 「Relative to Containerは」は、親のアイテムに対する比率を0.0から1.0までの数値で指定します。 「Fixed」は直接ピクセル値を指定します。
画面パーツの位置指定
さて、次に画面パーツの位置の指定ですが、残念ながらApple Watchでは、画面パーツの位置を指定することはできません。 画面パーツは、左上から順番に、画面をうめていくように並べられます。
42mm x 38mm
Apple Watchには、二つの画面サイズがあります。 38mm のApple Watchの画面サイズは 272px - 340px、42mmのApple Watchの画面サイズは 312px - 390px です。
もし、「Size to fit Content」を指定して、画面サイズいっぱいのエリアにpixel to pixel で画像を表示したい場合、38mmのApple Watchと42mmのApple Watchでは表示したい画像の解像度がかわってきます。
iOSのRetina/non Retinaの場合には、画像ファイルに@2xをつけて対応していましたが、Apple Watchでは、Storyboard上で、38mm のApple Watchと42mmのApple Watchで違うファイル名を指定することができます。 （Xcode betaはNDAバージョンのためXcodeの画面は現時点では表示できません）
この38mm のApple Watchと42mmのApple Watchでの差分指定は、画像ファイル名だけではなく、文字列の内容や色の指定など、画面パーツの多くの要素で指定することができます。
また、Apple Watchでは、Retinaの画像のみ用意すればよく、標準解像度の画像を用意する必要はありません。
まとめ
現時点では Apple Watchの画面レイアウトはiOSとくらべると自由度が低く、実際にアプリをつくっていく上でも困ることが多そうです。
