Resim özelleştirme

Resimler, Image composable'daki (contentScale, colorFilter) özellikler kullanılarak özelleştirilebilir. Ayrıca, Image öğenize farklı efektler uygulamak için mevcut Modifiers öğesini de kullanabilirsiniz. Değiştiriciler yalnızca Image composable'da değil, herhangi bir Composable'da 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'ı 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 belirlerseniz farklı sonuçlar elde edersiniz. Aşağıdaki tablo, ihtiyacınız olan doğru ContentScale modunu seçmenize yardımcı olabilir:

Kaynak resim Dikey kaynak resim Kaynak resim yatay
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.Fit portrait ContentScale.Fit landscape
ContentScale.Crop: Resmi, mevcut alana sığacak şekilde ortadan kırpın. ContentScale.Crop portrait ContentScale.Crop landscape
ContentScale.FillHeight: Kaynağı, en boy oranını koruyarak hedef yüksekliğe uyacak şekilde ölçeklendirin. ContentScale.FillHeight portrait ContentScale.FillHeight yatay
ContentScale.FillWidth: Kaynağı, en boy oranını koruyarak hedef genişliğe uyacak şekilde ölçeklendirin. ContentScale.FillWidth portre ContentScale.FillWidth yatay
ContentScale.FillBounds: Hedef sınırları doldurmak için içeriği dikey ve yatay olarak eşit olmayan şekilde ölçeklendirin. (Not: Bu işlem, resimleri tam olarak resmin oranıyla eşleşmeyen kapsayıcılara yerleştirirseniz resimleri bozar.) ContentScale.FillBounds dikey ContentScale.FillBounds yatay
ContentScale.Inside: Hedef sınırlarda en boy oranını 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 içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz. Kaynak resim sınırlardan büyükse: ContentScale.Inside dikey, kaynak resim sınırlardan büyük Kaynak resim sınırlardan küçükse: ContentScale.Inside portre, kaynak resim sınırlardan küçük Kaynak resim sınırlardan büyükse: ContentScale.Inside yatay, kaynak resim sınırlardan büyük Kaynak resim sınırlardan küçükse: ContentScale.Inside yatay, kaynak resim sınırlardan küçük
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: ContentScale.None dikey, kaynak resim sınırlardan büyük Kaynak resim sınırlardan küçükse: ContentScale.None dikey, kaynak resim sınırlardan küçük Kaynak resim sınırlardan büyükse: ContentScale.None yatay, kaynak resim sınırlardan büyük Kaynak resim sınırlardan küçükse: ContentScale.None yatay, kaynak resim sınırlardan küçük

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

CircleShape ile resim kırpma
Şekil 1: CircleShape ile resim 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))
)

RoundedCornerShape ile resim kırpma
2. Şekil: 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())
)

Özel yol şekliyle görüntü kırpma
Şekil 3: Özel yol şekliyle resim 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)
)

Resmi kırpma ve etrafına kenarlık ekleme
4. Şekil: Bir resmi kırpma ve etrafına kenarlık ekleme

Renk geçişli bir kenarlık oluşturmak istiyorsanız 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)
)

Gökkuşağı gradyanlı daire kenarlığı
Ş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 Modifier.aspectRatio(16f/9f) kullanarak resim (veya bu bağlamdaki 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)
)

Resimde Modifier.aspectRatio(16f/9f) kullanma
6. Şekil: Resimde Modifier.aspectRatio(16f/9f) simgesini kullanma

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

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

Görüntüye renk tonu verme

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

BlendMode.SrcIn ile ColorFilter.tint uygulanmış
Şekil 7: BlendMode.SrcIn ile uygulanan ColorFilter.tint

Diğer BlendMode'ler 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)
)

Color.Green, BlendMode.Darken ile renk tonu
Şekil 8: Renk.Karıştırma moduyla yeşil renk tonu.Koyu

Kullanılabilen farklı karıştırma modları hakkında daha fazla bilgi için BlendMode referans dokümanlarına 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) })
)

Doygunluğu 0 olan renk matrisi (siyah beyaz görüntü)
Ş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))
)

ColorMatrix ile görüntü parlaklığı ve kontrastı ayarlandı
Şekil 10: ColorMatrix kullanılarak ayarlanmış görüntü parlaklığı ve kontrastı

Image composable'ın renklerini tersine ç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))
)

Resimde ters çevrilmiş renkler
Şekil 11: Resimdeki renkler ters çevrilmiş

Image composable işlevini bulanıklaştırma

Bir görüntüyü bulanıklaştırmak için Modifier.blur() işlevini kullanın. Bu işlev, sırasıyla yatay ve dikey yönde bulanıklaştırma yarıçapını 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))
        )
)

BlurEffect resme uygulandı
12. Şekil: Görüntüye uygulanan BlurEffect

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çerik sınırlarının dışında oluşturulmaz. Yuvarlak bir dikdörtgeni bulanıklaştırmak için bu ayrım gerekebilir.

Örneğin, yukarıdaki resimde BlurredEdgeTreatment değerini sınırsız olarak ayarlarsak resmin kenarları keskin 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))
)

BlurEdgeTreatment.Unbounded
Şekil 13: BlurEdgeTreatment.Unbounded