Основные свойства ОС Аврора

• Объект Theme
• Применение цветовой схемы в стиле ОС Аврора
  • Цветовая схема неинтерактивных элементов
  • Цветовая схема интерактивных элементов управления
• Настройка размеров элементов списка и их содержимого
• Описание свойств
  • ItemSize
  • FontSize
  • ThemeColor
  • PaddingSize
  • IconSize
  • ButtonSize

Объект Theme

С Theme графический интерфейс приложения будет соответствовать стандарту платформы.

Объект предоставляет информацию о стандартных цветах, шрифтах, размерах, отступах и других составляющих стиля для приложений ОС Аврора. Цвета меняются в соответствии с выбранной атмосферой ОС Аврора, размеры и отступы масштабируются в соответствии с размером и разрешением экрана.

Например, Theme.horizontalPageMargin задаёт стандартные (и настоятельно рекомендуемые) отступы между содержимым страницы и вертикальными границами экрана.

Применение цветовой схемы в стиле ОС Аврора

Цветовая схема определяется текущей атмосферой ОС Аврора. Для светлой схемы Light (DarkOnLight) будут определены тёмный цвет шрифта и значков и светлый фон, для тёмной схемы Dark (LightOnDark) — светлые цвета содержимого и тёмный фон.

Приложения, использующие цвета и значки платформы, адаптируют свой внешний вид под текущую цветовую схему.

Основные и вспомогательные цвета задаются текущей атмосферой и подбираются таким образом, чтобы сочетаться с фоновым рисунком атмосферы. Цвета по умолчанию Theme.primaryColor и Theme.secondaryColor могут не быть уместны, если в приложении используется нестандартный фон. Если в приложении используется светлый фон (например, текстовый документ), рекомендованы цвета Theme.darkPrimaryColor и Theme.darkSecondaryColor. Если в приложении используется тёмный фон (например, видеопроигрыватель), рекомендованы цвета Theme.lightPrimaryColor и Theme.lightSecondaryColor. Ошибки в компонентах обозначаются с помощью Theme.errorColor.

Для создания визуального отклика элемента управления при изменении его состояния (например, при нажатии кнопки) в ОС Аврора предусмотрены соответствующие цветовые схемы.

Цветовая схема неинтерактивных элементов

Тексту элемента, который не отвечает на нажатие, присваивается цвет Theme.highlightColor (если это основной элемент) или Theme.secondaryHighlightColor (если второстепенный элемент).

Цветовая схема интерактивных элементов управления

В неактивном состоянии тексту элемента управления, который отвечает на нажатие (например, ListItem, Button или MouseArea), присваивается цвет Theme.primaryColor (основной элемент) и Theme.secondaryColor (второстепенный элемент).

В активном (нажатом) состоянии цвет текста элемента изменяется на Theme.highlightColor или Theme.secondaryHighlightColor. Также меняется фон элемента — применяется цвет Theme.highlightBackgroundColor и непрозрачность Theme.highlightBackgroundOpacity.

Настройка размеров элементов списка и их содержимого

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

Элемент списка с одной строкой текста:

• высота элемента Theme.itemSizeSmall;
• размер значка Theme.iconSizeMedium;
• отступ между значком и текстом Theme.paddingLarge;
• размер шрифта текста Theme.fontSizeMedium.

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

• высота элемента Theme.itemSizeMedium;
• размер значка Theme.iconSizeMedium;
• отступ между значком и текстом Theme.paddingLarge;
• размер шрифта текста верхней строки Theme.fontSizeMedium;
• размер шрифта текста нижней строки Theme.fontSizeMedium или меньше, применяются дополнительные цвета. Если текст выходит за пределы строки, его следует сократить с помощью свойства TruncationMode.Fade.

Элемент списка с тремя и более строками текста:

• отступ между значком и текстом Theme.paddingLarge;
• рекомендовано использование более крупных значков и, возможно, размеров шрифта;
• рекомендован выбор второстепенного цвета для менее значимого текста.

Описание свойств

ItemSize

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

• Theme.itemSizeExtraSmall — очень маленькие элементы (например, высота кнопок и записей в меню);
• Theme.itemSizeSmall — маленькие элементы (например, высота элементов списка с одной строкой текста);
• Theme.itemSizeMedium — элементы среднего размера (например, высота элементов списка с двумя строками текста);
• Theme.itemSizeLarge — крупные элементы с акцентированным текстом или несколькими строками текста (например, высота стандартного элемента заголовка страницы в книжной ориентации);
• Theme.itemSizeExtraLarge — очень крупные элементы (например, делегат списка с миниатюрой изображения и связанной информацией об этом изображении);
• Theme.itemSizeHuge — самые крупные элементы (например, миниатюры изображений, расположенных по сетке во всю ширину экрана).

FontSize

