Resim özelleştirme

Image bileşenindeki (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'ında değil, herhangi bir composable'da kullanılabilir. contentScale ve colorFilter ise Image composable'ındaki 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, bir contentScale seçeneği belirtmezseniz ContentScale.Fit kullanılır.

Aşağıdaki örnekte, Image bileşeni kenarlıklı 150 dp boyutla sınırlandırılmıştır ve aşağıdaki tabloda farklı ContentScale seçeneklerini göstermek için Image bileşeninde 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 belirlemek farklı sonuçlar verir. Aşağıdaki tablo, doğru ContentScale modunu seçmenize yardımcı olur:

Kaynak resim Köpek gösteren dikey kaynak. Farklı bir köpeğin gösterildiği yatay kaynak.
ContentScale Sonuç - Dikey Resim: Sonuç - Yatay Resim:
ContentScale.Fit: En boy oranını koruyarak resmi tek tip ölçeklendirir (varsayılan). İçerik boyuttan küçükse resim, sınırlara sığacak şekilde ölçeklendirilir. Tek tip ölçeklendirilmiş bir köpek portresi. Tek tip ölçeklendirilmiş bir köpek manzarası.
ContentScale.Crop: Resmi, kullanılabilir alana ortalayarak kırpın. Kare çerçeveyi dolduracak şekilde kırpılmış, yalnızca orta kısmını gösteren dikey bir resim. Kare bir çerçeveyi dolduracak şekilde kırpılmış, yalnızca orta kısmını gösteren yatay bir resim.
ContentScale.FillHeight: Sınırların hedef yükseklikle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin. Kare bir çerçevenin yüksekliğini dolduracak şekilde ölçeklendirilmiş dikey bir resim. Resmin tamamı gösteriliyor ve sol ile sağ tarafta sarı arka plan görünüyor. Kare bir çerçevenin yüksekliğini dolduracak şekilde ölçeklendirilmiş ve yanları kırpılmış yatay bir resim.
ContentScale.FillWidth: Kaynağı, en boy oranını koruyarak sınırları hedef genişlikle eşleşecek şekilde ölçeklendirin. Kare bir çerçevenin genişliğini dolduracak şekilde ölçeklendirilmiş, üst ve alt kısımları kırpılmış dikey bir resim. Kare bir çerçevenin genişliğini dolduracak şekilde ölçeklendirilmiş, üstte ve altta 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 farklı oranlarda ölçeklendirir. (Not: Resimleri, tam oranlarıyla eşleşmeyen kapsayıcılara yerleştirirseniz resimler bozulur.) Kare bir çerçeveyi tamamen doldurmak için dikey bir resim bozulmuş ve resim uzatılmış. Yatay bir resim, kare bir çerçeveyi tamamen dolduracak şekilde bozulmuş ve resim gerilmiş.
ContentScale.Inside: Hedef sınırları içinde en boy oranını korumak için kaynağı ölçeklendirin. Kaynak, her iki boyutta da hedeften küçük veya hedefe eşitse None ile benzer şekilde davranır. İçerik her zaman sınırların içinde kalır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz. Sınırlardan büyük kaynak resim: Başlangıçta kare sınırlarından daha büyük olan dikey bir resim, en boy oranını koruyarak sığacak şekilde ölçeği azaltılmış ve yanlarda sarı arka plan gösteriliyor. Sınırlardan küçük kaynak resim: Başlangıçta kare sınırlarından daha küçük olan dikey bir resim, çerçeve içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor. Sınırlardan büyük kaynak resim: Başlangıçta kare sınırlarından daha büyük olan yatay bir resim, en boy oranı korunarak sığacak şekilde ölçeği azaltılmış, üstte ve altta sarı arka plan gösteriliyor. Sınırlardan küçük kaynak resim: Başlangıçta kare sınırlarından daha küçük olan ve çerçeve içinde orijinal boyutunda gösterilen, etrafında sarı bir arka plan bulunan yatay bir resim.
ContentScale.None: Kaynağa herhangi bir ölçeklendirme uygulamayın. İçerik, hedef sınırlardan daha küçükse alana sığacak şekilde ölçeklendirilmez. Sınırlardan büyük kaynak resim: Orijinal boyutu kare sınırlarından daha büyük olan dikey bir resim, orijinal boyutunda gösteriliyor ve parçaları çerçevenin üst ve alt kısmının dışına taşıyor. Sınırlardan küçük kaynak resim: Başlangıçta kare sınırlarından daha küçük olan dikey bir resim, çerçeve içinde orijinal boyutunda gösteriliyor ve etrafında sarı bir arka plan görünüyor. Sınırlardan büyük kaynak resim: Başlangıçta kare sınırlarından daha büyük olan ve orijinal boyutunda gösterilen, çerçevenin sol ve sağ tarafına taşan kısımları olan yatay bir resim. Sınırlardan küçük kaynak resim: Başlangıçta kare sınırlarından daha küçük olan ve çerçeve içinde orijinal boyutunda gösterilen, etrafında sarı bir arka plan bulunan yatay bir resim.

Image composable'ını 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 şeklinde kırpılmış köpek resmi.
Şekil 1. CircleShape ile bir resmi kırpma

Yuvarlak köşe şekli için Modifier.clip(RoundedCornerShape(16.dp)) kullanın ve 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))
)

