Xamarin에서 watchOS 화면 크기 작업Working with watchOS Screen Sizes in Xamarin

Apple Watch는 다음과 같은 두 가지 화면 크기로 사용할 수 있습니다.Apple Watch is available in two screen sizes:

  • 38mm38mm

    • 136 x 170 논리 픽셀 (272 x 340 실제 픽셀)136 x 170 logical pixels (272 x 340 physical pixels)
  • 448mm42mm

    • 156 x 195 논리 픽셀 (312 x 390 실제 픽셀)156 x 195 logical pixels (312 x 390 physical pixels).

앱을 디자인 하 고 테스트할 때는 화면 크기를 고려해 야 합니다.You should take screen size into account when designing and testing your apps.

watchOS Interface 디자이너watchOS Interface Designer

기본적으로 Mac용 Visual Studio 디자이너는 모든 Apple Watch에서 조사식 인터페이스 컨트롤러를 표시 합니다.By default the Visual Studio for Mac Designer will display watch interface controllers at Any Apple Watch.

크기 메뉴를 사용 하 여 사용 가능한 화면 크기 ( 38mm 또는 42mm) 중 하나에서 스토리 보드를 편집 하 고 미리 봅니다.Use the size menu to edit and preview your storyboard at either of the available screen sizes: 38mm or 42mm:

화면 크기가 클수록 작은 화면에서 잘리거나 숨겨지는 콘텐츠가 렌더링 되는 경우도 있습니다.The larger screen size will sometimes render content that would be truncated/hidden on the smaller screen. 두 크기를 모두 테스트 해야 합니다.Be sure to test on both sizes.

인터페이스 디자인Interface Design

앱은 크기에 관계 없이 화면에 동일한 콘텐츠를 표시 하 고 필요에 따라 요소를 확장 하거나 축소 해야 합니다.Your app should display the same content on the screen, regardless of size, and should expand or contract elements as appropriate. Mac용 Visual Studio 디자이너의 특성 검사자에서는 컨테이너 또는 크기 를 기준 으로 기본 설정의 콘텐츠를 고정 크기에 맞게 사용 해야 합니다.In the Visual Studio for Mac Designer, in the Attribute Inspector, you should use Relative to Container or Size to Fit Content in preference to fixed sizes.

조사식 화면이 검정색 베젤을 묶으 므로 인터페이스 주위의 안쪽 여백을 제공 하지 않는 것이 좋습니다.Because the watch screen is surrounded by a black bezel, providing padding around your interface is not recommended. 화면 가장자리에 대 한 요소를 구성 하 고 베젤을 앱 주위에서 자연 스러운 테두리를 만들도록 합니다.Let elements rest against the edge of the screen and let the bezel form a natural border around the app.

watchOS 시뮬레이터watchOS Simulator

시뮬레이터에서 테스트할 때 하드웨어 > 장치 메뉴를 사용 하 여 두 화면 크기 간을 쉽게 전환할 수 있습니다.When testing on the simulator you can easily switch between the two screen sizes using the Hardware > Device menu.

이미지 리소스Image Resources

단일 자산이 여러 크기에서 잘 보이지 않는 경우 여러 이미지 자산을 사용 해야 합니다.You should use multiple image assets if a single asset does not look good at different sizes. 이미지 자산 카탈로그를 사용 하면 각 크기에 대해 별도의 비트맵이 지정 됩니다.Image asset catalogs allow for separate bitmaps to be specified for each size:

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

또는 코드를 사용 하 여 화면 크기를 확인 하 고 다른 이미지를 모두 로드 합니다.Alternatively, use code to determine the screen size and load different images altogether:

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

}

이미지 컨트롤사용에 대해 자세히 알아보세요.Read more about using the image control.