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, tüm Yalnızca Image composable'ın değil, contentScale ve colorFilter, Image composable'daki 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ılacak.

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 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 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 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: Resimleri, tam oranlarıyla eşleşmeyen kapsayıcılara yerleştirirseniz resimler bozulur.)
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 bu sınırların içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz.	Kaynak resim sınırların üzerinde: . 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ı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ı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

Şekil 2: RoundedCornerShape ile resim kırpma

Ayrıca Shape öğesini genişletip şeklin kırpılması için bir Path:

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 bileşimine kenarlık ekleme

Yaygın bir işlem, Modifier.border() öğesinin Modifier.clip() ile birleştirilmesidir. için bir resim etrafında kenarlık oluşturun:

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

Gradyan kenarlık oluşturmak isterseniz Brush API'sini kullanarak resmin etrafına gökkuşağı gradyanı kenarlık çizin:

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ğı renk geçişli daire kenarlığı

Özel en boy oranı ayarlama

Bir resmi özel en boy oranına dönüştürmek için Bir resim (veya herhangi bir resim için özel oran) sağlamak üzere Modifier.aspectRatio(16f/9f) composable'dan bahsetmek istiyorum.

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

Şekil 6: Resim üzerinde Modifier.aspectRatio(16f/9f) kullanma

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) ile bir karıştırma modu uygulanır. Image composable'ınıza renk kazandırabilir. 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, 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 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

Şekil 8: BlendMode.Darken ile Color.Green tint

Şu konu hakkında daha fazla bilgi için BlendMode referans dokümanlarına bakın: farklı karıştırma modları var.

Renk matrisi içeren bir Image filtresi uygulama

Renk matrisi ColorFilter seçeneğini kullanarak resminizi dönüştürün. Örneğin, siyah beyaz filtre uygulamak için aşağıdaki kodu kullanabilirsiniz: ColorMatrix ve doygunluğu 0f olarak ayarlayın.

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

Şekil 10: ColorMatrix kullanılarak resim parlaklığı ve kontrastı ayarlandı

Image bileşiminin renklerini tersine çevirme

Bir resmin renklerini ters çevirmek için ColorMatrix simgesini renkler:

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

Ş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. Resimler, içeriğin sınırları dışında oluşturulmaz. Yuvarlatılmış bir dikdörtgenin bulanıklaştırılması ise bu ayrımı gerektirebilir.

Örneğin, yukarıdaki örnekte 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: CrowdEdgeTreatment.Sınırsız

Not: Bulanıklaştırma efekti yalnızca Android 12 ve sonraki sürümlerde desteklenir. Bu değiştiricinin eski Android sürümlerinde kullanılmasına yönelik girişimler yok sayılır.