Görsellerinizi Kırpma ve Şekillendirme
Köşeleri yuvarlayın ve dairesel avatarlar oluşturun.
Görsellerinizi Kırpma ve Şekillendirme, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
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! 🎉
Sıkça Sorulan Sorular
“Görsellerinizi Kırpma ve Şekillendirme” dersi ücretsiz mi?
Evet — “Görsellerinizi Kırpma ve Şekillendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.
“Görsellerinizi Kırpma ve Şekillendirme” dersinde ne öğreneceğim?
Köşeleri yuvarlayın ve dairesel avatarlar oluşturun. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Görsellerinizi Kırpma ve Şekillendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Image Composable'ı
- Icon ile Material Simgeleri
- ContentScale ve Kırpma
- Görsellerinizi Kırpma ve Şekillendirme