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

Размеры

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

Регулировать размеры элементов в карточке можно с помощью параметров 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, то дочерние элементы наследуют этот параметр. Если значения указаны в дочерних, то они будут переопределены.

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

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

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

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