Группировка элементов
Контейнер
Самый базовый элемент, который отвечает за расположение дочерних элементов — container. Элементы в нем находятся в том порядке, в котором они указаны.
В параметре orientation
указываются типы расположения элементов:
vertical
— для вертикального расположения;Посмотреть интерактивный примерhorizontal
— для горизонтального расположения;Посмотреть интерактивный примерoverlap
— с наложением.Посмотреть интерактивный примерЧтобы элемент занял все свободное место, его ширина должна быть
match_parent
. Если таких элементов несколько, они поделят место поровну или распределят его согласно значению параметраweight
, если он указан.Чем меньше номер элемента в массиве
items
приorientation:"overlap"
, тем ниже он будет расположен. Нулевой элемент контейнера будет в самом низу.
Сетка
Элемент grid используется для сложной структуры табличной верстки. Он позволяет располагать элементы в нескольких столбцах и строках.

Можно объединять ячейки в строке или столбце:
row_span
— параметр для объединения строк;column_span
— параметр для объединения столбцов.

Вес элемента (weight
) определяет, сколько пространства он занимает внутри сетки. Может применяться как к ширине, так и к высоте.

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

Настроить ширину основной карточки возможно в поле layout_mode
:
- fixed — показывается фиксированная часть соседних карточек, остальное место занимает основная карточка.
- percentage — ширина основной карточки указывается в процентах от ширины пейджера.
Пейджер удобно использовать вместе с индикатором, чтобы отображать, какая карточка выбрана. Индикатор можно располагать независимо от пейджера. Внешний вид индикатора можно изменить: поддерживается настройка расстояний между индикаторами, формы, цвета, размера, анимаций переключения.

Галерея
Картинки внутри элемента gallery могут быть любого размера и содержимого, им необязательно быть однотипными. Параметр item_spacing
определяет расстояние между элементами галереи кроме первого и последнего отступа от краев — ими можно управлять с помощью paddings
.
Высота галереи устанавливается по высоте самого большого элемента.

Табы
Элемент tabs отличается от галереи наличием строки-заголовка. Одномоментно видно только одну страницу, остальные можно переключить свайпами.
Высота табов на разных платформах отличается:
- В Android первый таб оригинальной высоты. Высота оставшихся табов (со второго по последний) одинакова и равна максимальному из их значений.
- В iOS все табы оригинальной высоты.

Разделитель
Элемент separator используется для разделения места между элементами. Ориентация разделителя определяется в параметре orientation
:
vertical
— вертикальная;horizontal
— горизонтальная.
Чтобы полоска, разделяющая элементы, не отображалась, сделайте цвет separator
прозрачным.
Узнать больше
Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news
Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru