Поделиться через

Работа с макетом watchOS в Xamarin

  • Статья

Проектирование макетов для размеров экрана Apple Watch представляет уникальные проблемы.

Проектирование Советы

Ключевой точкой является создание удобочитаемого пользовательского интерфейса и его использования на небольшом экране просмотра с большим пальцем. Не падайте в ловушку проектирования для симулятора iOS (который появляется очень большой) и указатель мыши (который работает с крошечными целевыми объектами касания)!

  • Используйте черный фон - он создает иллюзию большего экрана с черной рамкой часов.

  • Не кладите вокруг макета экрана - рамка формирует естественную визуальную заполнение.

  • Сосредоточьтесь на удобочитаемости. Используйте размеры шрифта и цвета разумно, чтобы убедиться, что текст можно читать. Используйте встроенные стили текста, чтобы получить автоматическую поддержку динамического типа.

Пример поддержки динамического типа

  • Сосредоточьтесь на размерах целевого объекта касания. Кнопки или строки таблицы с текстовыми метками должны охватывать весь экран. Apple говорит, что "никогда не помещайте более трех элементов параллельно", и если вы используете значки, а не текстовые метки.

  • Menu Используйте элемент управления для предоставления менее часто используемых функций, чтобы обеспечить четкость и краткий дизайн приложения.

Внедрение

Набор часов включает следующие элементы управления, которые помогут вам создать привлекательные макеты приложений для часов:

Контроллер интерфейса

Базовый WKInterfaceController класс — все ваши сцены.

Область конструктора для контроллера интерфейса ведет себя как вертикальная группа: вы можете перетащить другие элементы управления на контроллер интерфейса, и они будут автоматически выложены над другим:

Элементы управления автоматически выкладываются над другим

Свойства Position and Size можно задать для каждого элемента управления, чтобы управлять их внешним видом:

Задание свойств позиции и размера для каждого элемента управления

Если для размера задано значение "Относительно контейнера ", можно указать пропорциональное значение и корректировку смещения. На этом снимка экрана показана кнопка, которая была задана для использования 80 % ширины экрана просмотра (0,8):

Предоставление пропорционального значения и корректировки смещения

Групповой

WKInterfaceGroup — это простой контейнер макета, который можно настроить для элементов управления стека по вертикали или по горизонтали. Он включает интервал между каждым элементом управления по умолчанию, но можно изменить интервал (и наборы) в инспекторе атрибутов .

Изменение интервалов и наборов в инспекторе атрибутов

Группы могут быть размером и позиционироваться относительно элементов управления, а группы можно вложить для создания сложных макетов.

Группы можно вложить для создания сложных макетов

Разделитель

Элемент управления разделителя предназначен для предоставления визуального руководства в макете. Используйте разделители (или цвета фона или изображения), чтобы помочь пользователю понять, какое содержимое связано на экране.

Пример использования разделителя

Обратите внимание, что синие и зеленые разделители, не использующие полную ширину экрана, настроены с фиксированными или относительными размерами контейнеров.

Элементы управления содержимым

Макет не будет завершен без Labelэлементов управления , Image, Button, Switch, SliderMapа также других элементов управления. Их можно разместить в макетах с помощью групп или параметров положения и размера для каждого элемента управления.