Группировка элементов

Контейнер

Самый базовый элемент, который отвечает за расположение дочерних элементов — container. Элементы в нем находятся в том порядке, в котором они указаны.

В параметре orientation указываются типы расположения элементов:

• vertical — для вертикального расположения;

  Посмотреть интерактивный пример

• horizontal — для горизонтального расположения;

  Посмотреть интерактивный пример

• overlap — с наложением.

  Посмотреть интерактивный пример

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

  Чем меньше номер элемента в массиве items при orientation:"overlap", тем ниже он будет расположен. Нулевой элемент контейнера будет в самом низу.

В параметре layout_mode можно указать тип размещения элементов. Значение wrap означает перенос элементов на следующую строку, если они не поместились на предыдущей. По умолчанию layout_mode равен no_wrap.

Сетка

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

Можно объединять ячейки в строке или столбце:

• row_span — параметр для объединения строк;
• column_span — параметр для объединения столбцов.

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

Пейджер

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

Настроить ширину основной карточки возможно в поле layout_mode:

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

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

Галерея

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

Высота галереи устанавливается по высоте самого большого элемента.

Табы

Элемент tabs отличается от галереи наличием строки-заголовка. Одномоментно видно только одну страницу, остальные можно переключить свайпами.

Высота табов на разных платформах отличается:

• В Android первый таб оригинальной высоты. Высота оставшихся табов (со второго по последний) одинакова и равна максимальному из их значений.
• В iOS все табы оригинальной высоты.

Разделитель

Элемент separator используется для разделения места между элементами.

Стиль разделителя определяется объектом delimiter_style:

{
  "type": "separator",
  "delimiter_style": {
    "color": "#000000",
    "orientation": "vertical"
  }
}

• orientation — ориентация разделителя. Может быть vertical (вертикальная) или horizontal (горизонтальная).
• color — цвет разделительной полосы. Чтобы она не отображалась, укажите прозрачный цвет #00000000.

Высота разделительной полосы не зависит от высоты самого элемента — она всегда будет равна 1 dp. Если указать размеры разделителя больше — разделительная полоса просто отрисуется посередине.

Управление табами, пейджером и галереей

Для управления используйте действия с переключением элементов.

Узнать больше

Следите за новостями DivKit в Telegram-канале: http://t.me/divkit_news.

Также вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit