Bu sayfa, Cloud Translation API ile çevrilmiştir.

Resim özelleştirme

Resimler, Image composable'daki (contentScale, colorFilter) özellikler kullanılarak özelleştirilebilir. Ayrıca, Image öğenize farklı efektler uygulamak için mevcut Modifiers öğesini de kullanabilirsiniz. Değiştiriciler yalnızca Image composable'da değil, herhangi bir Composable'da kullanılabilir. contentScale ve colorFilter ise Image composable'daki açık parametrelerdir.

İçerik ölçeği

Bir resmi sınırları içinde kırpmak veya ölçeklendirme şeklini değiştirmek için bir contentScale seçeneği belirtin. Varsayılan olarak, contentScale seçeneğini belirtmezseniz ContentScale.Fit kullanılır.

Aşağıdaki örnekte, Image composable'ı kenarlıklı 150 dp boyutla sınırlandırılmış ve aşağıdaki tablodaki farklı ContentScale seçeneklerini göstermek için Image composable'da arka plan sarı olarak ayarlanmıştır.

val imageModifier = Modifier
    .size(150.dp)
    .border(BorderStroke(1.dp, Color.Black))
    .background(Color.Yellow)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Fit,
    modifier = imageModifier
)CustomizeImageSnippets.kt

Farklı ContentScale seçenekleri belirlerseniz farklı sonuçlar elde edersiniz. Aşağıdaki tablo, ihtiyacınız olan doğru ContentScale modunu seçmenize yardımcı olabilir:

Kaynak resim
`ContentScale`	Sonuç - Dikey Resim:	Sonuç - Yatay Resim:
`ContentScale.Fit`: En boy oranını koruyarak resmi eşit şekilde ölçeklendirin (varsayılan). İçerik boyuttan küçükse resim, sınırlara sığacak şekilde büyütülür.
`ContentScale.Crop`: Resmi, mevcut alana sığacak şekilde ortadan kırpın.
`ContentScale.FillHeight`: Kaynağı, en boy oranını koruyarak hedef yüksekliğe uyacak şekilde ölçeklendirin.
`ContentScale.FillWidth`: Kaynağı, en boy oranını koruyarak hedef genişliğe uyacak şekilde ölçeklendirin.
`ContentScale.FillBounds`: Hedef sınırları doldurmak için içeriği dikey ve yatay olarak eşit olmayan şekilde ölçeklendirin. (Not: Bu işlem, resimleri tam olarak resmin oranıyla eşleşmeyen kapsayıcılara yerleştirirseniz resimleri bozar.)
`ContentScale.Inside`: Hedef sınırlarda en boy oranını korumak için kaynağı ölçeklendirin. Kaynak, her iki boyutta da hedeften küçük veya hedefe eşitse "Yok"a benzer şekilde davranır. İçerik her zaman sınırlar içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz.	Kaynak resim sınırlardan büyükse: Kaynak resim sınırlardan küçükse:	Kaynak resim sınırlardan büyükse: Kaynak resim sınırlardan küçükse:
`ContentScale.None`: Kaynağa ölçeklendirme uygulamayın. İçerik, hedef sınırlardan küçükse alana sığacak şekilde ölçeklendirilmez.	Kaynak resim sınırlardan büyükse: Kaynak resim sınırlardan küçükse:	Kaynak resim sınırlardan büyükse: Kaynak resim sınırlardan küçükse:

`Image` composable'ı bir şekle kırpma

Bir görüntünün şekle sığmasını sağlamak için yerleşik clip değiştiricisini kullanın. Bir resmi daire şeklinde kırpmak için Modifier.clip(CircleShape) simgesini kullanın:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

**Şekil 1**: CircleShape ile resim kırpma

Yuvarlatılmış köşe şekli: Yuvarlatılmasını istediğiniz köşelerin boyutuyla birlikte Modifier.clip(RoundedCornerShape(16.dp)) kullanın:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(RoundedCornerShape(16.dp))
)CustomizeImageSnippets.kt

