Android Academy · Урок

Основы Text и Column

Отображайте и размещайте содержимое в столбик.

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

Компонуемая функция Text

Самое простое, что можно показать в Compose, — это текст. Компонуемая функция Text отображает строку на экране.

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

@Composable
fun Hello() {
    Text("Hello, Android!")
}

Стилизация текста

Text принимает параметры, изменяющие внешний вид. Можно задать fontSize, color и fontWeight.

Размеры задаются в единицах sp, которые масштабируются в соответствии с настройками шрифта пользователя. Благодаря этому приложение остаётся удобным для чтения всеми пользователями.

Text(
    "Big Title",
    fontSize = 24.sp,
    fontWeight = FontWeight.Bold
)

Зачем нужен макет

Если вызвать Text два раза подряд, оба фрагмента текста окажутся в одном месте и наложатся друг на друга. Компонуемые функции не размещают себя автоматически.

Чтобы расположить элементы в нужном порядке, нужен компонуемый макет, который организует дочерние элементы. Для вертикального расположения чаще всего используют Column.

Компонуемая функция Column

Column располагает дочерние элементы вертикально, один под другим. Поместите дочерние компонуемые функции внутрь завершающего лямбда-блока.

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

@Composable
fun TwoLines() {
    Column {
        Text("First line")
        Text("Second line")
    }
}

Порядок в Column имеет значение

Внутри Column дочерние элементы появляются сверху вниз в точности в том порядке, в котором Вы их перечислили. Переместите строку выше в коде — и она переместится выше на экране.

Благодаря этому макеты предсказуемы: прочитав код сверху вниз, Вы поймёте, как выглядит экран сверху вниз.

Column {
    Text("Title")
    Text("Subtitle")
    Text("Body text")
}

Вертикальное размещение

Column может управлять расстоянием между дочерними элементами с помощью verticalArrangement. Например, Arrangement.spacedBy добавляет одинаковые интервалы.

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

Column(
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    Text("One")
    Text("Two")
}

Горизонтальное выравнивание

По умолчанию Column выравнивает дочерние элементы по началу, то есть по левому краю. Используйте horizontalAlignment, чтобы выровнять их по центру или по концу.

Установите значение Alignment.CenterHorizontally, и каждый дочерний элемент будет выровнен по центру ширины столбца.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Centered")
    Text("Also centered")
}

Знакомство с Row

Column располагает элементы вертикально, а его сосед Row — горизонтально, один рядом с другим. Они работают по одному принципу, но в разных направлениях.

Вы будете комбинировать Rows и Columns, чтобы создавать сетки и карточки. А пока запомните: Column — вниз, Row — в ширину.

Row {
    Text("Left")
    Text("Right")
}

Вложенные макеты

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

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

Column {
    Text("Score")
    Row {
        Text("Home")
        Text("Away")
    }
}

Добавление расстояния между элементами

Чтобы добавить фиксированный промежуток между двумя компонуемыми элементами, можно вставить Spacer. Это пустой компонуемый элемент, который просто занимает место.

Задайте ему высоту с помощью модификатора — это сдвинет следующий элемент вниз. Подробнее о модификаторах мы поговорим на следующем уроке.

Column {
    Text("Top")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom")
}

Собираем всё вместе

С помощью Text и Column вы уже можете создать простой экран с подписями. Разместите заголовок и несколько строк с подробностями друг под другом.

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

@Composable
fun InfoBlock() {
    Column {
        Text("Name: Ada")
        Text("Role: Engineer")
    }
}

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

Проверим, насколько хорошо вы понимаете направление размещения элементов.

Итоги

Вы научились отображать строки с помощью Text и оформлять их, используя fontSize и fontWeight. Column располагает дочерние элементы вертикально в порядке, заданном в коде, а Row — горизонтально.

Вы можете управлять расстояниями с помощью verticalArrangement или Spacer, а выравнивать дочерние элементы — с помощью horizontalAlignment. Вложенные Rows и Columns позволяют создавать более сложные макеты. Далее вы научитесь просматривать эти экраны без запуска приложения.

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

Урок «Основы Text и Column» бесплатный?

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

Чему я научусь в уроке «Основы Text и Column»?

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

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

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

Сколько времени занимает урок «Основы Text и Column»?

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

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

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

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

← Назад к Android Academy