Jetpack Compose Academy · Урок

Обрезка и формы изображений

Закругляйте углы и создавайте круглые аватары.

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

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

Beyond the Rectangle

Images draw as plain rectangles by default. To get rounded corners or circular avatars, you clip them to a shape.

Modifier.clip Cuts the Shape

The Modifier.clip function masks a composable to a given shape. Anything outside that shape simply is not drawn.

Image(painter = p, contentDescription = null,
    modifier = Modifier.clip(CircleShape))

CircleShape for Avatars

For a perfect circular avatar, clip with CircleShape. Pair it with a square size and Crop for a clean, round profile picture.

Modifier.size(64.dp).clip(CircleShape)

Rounded Corners

Soft, modern cards use RoundedCornerShape. Give it a corner radius in dp to round all four corners evenly.

Modifier.clip(RoundedCornerShape(16.dp))

Round Specific Corners

You can round corners individually, for example only the top, by passing separate values for each corner of RoundedCornerShape.

RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)

Order Matters: Clip First

Modifiers apply in order. Put clip before background or border so the shape masks them too, not just the image content.

Add a Border on Top

A clipped image looks great with a matching outline. Chain a border with the same shape right after the clip.

Modifier.clip(CircleShape).border(2.dp, Color.White, CircleShape)

Clip Plus Crop Together

The avatar recipe is two modifiers plus a scale: size, then clip to CircleShape, with ContentScale.Crop so the photo fills the circle.

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

Custom Shapes

Need a hexagon or a star? You can pass any Shape, including ones you define yourself with a path, to clip into bespoke outlines.

clipToBounds for Children

To stop child content from drawing outside a container, use Modifier.clipToBounds, which clips to the element rectangle.

Shadows and Clipping

A shadow needs the shape too. Apply Modifier.shadow with the same shape before the clip so the elevation follows the rounded edge.

Modifier.shadow(4.dp, CircleShape).clip(CircleShape)

Quick Check

What shape do you clip an image to in order to make a perfectly circular avatar?

Recap: Shaping Images

You now clip images to CircleShape or RoundedCornerShape, order modifiers correctly, and add borders and shadows. Course complete! 🎉

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

Урок «Обрезка и формы изображений» бесплатный?

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

Чему я научусь в уроке «Обрезка и формы изображений»?

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

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

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

Сколько времени занимает урок «Обрезка и формы изображений»?

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

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

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

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

← Назад к Jetpack Compose Academy