Köşeleri yuvarlatılmış kare şeklinde bir köpek resmi.
Şekil 2. RoundedCornerShape ile bir resmi kırpma

Shape sınıfını genişleterek ve kırpılacak şekil 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())
)

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

Image composable'a kenarlık ekleme

Yaygın olarak kullanılan bir işlem, bir resmin etrafında kenarlık oluşturmak için Modifier.border() ile Modifier.clip() öğelerini 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ış bir köpek resmi. Dairenin etrafında sarı bir kenarlık var.
Şekil 4. Kırpılmış ve etrafında kenarlık olan 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 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ık bulunan dairesel bir köpek resmi.
5. şekil. Gökkuşağı renk geçişli daire kenarlık.

Özel en-boy oranı ayarlama

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

Bir köpeğin kare resmi, 16:9 en-boy oranına dönüştürülerek daha geniş ve daha kısa hale getiriliyor.
Şekil 6. Modifier.aspectRatio(16f/9f)'i Image üzerinde kullanma

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

Image composable'ı, resminizin her bir pikselinin çıkışını değiştirebilen bir colorFilter parametresine sahiptir.

Resimleri renklendirme

ColorFilter.tint(color, blendMode) kullanıldığında, Image composable'ınıza belirtilen renkle bir karışım modu uygulanır. ColorFilter.tint(color, blendMode), içeriği renklendirmek için BlendMode.SrcIn kullanır. Yani sağlanan renk, resmin ekranda gösterildiği yerde gösterilir. Bu, farklı şekilde temalandırılması 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)
)

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

Diğer BlendMode farklı etkilere neden olur. Örneğin, bir resimde BlendMode.Darken değerini Color.Green olarak 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)
)

BlendMode.Darken kullanılarak yeşil ton uygulanmış bir köpek. Bu sayede daha koyu yeşil gölgeler elde edilir.
Şekil 8. Color.Green tint ile BlendMode.Darken.

Kullanılabilen farklı karışım 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) })
)

Siyah beyaz filtre uygulanarak tüm renk doygunluğu kaldırılmış bir köpek.
Şekil 9. Doygunluğu 0 olan renk matrisi (siyah beyaz resim).

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ılarak daha canlı görünen bir köpek.
10. şekil. ColorMatrix kullanarak resmin parlaklığını ve kontrastını ayarladı.

Image composable'ın renklerini tersine çevirme

Bir resmin renklerini tersine çevirmek için ColorMatrix değerini renkleri tersine ç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))
)

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

Image composable'ı bulanıklaştırma

Bir resmi bulanıklaştırmak için Modifier.blur() kullanın ve sırasıyla yatay ve dikey yönde bulanıklaştırma yarıçapını belirten radiusX ve radiusY değerlerini girin.

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ıklaştırma efekti uygulanmış bir köpek. Bu efekt, köpeğin belirsiz ve odak dışında görünmesine neden oluyor.
Şekil 12. BlurEffect bir resme uygulandı.

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

Örneğin, önceki resimde BlurredEdgeTreatment değerini Unbounded 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))
)

Bir köpeğin bulanık görüntüsü. Bulanıklık, orijinal görüntü sınırlarının dışına taşarak kenarları belirsizleştiriyor.
Şekil 13. BlurEdgeTreatment.Unbounded.
Önceki
Materyal simgeleri
Sonraki
Özel boyacı