Resim özelleştirme

Resimler, Image composable'ındaki (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'ında değil, tüm Composable'da kullanılabilir. contentScale ve colorFilter ise Image composable'daki 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 contentScale seçeneği belirtin. Varsayılan olarak, bir contentScale seçeneği belirtmezseniz ContentScale.Fit kullanılır.

Aşağıdaki örnekte Image composable, 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ı ile 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ı çıkışlara neden olur. Gereken doğru ContentScale modunu seçmenize yardımcı olabilecek bir tabloyu aşağıda bulabilirsiniz:

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, kullanılabilir alana göre ortalayın.
ContentScale.FillHeight: Kaynağı, en boy oranını koruyarak, sınırların hedef yüksekliğiyle eşleşmesi için ölçeklendirin.
ContentScale.FillWidth: Kaynağı, en boy oranını koruyarak, sınırlar hedef genişlikle eşleşecek şekilde ölçeklendirin.
ContentScale.FillBounds: Hedef sınırlarını doldurmak için içeriği dikey ve yatay olarak düzenli olmayacak şekilde ölçeklendirin. (Not: Resmin tam oranıyla eşleşmeyen kapsayıcılara yerleştirmeniz durumunda görüntüler bozulur)
ContentScale.Inside: En boy oranını hedef sınırları içinde 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ın içinde olur. İçerik sınırların altındaysa ölçeklendirme uygulanmaz.	Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında:	Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında:
ContentScale.None: Kaynağa herhangi bir ölçeklendirme uygulamayın. İçerik hedef sınırlarından küçükse alana sığacak şekilde ölçeklendirilmez.	Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında:	Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında:

Bestelenen Image öğesini şekle dönüştürme

Bir resmi şekle sığdırmak için yerleşik clip değiştiricisini kullanın. Resmi daire şeklinde kırpmak için Modifier.clip(CircleShape) öğesini 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 (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

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

Şekil 3: Bir resmi özel yol şekliyle kırpma

Image composable'ına kenarlık ekleme

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: Resim kırpın ve etrafına kenarlık ekleyin

Gradyan kenarlığı oluşturmak istiyorsanız resmin etrafına gökkuşağı gradyanı sınırı ç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

Şekil 5: Gökkuşağı gradyanı daire kenarlık

Özel en boy oranı ayarla

Bir resmi özel en boy oranına dönüştürmek için resim (veya bu şekilde oluşturulan herhangi bir resim) için özel oran sağlamak amacıyla Modifier.aspectRatio(16f/9f) özelliğini 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.

Resmi tonlama

ColorFilter.tint(color, blendMode) kullanıldığında Image composable'ınıza belirtilen renkle bir harmanlama modu uygulanır. ColorFilter.tint(color, blendMode), içeriğe ton eklemek için BlendMode.SrcIn değerini kullanır. Diğer bir deyişle, sağlanan renk, resmin ekranda gösterildiği yerde gösterilir. Bu, farklı temalarının belirlenmesi gereken simgeler ve vektörler için faydalı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

Bazı BlendMode'ler ise farklı etkilere yol açar. Örneğin, bir resimde Color.Green ile BlendMode.Darken değerinin ayarlanması aşağıdaki sonucu oluşturur:

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: BlendMode.Koyulaştır ile Renk.Yeşil ton

Kullanılabilen farklı harmanlama 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 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

Şekil 9: Doygunluk 0 ile Renk Matrisi (siyah beyaz resim)

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

Bir resmin kontrastını ve parlaklığını değiştirmek amacıyla değerleri değiştirmek için ColorMatrix kullanabilirsiniz:

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 composable'ın renklerini çevirin

Bir resmin renklerini ters ç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 renkler tersine çevrilmiş

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

Bir resmi bulanıklaştırmak için, yatay ve dikey yönde bulanıklaştırma yarıçapını sırasıyla 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ın bulanıklaştırılması için BlurredEdgeTreatment.Unbounded yerine BlurredEdgeTreatment(Shape) kullanılması önerilir. Resimlerde, muhtemelen içeriğin sınırlarının dışında oluşturulmazlar. Yuvarlak bir dikdörtgenin bulanıklaştırılması ise bu ayrımı gerektirebilir.

Örneğin, BlurredEdgeTreatment özelliğini yukarıdaki resimde Sınırsız olarak ayarlarsak görüntünün 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: NavigationEdgeTreatment.Unbounded

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