Xamarin에서 watchOS 레이아웃 작업
Apple Watch 화면 크기에 대한 레이아웃 디자인은 고유한 과제를 제시합니다.
디자인 팁
핵심은 큰 손가락으로 작은 시계 화면에서 사용자 인터페이스를 읽고 사용할 수 있도록 하는 것입니다. iOS 시뮬레이터(매우 크게 표시됨) 및 마우스 포인터(작은 터치 대상에서 작동)에 대한 디자인의 함정에 빠지지 마세요!
검은 색 배경을 사용 - 그것은 시계의 검은 베젤과 더 큰 화면의 환상을 만듭니다.
화면 레이아웃 주위에 패딩하지 마십시오 - 베젤은 자연스러운 시각적 패딩을 형성합니다.
가독성에 집중합니다. 글꼴 크기와 색을 신중하게 사용하여 텍스트를 읽을 수 있도록 합니다. 기본 제공 텍스트 스타일을 사용하여 자동 동적 형식 지원을 받습니다.
터치 대상 크기에 집중합니다. 텍스트 레이블이 있는 단추/탭 가능한 테이블 행은 전체 화면에 걸쳐 있어야 합니다. Apple은 "세 개 이상의 항목을 나란히 배치하지 마십시오"라고 말하며 텍스트 레이블이 아닌 아이콘을 사용하는 경우
컨트롤을
Menu사용하여 자주 사용되지 않는 기능을 노출하여 앱 디자인을 명확하고 간결하게 유지합니다.
구현
Watch Kit에는 매력적인 시계 앱 레이아웃을 빌드하는 데 도움이 되는 다음 컨트롤이 포함되어 있습니다.
인터페이스 컨트롤러
모든 WKInterfaceController 장면의 기본 클래스입니다.
인터페이스 컨트롤러의 디자인 화면은 세 로 그룹처럼 동작합니다. 다른 컨트롤을 인터페이스 컨트롤러로 끌어다 놓으면 다른 컨트롤 위에 자동으로 배치됩니다.
각 컨트롤의 위치 및 크기 속성을 설정하여 모양을 제어할 수 있습니다.
크기가 컨테이너에 상대적으로 설정된 경우 비례 값과 오프셋 조정을 제공할 수 있습니다. 이 스크린샷은 시계 화면 너비의 80%(0.8)를 사용하도록 설정된 단추를 보여줍니다.
그룹
WKInterfaceGroup 는 컨트롤을 세로 또는 가로로 스택하도록 구성할 수 있는 간단한 레이아웃 컨테이너입니다. 기본적으로 각 컨트롤 사이의 간격을 포함하지만 특성 검사기에서 간격(및 인셋)을 수정할 수 있습니다.
그룹 자체의 크기를 조정하고 주변의 컨트롤을 기준으로 배치할 수 있으며 그룹을 중첩하여 복잡한 레이아웃을 만들 수 있습니다.
구분 기호
구분 기호 컨트롤은 레이아웃에서 시각적 지침을 제공하는 데 도움이 됩니다. 구분 기호(또는 배경색 또는 이미지)를 사용하여 사용자가 화면에서 어떤 콘텐츠가 관련되어 있는지 이해할 수 있습니다.
화면의 전체 너비를 사용하지 않는 파란색 및 녹색 구분 기호는 고정 또는 컨테이너 크기에 상대적으로 구성되었습니다.
콘텐츠 컨트롤
,, SwitchSliderButtonMapImage및 기타 컨트롤이 없으면 Label레이아웃이 완료되지 않습니다.
그룹 또는 각 컨트롤의 위치 및 크기 설정을 사용하여 레이아웃에 배치할 수 있습니다.