Компоненты ОС Аврора

Страницы и диалоги
Виды и контейнеры
- ListView
- GridView
- WebView
- SlideshowView
- DockedPanel
- Drawer
Элементы управления
Ввод и отображение текста на экране
- EnterKey
- Palette
Меню

Страницы и диалоги

Page

Контейнер для содержимого одной страницы внутри приложения.

Приложения состоят из одной или нескольких страниц: каждая страница определяет отдельный экран. Значения свойств width и height контейнера для содержимого страницы автоматически принимают значения ширины и высоты экрана для текущей ориентации. Отображение заголовка страницы обеспечивает тип PageHeader.

Следует обратить внимание, что при изменении ориентации или при отображении панели ввода (клавиатуры) происходит изменение размеров страницы. Если размер страницы не позволяет отобразить всё содержимое, то появляется возможность прокрутки.

Dialog

Страница, закрываемая действием подтверждения или отмены.

Открытие диалога приводит к добавлению диалоговой страницы в начало PageStack. Компонент Dialog реализует компонент Page с изменением внешнего вида и поведения интерфейса пользователя. Диалоги содержат визуальные индикаторы в верхнем левом и в верхнем правом углу.

Пользователь может принять диалог (подтвердить внесенные на странице изменения или данные) и продолжить — путем перемещения (смахивания) страницы справа налево или нажатия на соответствующую надпись (acceptText) в DialogHeader. Пользователь может отклонить диалог, сигнализируя об отмене действия — путём перемещения (смахивания) страницы слева направо или нажатия на соответствующую надпись (cancelText) в DialogHeader.

ColorPickerDialog

Диалог с интегрированным ColorPicker для выбора цвета. При выборе цвета в палитре цветов диалог будет принят автоматически.

DatePickerDialog

Диалог с интегрированным DatePicker для выбора даты в календарной сетке.

В диалоге над сеткой календаря отображается выбранная дата. Если пользователь подтверждает выбор даты, свойства year, month, day и dateText задаются в соответствии с выбранной датой, в противном случае эти значения остаются неизменными.

TimePickerDialog

Диалог с интегрированным TimePicker для выбора времени с помощью интерфейса циферблата.

В диалоге в центре циферблата отображается выбранное время. Если пользователь подтверждает выбор времени, свойства hour, minute и timeText задаются в соответствии с выбранным временем, в противном случае эти значения остаются неизменными.

Виды и контейнеры

ListView

Список элементов.

Элементы в ListView располагаются горизонтально или вертикально. ListView являются пролистываемыми. Возможна быстрая прокрутка (quickScroll), если доступна прокрутка по вертикали.

GridView

Сетка элементов.

Элементы в GridView располагаются горизонтально или вертикально. GridView являются пролистываемыми. Возможна быстрая прокрутка (quickScroll), если доступна прокрутка по вертикали.

WebView

Отображения веб-страниц в стиле ОС Аврора.

SlideshowView

Карусель для пролистывания элементов.

Элементы SlideshowView замкнуты в цикл: если листать вперёд относительно последнего элемента, произойдет переход к первому элементу, если листать назад относительно первого элемента — переход к последнему.

DockedPanel

Контейнер, пристыкованный к краю компонента типа ApplicationWindow или Page, расширяется от этого края на высоту/ширину, необходимую для отображения содержимого. Отображается поверх родительского элемента. Сдвиг DockedPanel в направлении края экрана закрывает её.

Если панель пристыкована к краю компонента Page, следует продумать вопрос обрезки содержимого страницы с тем, чтобы оно не отображалось под панелью.

Drawer

Контейнер из двух панелей-слоев. Верхняя панель сдвигается вниз и открывает содержимое панели под ней.

Панель может сдвигаться от любого края страницы.

Элементы управления

BackgroundItem

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

ButtonLayout

Контейнер, управляющий расположением элементов типа Button (кнопок) согласно правилам стилизации ОС Аврора.

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

Позволяет убедиться, что все кнопки выстроены в ряд и имеют одинаковый размер. Для кнопок в контейнере ButtonLayout будут выбираться стандартные размеры до тех пор, пока текст кнопки не выйдет за пределы размера Theme.buttonWidthLarge.

ComboBox

Элемент графического интерфейса для выбора варианта из выпадающего списка.

Представляет собой текстовую метку с прикреплённым меню, чтобы пользователь мог выбрать значение из выпадающего списка.

Выпадающий список отображает рядом метку (свойство label) и значение (свойство value). При нажатии на метку или значение появляется контекстное меню со списком доступных для выбора вариантов, текущий выбранный пункт меню подсвечен. При нажатии на один из пунктов меню оно закрывается, значение свойства value меняется на выбранный пункт меню.

Контекстное меню можно задавать как содержимое свойства menu.