**2. Şekil**: RoundedCornerShape ile resim kırpma

Shape öğesini genişleterek ve kırpılacak şekil için Path sağlayarak kendi kırpma şeklinizi de oluşturabilirsiniz:

class SquashedOval : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        val path = Path().apply {
            // We create an Oval that starts at ¼ of the width, and ends at ¾ of the width of the container.
            addOval(
                Rect(
                    left = size.width / 4f,
                    top = 0f,
                    right = size.width * 3 / 4f,
                    bottom = size.height
                )
            )
        }
        return Outline.Generic(path = path)
    }
}

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(200.dp)
        .clip(SquashedOval())
)CustomizeImageSnippets.kt

Özel yol şekliyle görüntü kırpma — **Şekil 3**: Özel yol şekliyle resim kırpma

`Image` composable'a kenarlık ekleme

Yaygın bir işlem, bir resmin etrafında kenarlık oluşturmak için Modifier.border() ile Modifier.clip() öğesini birleştirmektir:

val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, Color.Yellow),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

Resmi kırpma ve etrafına kenarlık ekleme — **4. Şekil**: Bir resmi kırpma ve etrafına kenarlık ekleme

Renk geçişli bir kenarlık oluşturmak istiyorsanız Brush API'yi kullanarak resmin etrafına gökkuşağı renk geçişli bir kenarlık çizebilirsiniz:

val rainbowColorsBrush = remember {
    Brush.sweepGradient(
        listOf(
            Color(0xFF9575CD),
            Color(0xFFBA68C8),
            Color(0xFFE57373),
            Color(0xFFFFB74D),
            Color(0xFFFFF176),
            Color(0xFFAED581),
            Color(0xFF4DD0E1),
            Color(0xFF9575CD)
        )
    )
}
val borderWidth = 4.dp
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .border(
            BorderStroke(borderWidth, rainbowColorsBrush),
            CircleShape
        )
        .padding(borderWidth)
        .clip(CircleShape)
)CustomizeImageSnippets.kt

Gökkuşağı gradyanlı daire kenarlığı — **Şekil 5**: Gökkuşağı renk geçişli daire kenarlığı

Özel en boy oranı ayarlama

Bir resmi özel en boy oranına dönüştürmek için Modifier.aspectRatio(16f/9f) kullanarak resim (veya bu bağlamdaki herhangi bir composable) için özel bir oran sağlayın.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    modifier = Modifier.aspectRatio(16f / 9f)
)CustomizeImageSnippets.kt

Resimde Modifier.aspectRatio(16f/9f) kullanma — **6. Şekil**: Resimde `Modifier.aspectRatio(16f/9f)` simgesini kullanma

Renk filtresi: Görüntünün piksel renklerini dönüştürür.

Image composable'da, resminizin tek tek piksellerinin çıkışını değiştirebilen bir colorFilter parametresi bulunur.

Görüntüye renk tonu verme

ColorFilter.tint(color, blendMode) kullanıldığında, Image composable'ınıza belirtilen renkte bir harmanlama modu uygulanır. ColorFilter.tint(color, blendMode) içeriğe renk vermek için BlendMode.SrcIn kullanır. Bu nedenle, sağlanan renk, resmin ekranda gösterildiği yerde gösterilir. Bu, farklı temalara ihtiyaç duyan simgeler ve vektörler için kullanışlıdır.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)CustomizeImageSnippets.kt

BlendMode.SrcIn ile ColorFilter.tint uygulanmış — **Şekil 7**: BlendMode.SrcIn ile uygulanan ColorFilter.tint

Diğer BlendMode'ler farklı efektlere neden olur. Örneğin, bir resimde BlendMode.Darken ayarını Color.Green ile kullanmak aşağıdaki sonucu verir:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)CustomizeImageSnippets.kt

