Resim özelleştirme

Resimler, Image composable'daki (contentScale, colorFilter) özellikler kullanılarak özelleştirilebilir. Image öğenize farklı efektler uygulamak için mevcut Modifiers öğesini de uygulayabilirsiniz. Değiştiriciler yalnızca Image composable'da değil, herhangi bir Composable'da da kullanılabilir. contentScale ve colorFilter ise Image composable'da 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 Görüntü composable, kenarlıklı 150 dp boyutuyla sınırlandırılmıştır ve aşağıdaki tabloda 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 ayarlanırsa farklı çıkışlar elde edilir. 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 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: Sınırların hedef genişliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ö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 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ırlardan büyük: Kaynak resim sınırlardan küçük:
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ırlardan büyük: Kaynak resim sınırlardan küçük:	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ştiricisini kullanın. Bir resmi daire şeklinde kırpmak için Modifier.clip(CircleShape) işlevini 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 - yuvarlamak istediğiniz köşelerin boyutuna göre: Modifier.clip(RoundedCornerShape(16.dp):

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

Ş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

Ş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

Şekil 4: Bir resim kesip etrafına kenarlık ekleyin

Gradyan kenarlık oluşturmak isterseniz Brush API'yi kullanarak resmin etrafına gökkuşağı gradyan kenarlığı ç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

Ş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 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

Şekil 6: Resimde Modifier.aspectRatio(16f/9f) Kullanımı

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

Image composable, resminizin bağımsız 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 ö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 reklamları farklı etkilere yol açar. Ö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

Şekil 8: Color.BlendMode.Koyu karart ile yeşil ton

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

Renk matrisiyle 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 özelliğini kullanıp 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

Ş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

Ş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 ters ç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

Şekil 11: Resimdeki ters çevrilmiş renkler

Image bir composable'ı bulanıklaştır

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

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

Images bulanıklaştırılırken, orijinal içeriğin sınırları dışında oluşturulması beklenen rastgele oluşturmaları bulanıklaştırmak için BlurredEdgeTreatment.Unbounded yerine BlurredEdgeTreatment(Shape) kullanılması önerilir. 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 öğesini Sınırsız olarak ayarlarsak resmin kenarları keskin değil, 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: WalletEdgeTreatment.Unbounded

Not: Bulanıklaştırma efekti yalnızca Android 12 ve sonraki sürümlerde desteklenir. Eski Android sürümlerinde bu Değiştirici'yi kullanma girişimleri yoksayılır.