PricingLoginStart free
Jetpack Compose Academy · Урок

Расположение и выравнивание

Точно размещайте дочерние элементы и задавайте расстояния между ними.

Урок 4 из 413 шагов

«Расположение и выравнивание» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.

Два слова — две задачи

Управление разметкой сводится к расположению и выравниванию. Они звучат похоже, но выполняют разные задачи. Давайте разберёмся. 🧭

Расположение: вдоль главной оси

Расположение управляет интервалами вдоль главной оси разметки: вертикальной для Column и горизонтальной для Row.

Выравнивание: поперёк поперечной оси

Выравнивание управляет положением по другой оси: горизонтальным в Column и вертикальным в Row. Оно выстраивает дочерние элементы бок о бок.

Группировка у одного края

Расположение.Top, Center и Bottom собирают дочерние элементы у одного края Column, оставляя остальное пространство пустым.

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

Равномерное распределение дочерних элементов

Используйте SpaceBetween, SpaceAround или SpaceEvenly, чтобы распределить свободное пространство между дочерними элементами, а не собирать их вместе.

Row(horizontalArrangement = Arrangement.SpaceEvenly) {
    Text("A")
    Text("B")
    Text("C")
}

SpaceBetween и SpaceEvenly

SpaceBetween прижимает элементы к краям, не оставляя внешних интервалов, а SpaceEvenly добавляет одинаковые интервалы везде, в том числе перед первым и после последнего дочернего элемента.

Фиксированные интервалы с помощью spacedBy

Для одинакового интервала используйте Arrangement.spacedBy. Он вставляет указанное вами точное расстояние между каждой соседней парой дочерних элементов.

Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("A")
    Text("B")
}

Выравнивание по поперечной оси Column

В Column поперечная ось горизонтальна, поэтому horizontalAlignment выбирает для дочерних элементов Start, CenterHorizontally или End.

Column(horizontalAlignment = Alignment.End) {
    Text("Right side")
}

Выравнивание по поперечной оси Row

В Row поперечная ось вертикальна, поэтому verticalAlignment выбирает для дочерних элементов Top, CenterVertically или Bottom.

Row(verticalAlignment = Alignment.Bottom) {
    Text("Aligned bottom")
}

Объединение обоих параметров для разметки

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

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }

Эффекту нужно свободное пространство

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

Быстрая проверка

Проверим, какой осью управляет каждый параметр.

Ответь в интерактивном уроке

Итоги: расположение и выравнивание

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

Можно начать бесплатно

Изучай Kotlin с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
30
Уроки
120
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Расположение и выравнивание» бесплатный?

Да — полный текст урока «Расположение и выравнивание» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.

Чему я научусь в уроке «Расположение и выравнивание»?

Точно размещайте дочерние элементы и задавайте расстояния между ними. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?

Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Расположение и выравнивание»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?

Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Column: вертикальное расположение элементов
  2. Row: размещение элементов рядом
  3. Box: слои и перекрытие
  4. Расположение и выравнивание
← Назад к Jetpack Compose Academy