Меню может быть отображено в виде компонента ContextMenu (может содержать не более пяти элементов MenuItem или IconMenuItem. Если число пунктов контекстного меню превышает пять, система отображает меню элемента ComboBox в виде списка ListItem на отдельном экране. В таком случае соблюдается то же поведение при выборе одного или более пунктов.

По умолчанию значением свойства value является текущий выбранный пункт меню.

RemorseItem

Элемент с заданным текстом и таймером обратного отсчёта реализует отсрочку вступления в силу разрушающего действия (удаления). Если до истечения времени отсрочки коснуться области отмены, действие будет отменено.

Возможно появление на месте родительского (удаляемого) элемента или поп-ап отображение в верхней части страницы.

По истечении времени timeout будет вызвана функция, переданная в параметр action. Параметр timeout является необязательным. Если значение не указано, то по умолчанию используется 5000 миллисекунд.

ListItem

Базовый интерактивный элемент списка используется, чтобы:

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

Notification

Реализует всплывающие push-уведомления.

Всплывающее уведомление по умолчанию свёрнуто. Свёрнутое уведомление представляет собой панель в верхней части экрана, содержащую иконку приложения-уведомителя (iconSizeExtraSmall), заголовок, краткий текст сообщения в виде бегущей строки и (опционально) кнопку доступа к полному сообщению и дополнительным действиям. Коснувшись уведомления, пользователь переходит в приложение-отправитель к объекту уведомления.
Раскрытая панель уведомлений содержит иконку приложения-уведомителя, название приложения; заголовок, текст сообщения, (опционально) превью изображения. Панель может содержать несколько кнопок действий типа Button в правой части. Кнопки действий по умолчанию располагаются в строку, но если число/размер кнопок не позволяет уместить их в строку, они располагаются в столбец и выравниваются по самой широкой из них. Количество кнопок в панели уведомлений не ограничено, но не рекомендуется размещать в ней более трёх кнопок.

Уведомления предназначены для информирования пользователей о событиях в приложении. Они кратковременно (на 10 секунд) всплывают поверх всего контента и могут быть принудительно скрыты свайпом вправо.

Ввод и отображение текста на экране

EnterKey

Набор свойств для управления внешним видом и поведением клавиши «Enter» в виртуальной клавиатуре.

На страницах приложений ОС Аврора при отображении однострочных текстовых полей нажатие клавиши «Enter» (при условии, что текстовое поле имеет фокус) приводит к тому, что фокус перемещается к следующему текстовому полю. Если фокус находится на последнем (или единственном) текстовом поле на странице, то нажатие клавиши «Enter» закрывает виртуальную клавиатуру. Значок на клавише «Enter» может меняться в зависимости от требуемого поведения.

Приложение также может выполнять некоторые действия после нажатия клавиши «Enter» на последнем текстовом поле. Например, если данные, вводимые пользователем на странице, предназначены для создания учетной записи, то нажатие клавиши «Enter» на последнем текстовом поле может принять диалог создания этой учетной записи.

Palette

Значения стандартных цветов.

Цвета по умолчанию соответствуют значениями из объекта Theme, но могут быть изменены. Если либо colorScheme, либо highlightColor палитры переопределены, любые производные цвета также будут переопределены.

Пункты меню задаются дочерними элементами типа MenuItem или IconMenuItem (см. выше). Максимальное количество пунктов контекстного меню — пять. В случае, если пунктов более пяти, система использует для отображения меню компонент ListView на отдельном экране.

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

PullDownMenu

Меню, вытягиваемое сверху.

Раскрывающееся меню располагается над содержимым экрана, в свёрнутом виде представляет собой горизонтальную полосу, пристыкованную к верхнему краю компонента Page.

Чтобы открыть раскрывающееся меню, следует коснуться экрана ниже полосы и, не отрываясь, провести по экрану вниз.

Чтобы активировать пункт такого меню, необходимо выполнить одно из следующих действий.

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

Вытягиваемое сверху меню заполняется путем создания объектов типа MenuItem и/или IconMenuItem (см. выше) в качестве дочерних элементов. Сюда же в качестве дочерних элементов можно включить объекты типа MenuLabel (неинтерактивные метки). Цвет фона меню отрисовывается с применением эффекта градиента.

PushUpMenu

Меню, вытягиваемое снизу.

Раскрывающееся меню располагается под содержимым экрана, в свёрнутом виде представляет собой горизонтальную полосу, пристыкованную к нижнему краю компонента Page.

Чтобы открыть раскрывающееся меню, следует коснуться экрана выше полосы и, не отрываясь, провести по экрану вверх.

Чтобы активировать пункт такого меню, необходимо выполнить одно из следующих действий.

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

Вытягиваемое снизу меню заполняется путем создания объектов типа MenuItem и/или IconMenuItem (см. выше) в качестве дочерних элементов. Сюда же в качестве дочерних элементов можно включить объекты типа MenuLabel (неинтерактивные метки). Цвет фона меню отрисовывается с применением эффекта градиента.