Resim özelleştirme

Image composable'daki (contentScale, colorFilter) özellikleri kullanarak resimleri özelleştirebilirsiniz. Ayrıca, Image öğenize farklı efektler uygulamak için mevcut değiştiricileri de kullanabilirsiniz. Değiştiriciler, yalnızca Image composable'da değil, tüm composable'larda kullanılabilir. contentScale ve colorFilter ise Image composable'da açık parametrelerdir.

İçerik ölçeği

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

Aşağıdaki örnekte, Image composable'ı kenarlıklı 150 dp boyutla sınırlandırılmış ve aşağıdaki tablodaki 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
)

Farklı ContentScale seçenekleri belirlendiğinde farklı çıktılar elde edilir. Aşağıdaki tablo, doğru ContentScale modunu seçmenize yardımcı olur:

Kaynak resim Köpeğin gösterildiği portre kaynağı. Farklı bir köpeğin gösterildiği manzara kaynağı.
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. Tek tip ölçeklendirilmiş bir köpek portresi. Eşit şekilde ölçeklendirilmiş bir köpek manzarası.
ContentScale.Crop: Resmi, mevcut alana ortalayarak kırpın. Kare çerçeveyi dolduracak şekilde kırpılmış, yalnızca resmin orta kısmını gösteren bir portre resmi. Kare çerçeveyi dolduracak şekilde kırpılmış, yalnızca resmin orta kısmını gösteren yatay bir resim.
ContentScale.FillHeight: Kaynağı, en boy oranını koruyarak hedef yüksekliğe uyacak şekilde ölçeklendirin. Kare çerçevenin yüksekliğini dolduracak şekilde ölçeklendirilmiş, sol ve sağ tarafta sarı arka planı görünen tam görüntüyü gösteren dikey bir resim. Kare çerçevenin yüksekliğini dolduracak şekilde ölçeklendirilmiş, kenarları kırpılmış bir yatay resim.
ContentScale.FillWidth: Kaynağı, en boy oranını koruyarak sınırları hedef genişliğiyle eşleşecek şekilde ölçeklendirin. Kare çerçevenin genişliğini dolduracak şekilde ölçeklendirilmiş, üst ve alt kısımları kırpılmış bir dikey resim. Kare çerçevenin genişliğini dolduracak şekilde ölçeklendirilmiş, üst ve alt kısımlarında sarı arka planın göründüğü tam görüntüyü gösteren yatay bir resim.
ContentScale.FillBounds: Hedef sınırlarını doldurmak için içeriği dikey ve yatay olarak eşit olmayan şekilde ölçeklendirin. (Not: Bu, resimleri, resmin tam oranına uymayan kapsayıcılara yerleştirirseniz resimleri bozar.) Kare çerçeveyi tamamen dolduracak şekilde bozulmuş, uzatılmış bir portre resmi. Kare çerçeveyi tamamen doldurmak için bozulmuş ve gerilmiş bir yatay resim.
ContentScale.Inside: Kaynağı, hedef sınırlardaki en boy oranını koruyacak şekilde ölçeklendirin. Kaynak, her iki boyutta da hedeften küçük veya ona eşitse None ile benzer şekilde davranır. İçerik her zaman sınırlar içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz. Kaynak resim sınırlardan büyükse: Kare sınırlarından daha büyük olan bir portre resmi, en boy oranı korunarak sığacak şekilde küçültülmüş ve yanlarda sarı arka plan gösteriliyor. Kaynak resim sınırlardan küçükse: Kare sınırlarından daha küçük olan bir portre resmi, karenin içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor. Kaynak resim sınırlardan büyükse: Kare sınırlarından daha büyük olan bir yatay resim, en boy oranı korunarak sığacak şekilde küçültülmüş ve üst ile altta sarı arka plan gösteriliyor. Kaynak resim sınırlardan küçükse: Başlangıçta kare sınırlarından daha küçük olan bir yatay resim, çerçeve içinde orijinal boyutunda görüntüleniyor ve etrafında sarı bir arka plan gösteriliyor.
ContentScale.None: Kaynağa ölçeklendirme uygulamayın. İçerik, hedef sınırlardan küçükse alana sığacak şekilde ölçeklendirilmez. Kaynak resim sınırlardan büyükse: Kare sınırlarından daha büyük olan bir portre resmi, orijinal boyutunda gösteriliyor. Resmin bazı kısımları çerçevenin üst ve alt kısımlarının dışına taşıyor. Kaynak resim sınırlardan küçükse: Kare sınırlarından daha küçük olan bir portre resmi, karenin içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor. Kaynak resim sınırlardan büyükse: Başlangıçta kare sınırlarından daha büyük olan bir yatay resim, orijinal boyutunda görüntüleniyor ve bazı kısımları çerçevenin sol ve sağ tarafının ötesine uzanıyor. Kaynak resim sınırlardan küçükse: Başlangıçta kare sınırlarından daha küçük olan bir yatay resim, karenin içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor.

Image composable'ı bir şekle kırpma

Bir resmi ş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)
)

Mükemmel bir daire içine alınmış köpek resmi.
Şekil 1. CircleShape ile görüntü kırpma.

