Resim özelleştirme

Resimleri Image composable'daki (contentScale, colorFilter) özellikleri kullanarak ö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'daki açık parametrelerdir.

İçerik ölçeği

Bir resmi sınırları içinde kırpmak veya ölçeklendirme şeklini 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'ın boyutu 150 dp ile sınırlandırılmış ve kenarlık eklenmiş. Ayrıca, aşağıdaki tabloda farklı ContentScale seçeneklerini göstermek için Image composable'ın arka planı sarı olarak ayarlanmış.

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 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. Eşit şekilde ölçeklendirilmiş bir köpek portresi. Tek tip ö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 resmi gösteren bir portre resmi. 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 hedef genişliğe uyacak ş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 resmi gösteren yatay bir resim.
ContentScale.FillBounds: Hedef sınırları doldurmak için içeriği dikey ve yatay olarak eşit olmayan şekilde ölçeklendirin. (Not: Bu, resimleri, resmin tam oranıyla eşleşmeyen 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ırlarda en boy oranını koruyacak şekilde ölçeklendirin. Kaynak, her iki boyutta da hedeften küçük veya ona eşitse None işlevine 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: Başlangıçta 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, çerçeve 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 yatay bir resim, en boy oranı korunarak sığacak şekilde küçültülmüş ve üstte ve 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österiliyor ve etrafında sarı bir arka plan görünüyor.
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, çerçeve 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, 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, çerçeve içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor.

Image composable'ı bir şekle kırpma

Bir görüntünün şekle sığmasını sağlamak 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

Mükemmel bir daire içine alınmış köpek resmi.
Şekil 1. CircleShape ile resim 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))
)
CustomizeImageSnippets.kt

Yuvarlak köşelerle kırpılmış bir köpek resmi.
Şekil 2. RoundedCornerShape ile resim kırpma.

Shape öğesini 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())
)
CustomizeImageSnippets.kt

Ö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

Sık kullanılan 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)
)
CustomizeImageSnippets.kt

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

Renk geçişli 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)
)
CustomizeImageSnippets.kt

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)
)
CustomizeImageSnippets.kt

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

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), Image composable'ınıza belirtilen renkte bir karıştırma modu uygular. 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)
)
CustomizeImageSnippets.kt

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

Diğer BlendModeler farklı efektlere neden olur. Örneğin, bir resimde BlendMode.Darken ayarını Color.Green ile kullanmak 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 kullanılarak yeşil renk tonu uygulanmış bir köpek. Bu işlem, 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.

Renk matrisiyle Image 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) })
)
CustomizeImageSnippets.kt

Tüm renk doygunluğunu kaldıran siyah beyaz filtre uygulanmış 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))
)
CustomizeImageSnippets.kt

Parlaklığı ve kontrastı artırılmış bir köpek daha canlı görünüyor.
10. Şekil. 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))
)
CustomizeImageSnippets.kt

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))
        )
)
CustomizeImageSnippets.kt

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, orijinal 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))
)
CustomizeImageSnippets.kt

Orijinal resim sınırlarının ötesine uzanan bulanıklık nedeniyle kenarları bulanık olan bir köpek resmi.
Şekil 13. BlurEdgeTreatment.Unbounded.
Önceki
Materyal simgeleri
Sonraki
Özel boyacı