--- metadata: - name: generator content: Diplodoc Platform v5.54.5 alternate: - https://divkit.tech/docs/en/concepts/layout.md - https://divkit.tech/docs/ru/concepts/layout.md - href: ru/concepts/layout.md type: text/markdown title: Markdown version - href: ../llms.txt type: text/markdown title: llms.txt --- > **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt # Расположение и размеры элементов ## Размеры {#size} ### Типы определения размера {#size-types} Регулировать размеры элементов в карточке можно с помощью параметров `width` и `height` элемента `container`. Они принимают одно из значений [size](https://divkit.tech/docs/ru/concepts/divs/2/div-size.md): - [match_parent](https://divkit.tech/docs/ru/concepts/divs/2/div-match-parent-size.md) — значение по умолчанию для ширины, элемент подстраивается под содержащий его блок; - [wrap_content](https://divkit.tech/docs/ru/concepts/divs/2/div-wrap-content-size.md) — значение по умолчанию для высоты, элемент подстраивается под свое содержимое; - [fixed](https://divkit.tech/docs/ru/concepts/divs/2/div-fixed-size.md) — фиксированное значение размера. Чтобы элемент занимал половину высоты или располагался внизу контейнера, используйте `match_parent`. Алгоритм распределяет место в таком порядке: 1. Место занимают элементы со значениями размера `fixed` и `wrap_content`. 1. Оставшееся место делят элементы со значением размера `match_parent`. По умолчанию все элементы со значением размера `match_parent` поделят место поровну или распределят его согласно значению параметра `weight`, если он указан. ### Ограничения размера {#size-constraints} Типы размеров `match_parent` и `wrap_content` поддерживают дополнительные ограничения размера с помощью свойств `min_size` и `max_size`: - `min_size` — устанавливает минимальный размер элемента. Элемент никогда не будет меньше этого значения. - `max_size` — устанавливает максимальный размер элемента. Элемент никогда не будет больше этого значения. Эти ограничения полезны для обеспечения разумных размеров элементов при сохранении их адаптивности к содержимому или родительскому контейнеру. {% note info %} Если указано ограничение, при котором `min_size` превышает `max_size`, система зафиксирует ошибку и проигнорирует некорректные ограничения. {% endnote %} {% cut "Пример: match_parent с ограничениями размера" %} ```json { "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" } } } ] } ``` {% endcut %} {% cut "Пример: wrap_content с ограничениями размера" %} ```json { "type": "text", "text": "Этот текст имеет ограниченную высоту wrap_content", "height": { "type": "wrap_content", "min_size": { "value": 50, "unit": "dp" }, "max_size": { "value": 200, "unit": "dp" } } } ``` {% endcut %} ![](../_images/create-card/div-size.png =300x) {% cut "Посмотреть интерактивный пример" %} {% endcut %} ### Единицы измерения размера {#size-units} {% note info %} Единица измерения `sp` используется только на Android. {% endnote %} Если используется тип `fixed`, то результат зависит от единиц измерения: - `dp` (density-independent pixels) — стандартная единица измерения размеров, которая используется по умолчанию и не зависит от плотности экрана; - `sp` (scale-independent pixels) — единица измерения, которая зависит от коэффициента размера текста в телефоне. Если в элементе есть текст, указывайте высоту в `sp`, чтобы блок масштабировался вместе с текстом. Если текст не помещается, используйте `dp`. ## Границы элемента {#margin} Для определения рамок у элементов используются параметры `paddings` и `margins` элемента `container`: - `paddings` — расстояние от контента карточки до ее границ; - `margins` — расстояние от границ карточки до других элементов и границ контейнера. Не влияет на размер самой карточки. ![](../_images/create-card/padding-margin.png =600x) ## Выравнивание {#alignment} Для выравнивания внутри элементов по горизонтали и вертикали используются следующие параметры элемента `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`, то дочерние элементы наследуют этот параметр. Если значения указаны в дочерних, то они будут переопределены. ### Выравнивание контента при скролле {#scroll-content-alignment} У элемента `gallery` свойство `scroll_content_alignment` управляет тем, как контент выравнивается по оси скролла: - `start` — к началу - `center` — по центру - `end` — к концу Значение по умолчанию зависит от режима: `start` без постраничного скролла, `center` с постраничным. В галерее **с постраничным скроллом** свойство задаёт, к какой стороне «привязывается» элемент при перелистывании. В галерее **без постраничного скролла** свойство применяется при вызове экшенов скролла (например, `scroll_to`). {% cut "Пример: gallery без пейджинга, выравнивание по центру при scroll_to" %} ```json { "type": "gallery", "scroll_content_alignment": "center", "items": [ {"type": "container", "width": {"type": "fixed", "value": 200}, "height": {"type": "fixed", "value": 100}, "background": [{"type": "solid", "color": "#FFCC00"}]}, {"type": "container", "width": {"type": "fixed", "value": 200}, "height": {"type": "fixed", "value": 100}, "background": [{"type": "solid", "color": "#00CCFF"}]} ] } ``` {% endcut %} ## Расстояние между элементами {#spacing} Для управления расстоянием между элементами в контейнере используются свойства: - `item_spacing` — расстояние между элементами в контейнере (в dp) - `line_spacing` — расстояние между строками в контейнере (в dp) **Особенности использования:** - Оба свойства принимают числовые значения >= 0 - Значение по умолчанию: `0` - Если задано свойство `separator`, то `item_spacing` игнорируется - Если задано свойство `line_separator`, то `line_spacing` игнорируется - При конфликте свойств генерируется предупреждение через систему ошибок DivKit {% note info %} Свойства `item_spacing` и `line_spacing` предоставляют возможность управления расстоянием между элементами без использования разделителей (`separator` и `line_separator`). {% endnote %} {% cut "Пример: использование spacing свойств" %} ```json { "type": "container", "orientation": "vertical", "item_spacing": 10, "items": [ { "type": "text", "text": "Первый элемент" }, { "type": "text", "text": "Второй элемент" }, { "type": "text", "text": "Третий элемент" } ] } ``` {% endcut %} ![](../_images/create-card/div-alignment.png =300x) {% cut "Посмотреть интерактивный пример" %} {% endcut %} ## Получение размеров элементов с помощью Layout Provider {#layout-provider} Layout provider позволяет получить фактический размер отрисованного элемента и сохранить его в [переменные](https://divkit.tech/docs/ru/concepts/variables.md). Это особенно полезно для создания адаптивных макетов, где размеры одного элемента должны зависеть от фактического размера другого элемента. {% note warning %} Использование layout provider приводит к дополнительным проходам компоновки (layout passes), что может существенно снизить производительность рендеринга. Используйте эту функцию только когда это действительно необходимо, и избегайте создания длинных цепочек зависимостей между элементами. {% endnote %} ### Как это работает Когда вы указываете значения размера, такие как `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 не включаются в вычисленный размер ### Отслеживание количества элементов в pager {#pager-item-count} Для компонента pager доступно свойство `item_count_variable`, которое позволяет отслеживать количество видимых элементов. Эта функция доступна только на Web платформе. **Параметры:** - `item_count_variable`: Имя переменной, в которую будет сохранено количество видимых элементов в pager **Особенности работы:** - Переменная автоматически обновляется при изменении количества видимых элементов - Значение представляет собой целое число (количество элементов) - Полезно для создания индикаторов количества или адаптивного поведения на основе числа элементов {% note warning %} Свойство `item_count_variable` в настоящее время поддерживается только на Web платформе. {% endnote %} ### Пример адаптивного макета Распространенный случай использования — создание элементов, размер которых зависит от других элементов. В этом примере мы создаем три блока, где размеры каждого последующего блока зависят от предыдущих: {% cut "Посмотреть интерактивный пример" %} {% endcut %} ### Рекомендации 1. **Инициализируйте переменные**: Всегда объявляйте переменные с начальными значениями (обычно 0) перед использованием их с layout_provider 2. **Избегайте циклических зависимостей**: Не создавайте ситуации, когда размер элемента A зависит от элемента B, а размер элемента B зависит от элемента A 3. **Используйте подходящие типы**: Объявляйте переменные с типом `integer` для значений размеров ## Узнать больше {#troubleshooting} Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru). [Репозиторий DivKit](https://github.com/divkit/divkit)