Color.Green, BlendMode.Darken ile renk tonu — **Şekil 8**: Renk.Karıştırma moduyla yeşil renk tonu.Koyu

Kullanılabilen farklı karıştırma modları hakkında daha fazla bilgi için BlendMode referans dokümanlarına bakın.

Renk matrisiyle `Image` filtresi uygulama

ColorFilterRenk matrisiColorFilter seçeneğini kullanarak resminizi dönüştürün. Örneğin, resimlerinize siyah beyaz filtre uygulamak için ColorMatrix simgesini kullanabilir ve doygunluğu 0f olarak ayarlayabilirsiniz.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) })
)CustomizeImageSnippets.kt

Doygunluğu 0 olan renk matrisi (siyah beyaz görüntü) — **Şekil 9**: Doygunluğu 0 olan renk matrisi (siyah beyaz resim)

`Image` composable'ın kontrastını veya parlaklığını ayarlama

Bir resmin kontrastını ve parlaklığını değiştirmek için ColorMatrix simgesini kullanarak değerleri değiştirebilirsiniz:

val contrast = 2f // 0f..10f (1 should be default)
val brightness = -180f // -255f..255f (0 should be default)
val colorMatrix = floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

ColorMatrix ile görüntü parlaklığı ve kontrastı ayarlandı — **Şekil 10**: ColorMatrix kullanılarak ayarlanmış görüntü parlaklığı ve kontrastı

`Image` composable'ın renklerini tersine çevirme

Bir resmin renklerini ters çevirmek için ColorMatrix seçeneğini ayarlayın:

val colorMatrix = floatArrayOf(
    -1f, 0f, 0f, 0f, 255f,
    0f, -1f, 0f, 0f, 255f,
    0f, 0f, -1f, 0f, 255f,
    0f, 0f, 0f, 1f, 0f
)
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix))
)CustomizeImageSnippets.kt

Resimde ters çevrilmiş renkler — **Şekil 11**: Resimdeki renkler ters çevrilmiş

`Image` composable işlevini bulanıklaştırma

Bir görüntüyü bulanıklaştırmak için Modifier.blur() işlevini kullanın. Bu işlev, sırasıyla yatay ve dikey yönde bulanıklaştırma yarıçapını belirten radiusX ve radiusY değerlerini alır.

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment(RoundedCornerShape(8.dp))
        )
)CustomizeImageSnippets.kt

BlurEffect resme uygulandı — **12. Şekil**: Görüntüye uygulanan BlurEffect

Images bulanıklaştırılırken BlurredEdgeTreatment.Unbounded yerine BlurredEdgeTreatment(Shape) kullanılması önerilir. Çünkü BlurredEdgeTreatment.Unbounded, orijinal içeriğin sınırları dışında oluşturulması beklenen rastgele oluşturma işlemlerinin bulanıklaştırılması için kullanılır. Resimler, içerik sınırlarının dışında oluşturulmaz. Yuvarlak bir dikdörtgeni bulanıklaştırmak için bu ayrım gerekebilir.

Örneğin, yukarıdaki resimde BlurredEdgeTreatment değerini sınırsız olarak ayarlarsak resmin kenarları keskin yerine bulanık görünür:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(150.dp)
        .blur(
            radiusX = 10.dp,
            radiusY = 10.dp,
            edgeTreatment = BlurredEdgeTreatment.Unbounded
        )
        .clip(RoundedCornerShape(8.dp))
)CustomizeImageSnippets.kt

**Şekil 13**: BlurEdgeTreatment.Unbounded

Sizin için önerilenler

Not: JavaScript kapalıyken bağlantı metni gösterilir.
Grafik Değiştiriciler
Resim yükleme {:#loading-images}
Materyal simgeleri {:#material-icons}

Materyal simgeleri

Özel boyacı

Resim özelleştirme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

İçerik ölçeği

Image composable'ı bir şekle kırpma

Image composable'a kenarlık ekleme