Yuvarlak köşeli bir şekil için Modifier.clip(RoundedCornerShape(16.dp)) kullanın. Yuvarlatılmasını istediğiniz köşelerin boyutunu belirtin:

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

Yuvarlak köşelerle kırpılmış bir köpek resmi.
Şekil 2. RoundedCornerShape ile görüntü kırpma.

Shape simgesini genişleterek ve kırpılacak şekil için 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())
)

Özel bir oval şekle kırpılmış kare köpek resmi.
Şekil 3. Özel yol şekliyle görüntü kırpma.

Image composable'a kenarlık ekleme

Yaygın bir işlem, bir resmin etrafında kenarlık oluşturmak için Modifier.border() ile Modifier.clip() öğesini birleştirmektir:

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

Daire şeklinde kırpılmış, yuvarlak şeklin etrafında sarı kenarlık bulunan kare bir köpek resmi.
Şekil 4. Etrafında kenarlık olan kırpılmış bir resim.

Renk geçişli bir kenarlık oluşturmak için Brush API'yi kullanarak resmin etrafına gökkuşağı renk geçişli bir kenarlık ç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)
)

Dairesel şeklin etrafında gökkuşağı gradyanlı kenarlığı olan bir köpek resmi.
Şekil 5. Gökkuşağı gradyanlı daire kenarlığı.

Özel en boy oranı ayarlama

Bir resmi özel en boy oranına dönüştürmek için Modifier.aspectRatio(16f/9f) kullanarak resim (veya herhangi bir composable) 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)
)

16:9 en boy oranına dönüştürülerek daha geniş ve kısa hale getirilmiş bir köpek resmi.
Şekil 6. Modifier.aspectRatio(16f/9f) üzerinde Modifier.aspectRatio(16f/9f) kullanımı.
Image

Renk filtresi: Görüntünün piksel renklerini dönüştürür.

Image composable'ında, resminizin tek tek piksellerinin çıkışını değiştirebilen bir colorFilter parametresi bulunur.

Resimleri renklendirme

ColorFilter.tint(color, blendMode) kullanıldığında, Image composable'ınıza belirtilen renkte bir harmanlama modu uygulanır. ColorFilter.tint(color, blendMode) İçeriğe renk vermek için BlendMode.SrcIn kullanılıyor. Bu nedenle, sağlanan renk, resmin ekranda gösterildiği yerde gösteriliyor. Bu, farklı temalara ihtiyaç duyan 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)
)

Sarı renk tonu uygulanmış bir otobüsün resmi.
Şekil 7. ColorFilter.tint ile uygulandı.
BlendMode.SrcIn

Diğer BlendModeler farklı etkilere neden olur. Örneğin, bir resimde Color.Green ile BlendMode.Darken ayarını yaptığınızda aşağıdaki sonuç elde edilir:

Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description),
    colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken)
)

BlendMode.Darken kullanılarak yeşil tonu uygulanmış bir köpek. Bu, daha koyu yeşil tonlar oluşturur.
Şekil 8. Color.Green tint ile BlendMode.Darken.

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

Image renk matrisi filtresi uygulama

ColorFilterRenk matrisiColorFilter 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) })
)

Siyah beyaz filtre uygulanmış, renk doygunluğu tamamen kaldırılmış bir köpek.
Şekil 9. Doygunluğu 0 olan renk matrisi (siyah beyaz görüntü).

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

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

Parlaklığı ve kontrastı artırılmış bir köpek daha canlı görünüyor.
Şekil 10. ColorMatrix simgesini kullanarak resmin parlaklığını ve kontrastını ayarlayın.

Image composable'ın renklerini ters çevirme

Bir resmin renklerini ters çevirmek için ColorMatrix seçeneğini 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))
)

Renkleri ters çevrilmiş bir köpek, negatif benzeri bir efekt gösteriyor.
Şekil 11. Resimdeki renkler ters çevrilmiş.

Image composable'ı bulanıklaştırma

Bir görüntüyü bulanıklaştırmak için Modifier.blur() işlevini kullanın. Bu işlev, bulanıklık yarıçapını sırasıyla yatay ve dikey yönde belirten radiusX ve radiusY değerlerini alı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(RoundedCornerShape(8.dp))
        )
)

Güçlü bir bulanıklık efekti uygulanmış, net olmayan ve odak dışı görünen bir köpek.
Şekil 12. BlurEffect bir resme uygulandı.

Images bulanıklaştırılırken BlurredEdgeTreatment.Unbounded yerine BlurredEdgeTreatment(Shape) kullanılması önerilir. Çünkü BlurredEdgeTreatment.Unbounded, özgün içeriğin sınırları dışında oluşturulması beklenen rastgele oluşturma işlemlerinin bulanıklaştırılması için kullanılır. Resimler, içeriğin sınırları dışında oluşturulmaz. Ancak yuvarlak bir dikdörtgenin bulanıklaştırılması için bu ayrım gerekebilir.

Örneğin, önceki resimde BlurredEdgeTreatment değerini Unbounded olarak ayarlarsak resmin kenarları net 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))
)

Bulanıklığın orijinal resim sınırlarının ötesine uzandığı ve kenarları bulanıklaştırdığı bir köpek resmi.
Şekil 13. BlurEdgeTreatment.Unbounded.
Önceki
Materyal simgeleri
Sonraki
Özel boyacı