Resim özelleştirme

Resimler, Image composable'daki özellikler kullanılarak özelleştirilebilir (contentScale, colorFilter). Mevcut Modifiers Image cihazınıza farklı efektler uygulayın. 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

Kırpmak veya resmin içeride ölçeklenme şeklini değiştirmek için bir contentScale seçeneği belirtin belirler. Varsayılan olarak, bir contentScale seçeneği belirtmezseniz ContentScale.Fit kullanılacak.

Aşağıdaki örnekte Resim composable, 150 dp ile sınırlandırılmıştır. Image composable'da kenarlık ve arka plan rengi sarı olarak ayarlanmış. aşağıdaki tabloda farklı ContentScale seçeneklerini bulabilirsiniz.

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 ayarlanırsa farklı çıkışlar elde edilir. Şunun altında: doğru ContentScale modunu seçmenize yardımcı olabilecek bir tablodur. gerektirir:

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 uyacak şekilde ölçeklendirilir. ContentScale.Fit dikey ContentScale.Fit yatay
ContentScale.Crop: Resmi, mevcut alan içinde ortalayın. ContentScale.Kırp Dikey ContentScale.Kırpma yatay
ContentScale.FillHeight: Sınırların hedef yüksekliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin. ContentScale.FillHeight dikey ContentScale.FillHeight yatay
ContentScale.FillWidth: Sınırların hedef genişliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin. ContentScale.FillWidth dikey ContentScale.FillWidth yatay
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: Bu durum, resimleri resmin tam oranıyla eşleşmeyen kapsayıcılara yerleştirmeniz durumunda resimleri bozar) ContentScale.FillBounds dikey ContentScale.FillBounds ortamı
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: ContentScale.İçinde dikey, kaynak resim sınırlardan daha büyük. Kaynak resim sınırlardan küçük: ContentScale.İçinde dikey, kaynak resim sınırlardan küçük Kaynak resim sınırların üzerinde: ContentScale.Inside yatay, kaynak resim sınırlardan daha büyük. Kaynak resim sınırlardan küçük: ContentScale.Inside yatay, kaynak resim sınırlardan küçük
ContentScale.None: Kaynağa ölçeklendirme uygulamayın. İçerik, hedef sınırlarından küçükse alana sığacak şekilde ölçeklendirilmez. Kaynak resim sınırların üzerinde: ContentScale.None dikey, kaynak resim sınırların üzerinde. Kaynak resim sınırlardan küçük: ContentScale.None dikey, kaynak resim sınırlardan küçük Kaynak resim sınırların üzerinde: ContentScale.None yatay, kaynak resim sınırların üzerinde. Kaynak resim sınırlardan küçük: ContentScale.None yatay, 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ştiricisini kullanın. Bir resmi daire şeklinde kırpmak için Modifier.clip(CircleShape) işlevini 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 görüntü kırpma
Şekil 1: CircleShape ile resim kırpma

Yuvarlak köşe şekli - Modifier.clip(RoundedCornerShape(16.dp) kullanın) yuvarlamak istediğiniz köşelerin boyutu:

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 görüntü kırpma
Ş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())
)

Özel yol şekliyle resim kırpma
Şekil 3: Resimden özel yol şekliyle kırpma

Image composable'a kenarlık ekle

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

Bir resim kesip etrafına kenarlık ekleyin
Şekil 4: Resimden bir kesit alıp 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)
)

Gökkuşağı gradyanı daire kenarlık
Şekil 5: Gökkuşağı gradyanı daire kenarlığı

Özel en boy oranı ayarlayın

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

Resimde Değiştirici.aspectRatio(16f/9f) Kullanma
Şekil 6: Resimde Modifier.aspectRatio(16f/9f) kullanımı

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

Image composable'ın çıktısını değiştirebilen bir colorFilter parametresi vardır: piksel olarak ayarlayın.

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 tonlamak için BlendMode.SrcIn kullanır, yani sağlanan renk resmin ekranda gösterildiği yerdir. Bu, hem simgeler hem de vektörleri arasındaki farkları düşünün.

Image(
    painter = painterResource(id = R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description),
    colorFilter = ColorFilter.tint(Color.Yellow)
)

ColorFilter.tint, BlendMode.SrcIn ile uygulandı.
Şekil 7: BlendMode.SrcIn ile uygulanan ColorFilter.tint

Diğer BlendMode reklamları farklı etkilere yol açar. Örneğin, Bir resim üzerinde Color.Green bulunan BlendMode.Darken aşağıdakini oluşturur sonuç:

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

Renk.BlendMode.Koyu renkle yeşil ton
Şekil 8: Renk.BlendMode.Koyu Renk ile yeşil ton

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

Renk matrisiyle 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) })
)

Doygunluk 0 ile Renk Matrisi (siyah beyaz resim)
Şekil 9: Doygunluk 0 ile Renk Matrisi (siyah beyaz resim)

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

Bir resmin kontrastını ve parlaklığını değiştirmek için Değerleri değiştirmek için ColorMatrix:

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 kullanılarak resmin parlaklığı ve kontrastı ayarlandı
Şekil 10: ColorMatrix kullanılarak resim parlaklığı ve kontrastı ayarlandı

Image bir composable'ın renklerini tersine çevirin

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

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

Image bir composable'ı bulanıklaştır

Bir görüntüyü bulanıklaştırmak için radiusX ve radiusY sağlayarak Modifier.blur() kullanın. Yatay ve dikey yöndeki bulanıklık yarıçapını belirten bir değer tıklayın.

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

Resme bulanıklaştırma efekti uygulandı
Şekil 12: Resme uygulanan bulanıklaştırma efekti

Images bulanıklaştırılırken BlurredEdgeTreatment(Shape), yerine BlurredEdgeTreatment.Unbounded; dışında oluşturulması beklenen rastgele oluşturmaların emin olmanız gerekir. Resimler için, büyük olasılıkla oluşturulan metin içerik sınırları; O halde yuvarlatılmış bir dikdörtgeni bulanıklaştırmak için düşünebilirsiniz.

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

bulanıklaştırma
Şekil 13: WalletEdgeTreatment.Sınırsız
ziyaret edin.