Многопанельный режим

1. Основные функции
2. Основные правила
3. Переменные
4. Компонент SplitView в галерее компонентов
5. Примеры работы компонента
   • Пример добавления панелей
   • Примеры закрепления панели
   • Пример закрепления (Pin) панели
   • Пример открытия панели на весь экран
6. Взаимодействия
   • Навигация
     • Жест «назад» для смахиваниия панели
     • Кнопка-индикатор «назад»
   • Работа жеста назад
   • Работа жеста назад с диалоговым окном
7. Рекомендации
   • Назначение SplitView
   • Рекомендации
   • Типичные ошибки
   • Пример для трёх панелей и правильное использование компонентов

Основные функции

Компонент SplitView позволяет показывать несколько страниц одного приложения на одном экране.

• Компонент работает по принципу стека, позволяя добавлять и удалять панели.
• Компонент может отображать от одной до 12 панелей одновременно.
• В панелях можно показывать как одну страницу так и несколько. Во втором случае в панели используется стандартный принцип навигации по страницам: PageStack.
• Компонент обеспечивает плавную смену видимых панелей методом смещения панелей влево при добавлении новой панели, или вправо при удалении существующей панели.
• Компонент позволяет задать разделитель (Separator), который будет отображаться между панелями. Максимальная ширина разделителя 6dp. Контейнер разделителя заполняется на усмотрение разработчика.

1 и 2 — области экрана называемые панелью.

Основные правила

• Ширина панели задаётся через columnSpan. Диапазон значений columnSpan от 1 до 12. Минимальное значение равно 1/12 ширины экрана, за вычетом суммарной ширины видимых разделителей.
• Панели позиционируется последовательно согласно порядку добавления их в компонент в направлении слева направо.
• Разработчик может менять количество одновременно отображаемых панелей. Это может использоваться для адаптации к ширине экрана.
• Компонент позволяет закрепить одну из панелей.
• Крайняя левая позиция закреплённой панели ограничена левой границей SplitView (левой границей экрана).
• Закреплённая панель отображается поверх следующих после неё панелей.

Значение columnSpan = 4. Минимальная ширина панели равна 4/12 ширины экрана.

Переменные

columnSpan	Ширина панели задаётся через columnSpan. Диапазон значений columnSpan от 1 до 12. Минимальное значение равно 1/12 ширины экрана, за вычетом суммарной ширины видимых разделителей.
minActiveItems	Минимальное количество отображаемых панелей, установленное разработчиком в приложении для определённого случая.
maxActiveItems	Максимальное количество отображаемых панелей, установленное разработчиком в приложении для определённого случая.
splitter	Разделитель отображается между панелями. Максимальная ширина разделителя 6dp. Контейнер разделителя заполняется на усмотрение разработчика. Необязательный элемент.

Компонент SplitView в галерее компонентов

Настройки SplitView в галерее компонентов:

• Type: component — Тип, по которому была добавлена панель.
• ld:0 — Индекс панели.
• Pin — Закрепляет/открепляет панель.
• Pin #0 — Закрепляет/открепляет панель с выбранным индексом. Нужно для тестирования закрепления панелей вне области видимости.
• Span:4 — Предпочитаемая ширина текущей панели в виртуальных колонках.
• Collapse — Разворачивает/сворачивает панель на весь экран/до заданных размеров (Span).
• Push component — SplitView создаст объект и добавит его в свой стек.
• Push url — SplitView по ссылке сгенерирует компонент, по нему создаст объект и добавит его в свой стек.
• Push item — SplitView добавит в свой стек готовый объект и сделает его видимым.
• Push dialog — В SplitView добавляется PageStack, в который добавлен Dialog.
• Pop to this — Удаляет все последующие панели.
• Pop — Удаляет конкретную панель.
• Clear — Очищает все панели и возвращает к экрану с настройками SplitView.

Примеры работы компонента

Пример добавления панелей

Для всех панелей значение columnSpan = 4.

На первом шаге, первая панель занимает всю ширину контейнера SplitView.

На втором шаге, первая панель занимает разрешённую ей ширину columnSpan = 4. Вторая панель, открываясь занимает все свободное место.

На третьем шаге после открытия 3 панели все панели занимают рекомендованную ширину columnSpan = 4.

На четвёртом шаге при добавлении 4 панели вытеснится первая панель, оставшиеся панели имеют рекомендованную ширину columnSpan = 4.

Пример закрепления панели

