다음을 통해 공유

Xamarin에서 watchOS 화면 크기 작업

  • 아티클

Apple Watch는 다음 두 가지 화면 크기로 사용할 수 있습니다.

  • 38mm

    • 136 x 170 논리 픽셀(272 x 340 물리적 픽셀)

  • 42mm

    • 156 x 195 논리 픽셀(312 x 390 물리적 픽셀).

앱을 디자인하고 테스트할 때 화면 크기를 고려해야 합니다.

watchOS 인터페이스 디자이너

기본적으로 Mac용 Visual Studio 디자이너는 모든 Apple Watch에 시계 인터페이스 컨트롤러를 표시합니다.

The Designer displays watch interface controllers at Any Apple Watch

크기 메뉴를 사용하여 사용 가능한 화면 크기(38mm 또는 42mm) 중 하나에서 스토리보드를 편집하고 미리 볼 수 있습니다.

Selecting the 38mm or 42mm size

화면 크기가 클수록 작은 화면에서 잘리거나 숨겨지는 콘텐츠가 렌더링되는 경우가 있습니다. 두 크기 모두에서 테스트해야 합니다.

인터페이스 디자인

앱은 크기에 관계없이 화면에 동일한 콘텐츠를 표시해야 하며, 요소를 적절하게 확장하거나 계약해야 합니다. Mac용 Visual Studio 디자이너의 특성 검사기에서 컨테이너에 대한 상대 또는 크기를 사용하여 콘텐츠를 고정된 크기에 맞게 기본 설정해야 합니다.

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

시계 화면은 검은색 베젤로 둘러싸여 있으므로 인터페이스 주위에 안쪽 여백을 제공하는 것은 권장되지 않습니다. 요소가 화면 가장자리에 놓이고 베젤이 앱 주위의 자연스러운 테두리를 형성하도록 합니다.

watchOS 시뮬레이터

시뮬레이터에서 테스트할 때 하드웨어 > 디바이스 메뉴를 사용하여 두 화면 크기 사이를 쉽게 전환할 수 있습니다.

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

이미지 리소스

단일 자산이 다른 크기로 잘 보이지 않는 경우 여러 이미지 자산을 사용해야 합니다. 이미지 자산 카탈로그를 사용하면 각 크기에 대해 별도의 비트맵을 지정할 수 있습니다.

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

}

이미지 컨트롤 사용에 대해 자세히 알아보세요.