Jetpack Compose Academy · Урок

ContentScale и кадрирование

Аккуратно вписывайте, заполняйте и кадрируйте изображения.

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

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

When Image and Box Disagree

Your image has its own aspect ratio, but your layout slot has another. ContentScale decides how the picture fits into that space.

The Aspect Ratio Problem

Force a wide photo into a square and it can stretch or squash. ContentScale gives you sane rules so pictures never look distorted by accident.

Crop Fills and Trims

The most common choice is ContentScale.Crop. It fills the whole slot and trims any overflow, so the frame is always full with no gaps.

Image(painter = p, contentDescription = null,
    contentScale = ContentScale.Crop)

Fit Shows Everything

ContentScale.Fit shrinks the image until it all fits inside the slot. Nothing is cut off, but you may see empty space on two sides.

FillBounds Can Distort

ContentScale.FillBounds stretches the image to fill both dimensions exactly. It guarantees no gaps but will warp the aspect ratio.

Width or Height Only

Need to fill just one axis? FillWidth and FillHeight scale to match that single dimension while keeping the ratio.

Inside Crops, None Does Not

Inside only shrinks when too big and never enlarges, while None draws at original size, cropping if it overflows.

Crop Needs a Bounded Size

Crop only has an effect when the Image has fixed bounds. Give it a size or fillMaxWidth with a height, or there is nothing to crop into.

Image(painter = p, contentDescription = null,
    modifier = Modifier.size(120.dp), contentScale = ContentScale.Crop)

Align Within the Frame

When Fit leaves empty space, the alignment argument decides where the image sits, such as Center or TopStart.

Image(painter = p, contentDescription = null, alignment = Alignment.TopCenter)

Crop for Thumbnails

Thumbnails and avatars almost always use Crop. It guarantees a clean, gap-free tile no matter the source photo dimensions.

Pick by Intent

Choose by what matters: use Fit when the whole image must be visible, and Crop when a full, edge-to-edge frame matters more.

Quick Check

You want an avatar tile that is always completely filled with no empty space. Which ContentScale fits best?

Recap: Scaling Images

You can now choose ContentScale wisely: Crop to fill, Fit to show all, and align the result. Next: clipping into shapes! 🔲

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

Урок «ContentScale и кадрирование» бесплатный?

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

Чему я научусь в уроке «ContentScale и кадрирование»?

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

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

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

Сколько времени занимает урок «ContentScale и кадрирование»?

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

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

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

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

← Назад к Jetpack Compose Academy