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

Resim özelleştirme

Resimler, Image kompozisyonunda (contentScale, colorFilter) bulunan özellikler kullanılarak özelleştirilebilir. Image'ünüze farklı efektler uygulamak için mevcut Modifiers'i de uygulayabilirsiniz. Değiştiriciler yalnızca Image bileşeninde değil, herhangi bir bileşende kullanılabilir. contentScale ve colorFilter ise Image bileşenindeki açık parametrelerdir.

İçerik ölçeği

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

Aşağıdaki örnekte, resim bileşimi 150 dp boyutunda sınırlandırılmıştır ve aşağıdaki tablodaki farklı ContentScale seçeneklerini göstermek için Image bileşiminde 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 ayarlamak farklı sonuçlar verir. Aşağıda, ihtiyacınız olan doğru ContentScale modunu seçmenize yardımcı olabilecek bir tablo verilmiştir:

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 uyacak şekilde ölçeklendirilir.
`ContentScale.Crop`: Resmi, mevcut alan içinde ortalayın.
`ContentScale.FillHeight`: Sınırların hedef yüksekliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin.
`ContentScale.FillWidth`: Kaynağı, en boy oranını koruyarak sınırların hedef genişlikle eşleşeceği şekilde ölçeklendirin.
`ContentScale.FillBounds`: Hedef sınırları doldurmak için içeriği dikey ve yatay olarak düzensiz şekilde ölçeklendirin. (Not: Bu durum, resimleri resmin tam oranıyla eşleşmeyen kapsayıcılara yerleştirmeniz durumunda resimleri bozar)
`ContentScale.Inside`: Hedef sınırları içindeki en boy oranını korumak için kaynağı ölçeklendirin. Kaynak, her iki boyuttaki hedeften küçük veya hedefe eşitse "Hiçbiri"ne benzer şekilde davranır. İçerik her zaman sınırların içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz.	Kaynak resim sınırlardan büyük: Kaynak resim sınırlardan küçük:	Kaynak resim sınırların üzerinde: Kaynak resim sınırların altında:
`ContentScale.None`: Kaynağa ölçeklendirme uygulamayın. İçerik, hedef sınırlarından küçükse alana sığacak şekilde ölçeklendirilmez.	Kaynak resim sınırların üzerinde: Kaynak resim sınırların altında:	Kaynak resim sınırlardan büyük: Kaynak resim sınırlardan küçük:

Oluşturulabilir bir `Image` şeklini bir şekil olarak kırpın

Bir resmi bir şekle sığdırmak için yerleşik clip değiştiriciyi 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 bir resmi 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

RoundedCornerShape ile görüntü kırpma — **Şekil 2**: RoundedCornerShape ile bir resmi kırpma

Shape öğesini genişleterek ve şeklin kırpılacağı bir 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 bir resmi kırpma — **Şekil 3**: Resimden özel yol şekliyle kırpma

`Image` composable'a kenarlık ekle

Bir resmin etrafında kenarlık oluşturmak için Modifier.border() öğesini Modifier.clip() ile birleştirmek, sık kullanılan bir işlemdir:

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

Bir resmi kırpıp etrafına kenarlık ekleme — **Şekil 4**: Bir resmi kırpın ve etrafına kenarlık ekleyin

Renk geçişli bir kenar oluşturmak istiyorsanız resmin etrafında gökkuşağı renk geçişli bir kenar çizmek için Brush API'yi kullanabilirsiniz:

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ğı gradyan daire kenarlık — **Ş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 amacıyla resim (veya bu konudaki herhangi bir composable için) için özel oran sağlamak üzere Modifier.aspectRatio(16f/9f) işlevini kullanın.

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

Resim üzerinde Modifier.aspectRatio(16f/9f) kullanma — **Şekil 6**: Resimde `Modifier.aspectRatio(16f/9f)` Kullanımı

Renk filtresi: Resmin piksel renklerini dönüştürme

Resim bileşiği, resminizin tek tek piksellerinin çıkışını değiştirebilen bir colorFilter parametresine sahiptir.

Resim tonlama

ColorFilter.tint(color, blendMode) kullanıldığında, Image composable'ınıza belirtilen rengi içeren bir karıştırma modu uygulanır. ColorFilter.tint(color, blendMode), içeriğe ton vermek için BlendMode.SrcIn değerini kullanır. Yani, verilen renk, resim ekranda gösterilir. Bu, farklı temalara sahip olması gereken 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

**Şekil 7**: BlendMode.SrcIn ile uygulanan ColorFilter.tint

Diğer BlendMode'ler farklı etkilere neden olur. Örneğin, bir resim üzerinde BlendMode.Darken öğesinin Color.Green ile ayarlanması 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

Renk.BlendMode.Koyu renkle yeşil ton — **Şekil 8**: BlendMode.Darken ile Color.Green tint

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

Renk matrisi içeren bir `Image` filtresi uygulama

Renk matrisi ColorFilter 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

Doygunluk 0 olan renk matrisi (siyah beyaz resim) — **Şekil 9**: Doygunluk 0 ile Renk Matrisi (siyah beyaz resim)

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

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 kullanılarak resmin parlaklığı ve kontrastı ayarlandı — **Şekil 10**: ColorMatrix kullanılarak ayarlanmış resim parlaklığı ve kontrastı

`Image` bileşiminin renklerini tersine çevirme

Bir resmin renklerini tersine çevirmek için ColorMatrix simgesini renkleri tersine çevirecek şekilde 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

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

`Image` bileşenini bulanıklaştırma

Bir resmi bulanıklaştırmak için, yatay ve dikey yöndeki bulanıklık yarıçapını belirten radiusX ve radiusY değerlerini sağlayarak Modifier.blur() özelliğini kullanın.

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

Resme bulanıklaştırma efekti uygulandı — **Şekil 12**: Resme uygulanan bulanıklaştırma efekti

Images bulanıklaştırırken BlurredEdgeTreatment.Unbounded yerine BlurredEdgeTreatment(Shape) kullanılması önerilir. BlurredEdgeTreatment.Unbounded, orijinal içeriğin sınırları dışında oluşturulması beklenen rastgele oluşturma işlemlerini bulanıklaştırmak için kullanılır. Resimlerde, büyük olasılıkla içerik sınırlarının dışında oluşturulmaz. Yuvarlak bir dikdörtgeni bulanıklaştırmak ise bu ayrımı gerektirebilir.

Ö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

BlurEdgeTreatment.Unbounded — **Şekil 13**: WalletEdgeTreatment.Unbounded

Sizin için önerilenler

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

Materyal simgeleri

Özel boyacı

Resim özelleştirme

İçerik ölçeği

Oluşturulabilir bir Image şeklini bir şekil olarak kırpın

Image composable'a kenarlık ekle