Composable Image
Рисуйте ресурс drawable на экране.
«Composable Image» — бесплатный урок Jetpack Compose Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Jetpack Compose Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Jetpack Compose Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Pictures, the Compose Way
Every app shows pictures, and in Compose you draw them with the Image composable. It is the declarative replacement for the old ImageView. 🖼️
You Need a Painter
Image does not take a raw resource id. It takes a painter, a small object that knows how to draw your picture onto the screen.
painterResource Loads Drawables
To turn a drawable in res into a painter, you call painterResource with its resource id. This reads your PNG or vector asset.
val logo = painterResource(id = R.drawable.logo)Your First Image
Pass that painter to Image and it appears on screen. This single line draws your drawable wherever the composable sits.
Image(painter = painterResource(R.drawable.logo), contentDescription = null)contentDescription Is Required
Image always asks for a contentDescription. Screen readers speak it aloud, so describe the picture in a few clear words.
Image(painter = logo, contentDescription = "Company logo")Decorative? Pass null
If a picture is purely decorative and adds no meaning, set contentDescription to null so TalkBack skips it instead of reading noise.
Vectors Scale Cleanly
Compose loves vector drawables. A vector stays razor sharp at any size because it is math, not fixed pixels, so it never looks blurry.
Size It with a Modifier
An Image draws at the bitmap size by default. Add a Modifier.size to make it exactly the dimensions your layout needs.
Image(painter = logo, contentDescription = null, modifier = Modifier.size(96.dp))Bitmaps from the Network
painterResource only handles local assets. For remote URLs you reach for a loader library, the most popular being Coil with rememberAsyncImagePainter.
Tinting an Image
You can recolor a simple image with a colorFilter. This is great for monochrome icons you want to match your theme color.
Image(painter = logo, contentDescription = null,
colorFilter = ColorFilter.tint(Color.Blue))Image vs Icon
Use Image for photos and rich artwork. For small, theme-tinted symbols, the lighter Icon composable is usually the better choice.
Quick Check
Which argument does the Image composable always require alongside the painter?
Recap: Drawing Images
You learned that Image draws a painter from painterResource, always needs a contentDescription, and sizes with a modifier. Next up: Material icons! ✨
Часто задаваемые вопросы
Урок «Composable Image» бесплатный?
Да — полный текст урока «Composable Image» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Jetpack Compose Academy, подпишись на CoddyKit PRO. Курс Jetpack Compose Academy содержит 4 уроков всего.
Чему я научусь в уроке «Composable Image»?
Рисуйте ресурс drawable на экране. Ты практикуешь Jetpack Compose Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Jetpack Compose Academy?
Предыдущий опыт не требуется. Jetpack Compose Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Composable Image»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Jetpack Compose Academy?
Да. Каждый урок Jetpack Compose Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.