Свойства, содержащие стандартные размеры шрифта:

• Theme.fontSizeTiny — самый мелкий текст (например, для случаев, когда место под текст строго ограничено);
• Theme.fontSizeExtraSmall — очень мелкий текст (например, текст описания в TextSwitch и ValueButton);
• Theme.fontSizeSmall — мелкий текст (например, параграф, второстепенный текст);
• Theme.fontSizeMedium — стандартный текст (используется по умолчанию для типов Label, а также для большинства элементов пользовательского интерфейса);
• Theme.fontSizeLarge — крупный текст, стандартный заголовок (например, заголовки страниц в компонентах PageHeader и ViewPlaceholder);
• Theme.fontSizeExtraLarge — крупный заголовок;
• Theme.fontSizeHuge — самый крупный заголовок или компонент пользовательского интерфейса, в котором текст играет определяющую роль (например, цифровая клавиатура телефона).

В настройках системы пользователь задает коэффициент размера шрифта. В большинстве случаев следует избегать использования свойств, содержащих базовые значения размера шрифтов — такие значения не зависят от заданного пользователем коэффициента. Базовые значения уместны только в случае, если пространство для текстовой метки существенно ограничено, а предпочтительная схема размещения текста в условиях таких ограничений (например, перенос текста на новую строку) не даёт полностью удовлетворительного результата.

ThemeColor

Свойства, содержащие стандартные цвета выбранной пользователем атмосферы ОС Аврора:

• Theme.primaryColor — основной интерактивный элемент управления (например, ListItem, Button или MouseArea) в неактивном состоянии;
• Theme.secondaryColor — второстепенный интерактивный элемент управления в неактивном состоянии;
• Theme.highlightColor — основной неинтерактивный элемент управления, основной интерактивный элемент управления в активном (нажатом) состоянии.
• Theme.secondaryHighlightColor — второстепенный неинтерактивный элемент управления, второстепенный интерактивный элемент управления в активном (нажатом) состоянии.
• Theme.highlightDimmerColor — приглушенный (более тёмный по отношению к Theme.highlightColor) цвет для случаев, когда нужно показать пользователю активное (нажатое) состояние основного интерактивного элемента, не отвлекая внимание от более значимых элементов.

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

PaddingSize

Свойства, содержащие стандартные отступы:

• Theme.paddingSmall —самый маленький отступ между элементами пользовательского интерфейса (часто используется в случаях, когда место на экране ограничено);
• Theme.paddingMedium — отступ между элементами интерфейса, которые связаны друг с другом по смыслу и визуально должны восприниматься как связанные;
• Theme.paddingLarge — стандартный отступ между элементами интерфейса (например, вертикальный интервал между компонентами в контейнере типа Column);
• Theme.horizontalPageMargin — отступ между содержимым страницы и вертикальными (левой и правой) границами экрана. Обычно он равен Theme.paddingLarge на устройствах с маленькими экранами (смартфоны), но может быть шире на устройствах с большими экранами (планшеты).

Отступы от левого и правого краев экрана следует устанавливать равными Theme.horizontalPageMargin.

IconSize

Свойства, содержащие стандартные размеры значков:

• Theme.iconSizeExtraSmall — очень маленькие иконки (например, в строке состояния);
• Theme.iconSizeSmall — маленькие иконки (например, CoverAction и иконки на экране событий);
• Theme.iconSizeSmallPlus — небольшие иконки (например, иконки уведомлений);
• Theme.iconSizeMedium — средние иконки, самый часто используемый размер (например, внутри маленьких и средних элементов списка);
• Theme.iconSizeLarge — крупные иконки (например, на кнопках);
• Theme.iconSizeExtraLarge — очень крупные иконки;
• Theme.iconSizeLauncher — размер, который используется для иконок в сетке приложений на домашнем экране.

ButtonSize

Свойства, содержащие размеры кнопок:

• Theme.buttonWidthExtraSmall — очень маленькая кнопка (самая маленькая в интерфейсе ОС Аврора), в большинстве приложений следует избегать использования данного варианта, используется только в случае плотной компоновки кнопок. На экране с портретной ориентацией могут быть размещены по ширине три такие кнопки.
• Theme.buttonWidthSmall — маленькая кнопка, используется по умолчанию. На экране с портретной ориентацией могут быть размещены по ширине две такие кнопки. На больших экранах или на экранах с альбомной ориентацией может быть размещено больше двух маленьких кнопок.
• Theme.buttonWidthMedium — средняя кнопка. На экране, как правило, может быть размещена только одна средняя кнопка.
• Theme.buttonWidthLarge — большая кнопка. На экране, как правило, может быть размещена только одна большая кнопка.

Если текст выходит за пределы указанного размера кнопки, её ширина будет автоматически увеличена, чтобы вместить текст.