Udostępnij za pośrednictwem

Praca z rozmiarami ekranu systemu watchOS na platformie Xamarin

  • Artykuł

Zegarek Apple Watch jest dostępny w dwóch rozmiarach ekranu:

  • 38mm

    • 136 x 170 pikseli logicznych (272 x 340 pikseli fizycznych)

  • 42mm

    • 156 x 195 pikseli logicznych (312 x 390 pikseli fizycznych).

Podczas projektowania i testowania aplikacji należy wziąć pod uwagę rozmiar ekranu.

Projektant interfejsu systemu watchOS

Domyślnie Visual Studio dla komputerów Mac Projektant będzie wyświetlać kontrolery interfejsu w dowolnym zegarku Apple Watch.

The Designer displays watch interface controllers at Any Apple Watch

Użyj menu rozmiaru, aby edytować i wyświetlać podgląd scenorysu w jednym z dostępnych rozmiarów ekranu: 38mm lub 42mm:

Selecting the 38mm or 42mm size

Większy rozmiar ekranu czasami renderuje zawartość, która zostanie obcięta/ukryta na mniejszym ekranie. Pamiętaj, aby przetestować oba rozmiary.

Projekt interfejsu

Aplikacja powinna wyświetlać tę samą zawartość na ekranie, niezależnie od rozmiaru i powinna rozszerzać elementy lub kontrakt zgodnie z potrzebami. W Visual Studio dla komputerów Mac Projektant w Inspektorze atrybutów należy użyć opcji Względne do kontenera lub rozmiaru, aby dopasować zawartość w preferencji do stałych rozmiarów.

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

Ponieważ ekran zegarka jest otoczony czarnym bezelem, zapewnienie wypełnienia wokół interfejsu nie jest zalecane. Niech elementy spoczywają na krawędzi ekranu i pozwól, aby ramka stanowiła naturalne obramowanie wokół aplikacji.

symulator systemu watchOS

Podczas testowania w symulatorze można łatwo przełączać się między dwoma rozmiarami ekranu przy użyciu menu Urządzenie sprzętowe>.

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

Zasoby obrazów

Należy użyć wielu zasobów obrazów, jeśli pojedynczy zasób nie wygląda dobrze w różnych rozmiarach. Wykazy zasobów obrazów umożliwiają określenie oddzielnych map bitowych dla każdego rozmiaru:

Image asset catalog editor

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

Możesz też użyć kodu, aby określić rozmiar ekranu i załadować różne obrazy w całości:

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);

}

Przeczytaj więcej na temat korzystania z kontrolki obrazu.