Аватар, имя и раздел биографии
Соберите заголовок с изображением и текстом.
«Аватар, имя и раздел биографии» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Build the Header First
Time to make the sketch real. You will start at the top of the card with the header: the avatar, the name, and a short bio. 👤
The Avatar Image
The avatar is an Image Composable that draws a drawable resource. Give it a clear size so it never balloons to fill the screen.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo"
)Make It a Circle
Profile photos look best as circles. Chain clip with CircleShape on the Image modifier to round it into a perfect avatar.
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = "Profile photo",
modifier = Modifier.size(96.dp).clip(CircleShape)
)Add the Name
Below the avatar comes the display name. A simple Text Composable shows the string the user will read first.
Text(text = "Ada Lovelace")Style the Name
Names should stand out. Pass a style from MaterialTheme typography so the name looks like a proper heading.
Text(
text = "Ada Lovelace",
style = MaterialTheme.typography.titleLarge
)The Bio Text
Under the name, add a one-line bio with another Text. Use a smaller, softer style so it reads as a subtitle, not a headline.
Text(
text = "Building delightful apps.",
style = MaterialTheme.typography.bodyMedium
)Stack Them in a Column
Avatar, name, and bio stack vertically, so wrap all three in a Column. The order you write them is the order they appear.
Column {
Image(/* avatar */)
Text("Ada Lovelace")
Text("Building delightful apps.")
}Center Everything
Headers feel balanced when centered. Set horizontalAlignment to CenterHorizontally on the Column to line up the avatar and text.
Column(
horizontalAlignment = Alignment.CenterHorizontally
) { /* ... */ }Add Vertical Spacing
Cramped headers look messy. Use Arrangement.spacedBy on the Column to drop a consistent gap between the avatar, name, and bio.
Column(
verticalArrangement = Arrangement.spacedBy(8.dp)
) { /* ... */ }Pad the Header
Give the whole section room to breathe by adding padding to the Column modifier. Edges should never touch the screen frame.
Column(
modifier = Modifier.padding(16.dp)
) { /* ... */ }Header Section Done
You now have a clean header: a circular avatar, a bold name, and a soft bio, centered and spaced. The top of your card is finished. 🎉
Quick Check
How do you turn a square photo into a round avatar?
Recap: The Header
You built the header inside a centered Column: a clipped circular avatar, a styled name, and a subtle bio, all padded and spaced. Next you will add the stats row.
Изучай 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 структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Аватар, имя и раздел биографии»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Эскиз компоновки карточки профиля
- Аватар, имя и раздел биографии
- Строка статистики и кнопка подписки
- Выделение переиспользуемых Composable