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

Самый базовый элемент, который отвечает за расположение дочерних элементов — 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 прозрачным.

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