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 nasıl ölçeklendirileceğini değiştirmek veya kırpmak 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 bulunmaktadır:

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 ortalanıp kırpı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ını doldurmak için içeriği dikey ve yatay olarak eşit olmayan bir ş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 boyutta da hedeften küçük veya hedefe eşitse "None" değerine benzer şekilde davranır. İçerik her zaman sınırlar içinde yer alır. İçerik sınırların altındaysa ölçeklendirme uygulanmaz.	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:
`ContentScale.None`: Kaynağa ölçeklendirme uygulamayın. İçerik, hedef sınırların altındaysa 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ırların üzerinde: Kaynak resim sınırların altında:

`Image` bileşenini bir şekle klipsleme

Bir resmi bir şekle sığdırmak 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

CircleShape ile bir resmi kırpma — **Ş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

RoundedCornerShape ile bir resmi kırpma — **Şekil 2**: RoundedCornerShape ile resim kırpma

Ayrıca Shape öğesini genişletip şeklin kırpılması için bir Path sağlayarak kendi kırpma şeklinizi 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 resim kırpma — **Şekil 3**: Özel yol şekliyle bir resmi kırpma

`Image` kompozisyonuna kenarlık ekleme

Bir resmin etrafında çerçeve oluşturmak için Modifier.border() işlevini Modifier.clip() işleviyle birlikte kullanmak yaygın 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 resim kesip etrafına kenarlık ekleyin — **Ş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ğı gradyanı daire kenarlığı

Özel en boy oranı ayarlayın

Bir resmi özel en boy oranına dönüştürmek için Modifier.aspectRatio(16f/9f) öğesini kullanarak resim (veya bu bağlamda herhangi bir kompozisyon) 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 Değiştirici.aspectRatio(16f/9f) Kullanma — **Şekil 6**: Resim üzerinde `Modifier.aspectRatio(16f/9f)` kullanma

Renk filtresi - Resmin piksel renklerini dönüştürün

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 kompozisyonunuza belirli bir renge sahip bir harmanlama modu uygulanır. ColorFilter.tint(color, blendMode), içeriği renklendirmek için BlendMode.SrcIn kullanır. Bu, resmin ekranda gösterildiği yerde sağlanan rengin gösterileceği anlamına gelir. Bu özellik, teması farklı 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 resimde BlendMode.Darken öğesini Color.Green ile ayarlamak 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

BlendMode.Darken ile Color.Green tonlama — **Ş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` kompozisyonunun kontrastını veya parlaklığını ayarlama

Bir resmin kontrastını ve parlaklığını değiştirmek için ColorMatrix düğmesini 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 resim parlaklığı ve kontrastı ayarlandı

`Image` bir composable'ın renklerini tersine çevirin

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 Modifier.blur() öğesini kullanın. Bu öğe, sırasıyla yatay ve dikey yönde bulanıklık yarıçapını belirten radiusX ve radiusY değerlerini sağlar.

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 uygulanan BlurEffect — **Ş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ştiricileri
Resimler yükleniyor {:#loading-images}
Materyal simgeler {:#material-icons}

Materyal simgeleri

Özel boyacı

Resim özelleştirme

İçerik ölçeği

Image bileşenini bir şekle klipsleme

Image kompozisyonuna kenarlık ekleme