Расположение и размеры элементов

Размеры

Типы определения размера

Регулировать размеры элементов в карточке можно с помощью параметров width и height элемента container. Они принимают одно из значений size:

• match_parent — значение по умолчанию для ширины, элемент подстраивается под содержащий его блок;
• wrap_content — значение по умолчанию для высоты, элемент подстраивается под свое содержимое;
• fixed — фиксированное значение размера.

Чтобы элемент занимал половину высоты или располагался внизу контейнера, используйте match_parent. Алгоритм распределяет место в таком порядке:

1. Место занимают элементы со значениями размера fixed и wrap_content.
2. Оставшееся место делят элементы со значением размера match_parent. По умолчанию все элементы со значением размера match_parent поделят место поровну или распределят его согласно значению параметра weight, если он указан.

Ограничения размера

Типы размеров match_parent и wrap_content поддерживают дополнительные ограничения размера с помощью свойств min_size и max_size:

• min_size — устанавливает минимальный размер элемента. Элемент никогда не будет меньше этого значения.
• max_size — устанавливает максимальный размер элемента. Элемент никогда не будет больше этого значения.

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

{
  "type": "container",
  "orientation": "vertical",
  "items": [
    {
      "type": "text",
      "text": "Этот текст имеет ограниченную ширину match_parent",
      "width": {
        "type": "match_parent",
        "min_size": {
          "value": 100,
          "unit": "dp"
        },
        "max_size": {
          "value": 300,
          "unit": "dp"
        }
      }
    }
  ]
}

{
  "type": "text",
  "text": "Этот текст имеет ограниченную высоту wrap_content",
  "height": {
    "type": "wrap_content",
    "min_size": {
      "value": 50,
      "unit": "dp"
    },
    "max_size": {
      "value": 200,
      "unit": "dp"
    }
  }
}

Единицы измерения размера

Если используется тип fixed, то результат зависит от единиц измерения:

• dp (density-independent pixels) — стандартная единица измерения размеров, которая используется по умолчанию и не зависит от плотности экрана;
• sp (scale-independent pixels) — единица измерения, которая зависит от коэффициента размера текста в телефоне.

Если в элементе есть текст, указывайте высоту в sp, чтобы блок масштабировался вместе с текстом. Если текст не помещается, используйте dp.

Границы элемента

Для определения рамок у элементов используются параметры paddings и margins элемента container:

• paddings — расстояние от контента карточки до ее границ;
• margins — расстояние от границ карточки до других элементов и границ контейнера. Не влияет на размер самой карточки.

Выравнивание

Для выравнивания внутри элементов по горизонтали и вертикали используются следующие параметры элемента container:

• alignment_horizontal — выравнивание по горизонтали. Может принимать значения left, center, right. Внутри горизонтально выравненного контейнера можно выравнивать только по вертикали, т. е. применять content_alignment_vertical со значениями left (по умолчанию), center, right.
• alignment_vertical — выравнивание по вертикали. Может принимать значения top, center, bottom. Внутри вертикально выравненного контейнера можно выравнивать по горизонтали, т. е. применять content_alignment_horizontal со значениями top (по умолчанию), center, bottom.

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

Получение размеров элементов с помощью Layout Provider

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

Как это работает

Когда вы указываете значения размера, такие как wrap_content или match_parent, финальный размер вычисляется во время выполнения. Layout provider предоставляет доступ к этим вычисленным размерам, автоматически обновляя указанные переменные шириной и высотой элемента после компоновки.

Процесс работает следующим образом:

1. Объявите переменные для хранения размеров элемента
2. Добавьте layout_provider к элементу с именами переменных
3. После того как элемент будет размещен, переменные автоматически обновятся его фактическими размерами
4. Используйте эти переменные в выражениях для размеров других элементов

Параметры

Свойство layout_provider принимает объект с двумя необязательными параметрами:

• width_variable_name: Имя переменной, в которую будет сохранена ширина элемента (в dp)
• height_variable_name: Имя переменной, в которую будет сохранена высота элемента (в dp)

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

Расчет размера

Размер, сохраняемый в переменных, представляет собой область содержимого элемента:

• Включает: Ширину и высоту элемента в отрисованном виде, включая paddings и borders
• Исключает: Margins не включаются в вычисленный размер

Пример адаптивного макета

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

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

1. Инициализируйте переменные: Всегда объявляйте переменные с начальными значениями (обычно 0) перед использованием их с layout_provider
2. Избегайте циклических зависимостей: Не создавайте ситуации, когда размер элемента A зависит от элемента B, а размер элемента B зависит от элемента A
3. Используйте подходящие типы: Объявляйте переменные с типом integer для значений размеров

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

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

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

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