Column, Row и Box
Распределяйте компонуемые элементы в распространённых макетах
«Column, Row и Box» — бесплатный урок Android Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.
Расположение компонуемых элементов
Чтобы расположить компонуемые элементы относительно друг друга, Compose предоставляет три основных компонуемых элемента разметки: столбец, строку и контейнер.
Столбец: вертикальный стек
Column располагает дочерние элементы вертикально, сверху вниз.
Column {
Text("First")
Text("Second")
Text("Third")
}Строка: горизонтальный стек
Row располагает дочерние элементы рядом друг с другом, слева направо.
Row {
Text("Left")
Text("Middle")
Text("Right")
}Контейнер: перекрывающиеся элементы
Box располагает дочерние элементы поверх друг друга, как слои. Последующие элементы рисуются поверх предыдущих. Это удобно для значков, наложений и фонов.
Box {
Image(
painter = painterResource(R.drawable.photo),
contentDescription = null
)
Text("Caption")
}Дочерние элементы — лямбды содержимого
Каждый элемент разметки принимает завершающую лямбду содержимого. Все компонуемые элементы, вызванные внутри неё, становятся дочерними. XML здесь нет — дочерние элементы представляют собой обычные вызовы функций.
Вложение элементов разметки
Элементы разметки можно свободно вкладывать друг в друга. Поместите Row внутрь Column, чтобы построить структуру в виде таблицы или список строк.
Column {
Row {
Text("A")
Text("B")
}
Row {
Text("C")
Text("D")
}
}Column и LinearLayout
Если Вы работали с XML, то Column похож на вертикальный LinearLayout, а Row — на горизонтальный. Box похож на простой FrameLayout.
Размер по умолчанию
По умолчанию элемент разметки занимает ровно столько места, сколько нужно его дочерним элементам (режим wrap content). Вы можете заставить его занять всё доступное пространство с помощью таких модификаторов, как Modifier.fillMaxSize(); подробнее об этом — в следующем уроке.
contentAlignment в Box
Box может выровнять все дочерние элементы с помощью contentAlignment. Например, можно расположить всё по центру.
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}Выбор подходящего элемента
Ориентируйтесь на направление: Column — для вертикального расположения, Row — для горизонтального, Box — для перекрывающихся элементов или центрирования одного дочернего элемента. В большинстве экранов используются все три.
Собираем всё вместе
Небольшая разметка профиля с использованием всех трёх элементов.
@Composable
fun Profile() {
Column {
Box(contentAlignment = Alignment.Center) {
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = null
)
}
Row {
Text("Posts ")
Text("Followers")
}
}
}Быстрая проверка
Какой элемент разметки располагает дочерние элементы поверх друг друга, создавая перекрытие?
Итоги
Три основных элемента разметки:
Column— вертикальный стек.Row— горизонтальный стек.Box— перекрывающиеся слои;contentAlignmentцентрирует содержимое.
Их можно свободно вкладывать друг в друга, чтобы создать любой экран.
Часто задаваемые вопросы
Урок «Column, Row и Box» бесплатный?
Да — полный текст урока «Column, Row и Box» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.
Чему я научусь в уроке «Column, Row и Box»?
Распределяйте компонуемые элементы в распространённых макетах Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Android Academy?
Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Column, Row и Box»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Android Academy?
Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Column, Row и Box
- Система Modifier
- Выравнивание и расположение
- Списки с LazyColumn