Apple Watchの画面レイアウト

これはWatchKit Advent Calendar 2014の20日目の記事です。 Apple Watchの画面レイアウトはiOSアプリと少し違います。 簡単にまとめてみました。

Apple Watchの画面レイアウト

Apple Watchでは、画面に様々な画面パーツを置くことができます。 ただ、iOSと大きく違う点は、その画面パーツの位置とサイズをCGRectで指定することができないということです。

では、Apple Watchでは、画面パーツの位置やサイズをどのように指定するのでしょうか。

画面パーツのサイズ指定

まず、画面パーツのサイズ(幅、高さ)は下記の3通りの方法で指定することができます。

  • 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とくらべると自由度が低く、実際にアプリをつくっていく上でも困ることが多そうです。