Android Academy · Урок

Создание карточки профиля

Объединяйте composable-функции в экран.

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

Наша цель

Пора объединить изученное. Мы создадим простую карточку профиля: имя и должность, аккуратно размещённые в оформленном блоке.

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

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

Modifier изменяет внешний вид и поведение компонуемого элемента. Его передают через параметр modifier, который принимают большинство компонуемых элементов.

Модификаторы управляют внутренними отступами, размером, цветом фона, границами и многим другим. Это основной способ оформлять пользовательский интерфейс в Compose.

Text(
    "Ada Lovelace",
    modifier = Modifier.padding(16.dp)
)

Цепочки модификаторов

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

Порядок важен: внутренний отступ перед фоном даёт результат, отличный от внутреннего отступа после фона. Читайте цепочку слева направо, как рецепт.

Modifier
    .padding(16.dp)
    .fillMaxWidth()

Заполнение ширины

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

Для обоих направлений есть также fillMaxSize, а с помощью size можно задать фиксированные ширину и высоту.

Column(
    modifier = Modifier.fillMaxWidth()
) {
    Text("Profile")
}

Добавление внутренних отступов

Внутренний отступ добавляет пространство внутри компонуемого элемента — между его краем и содержимым. Используйте Modifier.padding со значением dp.

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

Column(
    modifier = Modifier.padding(16.dp)
) {
    Text("Ada Lovelace")
    Text("Mathematician")
}

Добавление фона карточке

Цвет фона помогает выделить карточку. Примените его с помощью модификатора background и значения цвета.

Объедините фон с внутренними отступами, чтобы вокруг текста внутри цветной области оставалось свободное пространство.

Column(
    modifier = Modifier
        .background(Color.LightGray)
        .padding(16.dp)
) {
    Text("Ada Lovelace")
}

Размещение имени и должности

Внутри Column карточки мы располагаем два фрагмента текста: сверху — имя жирным шрифтом, а снизу — более лёгкую надпись с должностью.

Разные значения fontSize и fontWeight создают между ними понятную визуальную иерархию.

Column {
    Text("Ada Lovelace", fontSize = 20.sp, fontWeight = FontWeight.Bold)
    Text("Mathematician", fontSize = 14.sp)
}

Создание повторно используемого элемента

Превратим карточку в повторно используемый компонуемый элемент, который принимает параметры name и title. Теперь он сможет показывать любого человека.

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

@Composable
fun ProfileCard(name: String, title: String) {
    Column {
        Text(name)
        Text(title)
    }
}

Полная карточка профиля

Вот карточка со всеми элементами: столбец на всю ширину, серый фон, внутренние отступы и две оформленные строки текста.

Обратите внимание, как цепочка модификаторов и дочерние элементы столбца объединяют всё изученное на предыдущих уроках в один аккуратный компонуемый элемент.

@Composable
fun ProfileCard(name: String, title: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        Text(name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
        Text(title, fontSize = 14.sp)
    }
}

Предварительный просмотр карточки

Добавьте оболочку @Preview, чтобы увидеть карточку в Android Studio. Она вызывает ProfileCard с демонстрационными данными и показывает фон.

Теперь вы можете менять внутренние отступы или цвета и сразу видеть результат.

@Preview(showBackground = true)
@Composable
fun ProfileCardPreview() {
    ProfileCard("Ada Lovelace", "Mathematician")
}

Отображение на экране

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

Теперь вы прошли путь от одного компонуемого элемента до полноценного повторно используемого компонента пользовательского интерфейса.

setContent {
    ProfileCard("Ada Lovelace", "Mathematician")
}

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

Повторим, как компонуемые элементы получают внутренние отступы, размер и фон.

Итоги

Вы создали полноценную карточку профиля, объединив Text, Column и Modifier. Модификаторы позволяют объединять в цепочку padding, fillMaxWidth и background, чтобы задавать форму и оформление пользовательского интерфейса.

Вы сделали карточку повторно используемой с параметрами name и title, просмотрели её с помощью @Preview и отобразили через setContent. Это полноценный экран на основе компонуемых элементов, созданный от начала до конца. Поздравляем!

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

Урок «Создание карточки профиля» бесплатный?

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

Чему я научусь в уроке «Создание карточки профиля»?

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

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

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

Сколько времени занимает урок «Создание карточки профиля»?

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

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

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

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

← Назад к Android Academy