次の方法で共有

Xamarin での watchOS 画面サイズの操作

  • [アーティクル]

Apple Watch は、次の 2 つの画面サイズで利用できます:

  • 38mm

    • 136 x 170 論理的なピクセル (272 x 340 物理的なピクセル)

  • 42mm

    • 156 x 195 論理的なピクセル (312 x 390 物理的なピクセル)。

アプリを設計およびテストするときは、画面サイズを考慮する必要があります。

watchOS インターフェイス デザイナー

既定では、Visual Studio for Mac Designer では、ウォッチ インターフェイス コントローラーが 任意の Apple Watch に表示されます。

The Designer displays watch interface controllers at Any Apple Watch

サイズ メニューを使用して、使用可能な画面サイズ (38mm または 42mm) でストーリーボードを編集してプレビューします:

Selecting the 38mm or 42mm size

画面サイズが大きいほうに、小さい画面で切り詰められたり非表示になったりするコンテンツがレンダリングされることがあります。 必ず両方のサイズでテストしてください。

インターフェイスのデザイン

アプリは、サイズに関係なく画面に同じコンテンツを表示し、必要に応じて要素を展開または縮小する必要があります。 Visual Studio for Mac Designer の [属性インスペクター] で、固定サイズに優先してコンテナーに対する相対またはコンテンツに合わせてサイズを使用する必要があります。

Use Relative to Container or Size to Fit Content in preference to fixed sizes

ウォッチ画面は黒いベゼルで囲まれているため、インターフェイスの周囲にパディングを提供することはお勧めしません。 要素を画面の端に置き、ベゼルがアプリの周囲に自然な境界線を形成できるようにします。

watchOS シミュレーター

シミュレーターでテストするときは、[ハードウェア] > [デバイス] メニューを使用して、2 つの画面サイズを簡単に切り替えることができます。

The simulator can switch between the two screen sizes using the Hardware Device menu

イメージ リソース

1 つのアセットのサイズが異なる場合は、複数のイメージ アセットを使用する必要があります。 イメージ アセット カタログを使用すると、サイズごとに個別のビットマップを指定できます:

Image asset catalog editor

// specify the asset name, the correct size will automatically be loaded
staticImage.SetImage(UIImage.FromBundle("Walkway"));

または、コードを使用して画面サイズを決定し、さまざまな画像を完全に読み込みます:

bool large = WKInterfaceDevice.CurrentDevice.ScreenBounds.Size.Width > 136.0;
// Load image depending on screen size
using (var image = UIImage.FromBundle (large ? "42mm-Walkway" : "38mm-Walkway"))
{
   myImage.SetImage (image);

}

イメージ コントロールの使用についての詳細情報を参照してください。