Для всех панелей значение columnSpan = 4.

Исходное положение. Панель №1 будет выступать в роли закрепляемой панели.

При получении команды закрепления первой панели она занимает крайне левое положение в контейнере SplitView. Закреплённая панель, обозначенная на картинке №1, показывается поверх других панелей.

Вид с закреплённой первой панелью.

При добавлении пятой панели, все панели смещаются влево.

При откреплении панели, на месте закреплённой панели находится панель, которая была под ней.

Пример закрепления (Pin) панели

Для первой панели columnSpan = 4.

Для второй и третьей columnSpan = 6.

Исходное положение.

При закреплении панели, панель под закреплённой принимает ширину закреплённой панели. Третья панель растягивается на всю ширину экрана.

Пример открытия панели на весь экран

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

На развёрнутой панели отображается индикатор жеста «Назад». Свернуть панель в исходный вид можно произвольным элементом управления, например кнопкой, или обратной сменой ориентации.

По нажатию на индикатор жеста «Назад» или при выполнении жеста «Назад» произойдёт открытие закрытой панели на весь экран с анимацей PageStack.

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

Альбомная ориентация.

Портретная ориентация.

Взаимодействия

Навигация

Жест «назад» для смахиваниия панели

Жест «назад» учитывается на последней панели SplitView (крайняя правая на экране) при выполнении следующих условий:

• Количество видимых панелей после выполнения жеста сохранится равным или больше значения свойства minActiveItems.
• Жест не перехватывается панелью или её дочерним элементом.

Кнопка-индикатор «назад»

Индикатор-кнопка жеста «назад» отображается в верхней части левой границы последней панели SplitView в многопанельном режиме, или в верхней части левой границы SplitView в однопанельном режиме при выполнении следующих условий:

• Количество видимых панелей после удаления последней страницы сохранится равным или больше значения свойства minActiveItems (минимальное количество отображаемых панелей, установленное разработчиком в данном приложении).
• Последняя в стеке панель не является объектом, отображающим свой индикатор «назад».

Кнопка-индикатор «назад».

Работа жеста назад

На экран добавляется панель №3.

Жест назад не сработает на второй и первой панели.

Жест назад сработает только на последней добавленной панели при соблюдении двух условий:

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

В данном случае разработчик установил минимальное количество отображаемых панелей minActiveItems=2, жест не сработает.

Работа жеста назад с диалоговым окном

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

Диалоговое окно (панель №3) блокирует возможность взаимодействия с другими панелями. При выполнении жеста «назад» панель не закроется, произойдёт перелистывание страницы в диалоговом окне с использованием компонента PageStack.

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

Рекомендации

Назначение SplitView

Компонент SplitView позволяет размещать две и более панели внутри одного приложения и управлять ими. Каждая из панелей может отображать в себе широкий спектр контента, список действий, текст, изображения, табличное представление контента и пр.

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

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

Рекомендации

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

Преимущественно компонент SplitView используется для отображения списка действий, которые влияют на основное содержимое экрана, например, фильтры или отображение дополнительного контента и функций. Поэтому контент панелей на одном экране чаще всего имеет иерархическую взаимосвязь. Для поддержки навигации следует обязательно подсвечивать выбранный элемент, который вызвал следующую панель. Таким образом пользователю всегда будет очевиден его путь до текущего местоположения (представлено ниже, на примере приложения «Музыка»).

Следует избегать того, чтобы контент разных панелей визуально сливался — нужно использовать разделители между панелями. Иногда в качестве разделителя может быть достаточно пустого пространства, а иногда нужен более явный разделитель, например, в виде тонкой линии или лёгкой тени от одной из панелей. Не следует использовать толстые яркие линии в качестве разделителя, это может помешать восприятию контента пользователем.

Следует позволить пользователю управлять панелями на экране, при необходимости дать ему возможность прятать панели или закреплять их. Для управления панелями рекомендуется использовать компонент AppBar.

1. Рекомендуется использовать разделитель, если на панелях будет индикатор жеста «Назад».
2. Индикатор жеста «Назад» появляется автоматически, так как minActiveItems =1.
3. Иконка для развёртывания панели на весь экран.
4. Панель SplitView имеет ширину (columnSpan) =4.

Типичные ошибки

1. 600 dp — неправильная ширина для панели. 1920 (Screen.width)/12columns*4columns=640 — рекомендуемая ширина панели.
2. Не предусмотрено место для индикатора жеста «Назад».

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

columnSpan = 4.