Xamarin에서 watchOS 레이아웃 작업Working with watchOS Layout in Xamarin

Apple Watch 화면 크기 의 레이아웃을 디자인 하는 데는 고유한 과제가 있습니다.Designing layouts for the Apple Watch screen sizes presents unique challenges.

디자인 팁Design Tips

핵심 요소는 작은 조사식 화면에서 사용자 인터페이스를 읽을 수 있고 사용 가능 하도록 설정 하는 것입니다.The key point is: make your user interface readable and useable on a small watch screen, with a large finger. IOS 시뮬레이터 (매우 큰 것으로 나타남) 및 마우스 포인터 (가장 작은 터치 대상에서 작동 함)에 대 한 디자인의 트랩에 속하지 않습니다.Don't fall into the trap of designing for the iOS Simulator (which appears very large) and a mouse pointer (which works with tiny touch targets)!

  • 검은색 배경을 사용 합니다 .이는 시청의 검정 베젤을 사용 하 여 큰 화면 효과를 만듭니다.Use a black background - it creates the illusion of a larger screen with the watch's black bezel.

  • 화면 레이아웃 주위에 채움 안 함-베젤은 자연 시각적 안쪽 여백을 형성 합니다.Do not pad around your screen layout - the bezel forms a natural visual padding.

  • 가독성에 집중 합니다.Focus on readability. 텍스트를 읽을 수 있도록 글꼴 크기와 색을 신중 하 게 사용 합니다.Use font sizes and colors judiciously to ensure text is readable. 자동 동적 형식 지원을 받으려면 기본 제공 텍스트 스타일을 사용 합니다.Use the built-in text styles to get automatic Dynamic Type support.

  • 터치 대상 크기에 집중 합니다.Focus on touch target sizes. 텍스트 레이블이 있는 Buttons/tappable 테이블 행은 전체 화면에 걸쳐 있어야 합니다.Buttons/tappable table rows with text labels should span the whole screen. Apple은 "세 개 이상의 항목을 나란히 표시 하지 않음"을 의미 하 고, 텍스트 레이블이 아닌 아이콘을 사용 하는 경우를 말합니다.Apple says "never place more than three items side-by-side", and if you do use icons and not text labels.

  • Menu 컨트롤 을 사용 하면 덜 자주 사용 되는 기능을 노출 하 여 응용 프로그램 디자인을 명확 하 고 간결 하 게 유지할 수 있습니다.Use the Menu control to expose less-frequently used functionality to keep your app design clear and concise.

구현Implementation

Watch 키트에는 멋진 조사식 앱 레이아웃을 작성 하는 데 도움이 되는 다음 컨트롤이 포함 되어 있습니다.Watch Kit includes the following controls to help you build attractive watch app layouts:

인터페이스 컨트롤러Interface Controller

WKInterfaceController는 모든 장면의 기본 클래스입니다.The WKInterfaceController is the base class all of your scenes.

인터페이스 컨트롤러의 디자인 화면은 세로 그룹처럼 동작 합니다. 다른 컨트롤은 인터페이스 컨트롤러로 끌 수 있으며, 다른 컨트롤은 다른 컨트롤 위에 자동으로 배치 됩니다.The design surface for the interface controller behaves like a vertical Group: you can drag other controls onto the interface controller and they will be automatically laid-out one above the other:

각 컨트롤의 위치크기 속성을 설정 하 여 모양을 제어할 수 있습니다.You can set the Position and Size properties on each control to control their appearance:

크기를 컨테이너에 상대적 으로 설정 하면 비례 값과 오프셋 조정을 제공할 수 있습니다.When the size is set to Relative to Container you can provide a proportional value and an offset adjustment. 이 스크린샷은 조사식 화면 너비 (0.8)의 80%를 사용 하도록 설정 된 단추를 보여 줍니다.This screenshot shows a button that has been set to use 80% of the watch screen's width (0.8):

그룹화Group

WKInterfaceGroup는 가로 또는 세로로 컨트롤을 stack으로 구성 될 수 있는 간단한 레이아웃 컨테이너입니다.WKInterfaceGroup is a simple layout container that can be configured to stack controls vertically or horizontally. 기본적으로 각 컨트롤 간의 간격을 포함 하지만 특성 검사자에서 간격 (및 인세트)을 수정할 수 있습니다.It includes spacing between each control by default, but you can modify the spacing (and insets) in the Attributes inspector.

그룹 자체의 크기를 조정 하 고 주위에 컨트롤을 기준으로 위치를 지정 하 고 그룹을 중첩 하 여 복잡 한 레이아웃을 만들 수 있습니다.Groups can themselves be sized and positioned relative to the controls around them, and groups can be nested to create complex layouts.

구분 기호Separator

구분 기호 컨트롤은 레이아웃에 시각적 지침을 제공 하기 위한 것입니다.The separator control is intended to help provide visual guidance in your layout. 구분 기호 (또는 배경색 또는 이미지)를 사용 하 여 사용자가 화면에 관련 된 콘텐츠를 이해할 수 있습니다.Use separators (or background colors or images) to help the user understand which content is related on your screen.

참고 화면의 전체 너비를 사용 하지 않는 파랑 및 녹색 구분 기호는 고정 또는 컨테이너 크기를 기준 으로 구성 됩니다.Note the blue and green separators that don't use the full width of the screen have been configured with either Fixed or Relative to Container sizes.

콘텐츠 컨트롤Content Controls

Label, Image, Button, Switch, Slider, Map기타 컨트롤이없으면 레이아웃이 완료 되지 않습니다.No layout would be complete without the Label, Image, Button, Switch, Slider, Map, and other controls. 각 컨트롤의 위치 및 크기 설정 또는 그룹 을 사용 하 여 레이아웃에 배치할 수 있습니다.These can be positioned in your layouts using Groups or the position and size settings on each control.