Resimler, Image
composable'daki (contentScale
, colorFilter
) özellikler kullanılarak özelleştirilebilir. Image
öğenize farklı efektler uygulamak için mevcut Modifiers
öğesini de uygulayabilirsiniz. Değiştiriciler yalnızca Image
composable'da değil, herhangi bir Composable'da da kullanılabilir. contentScale
ve colorFilter
ise Image
composable'da açık parametrelerdir.
İçerik ölçeği
Bir resmin sınırları içinde kırpmak veya ölçeklenme şeklini 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 Görüntü composable, kenarlıklı 150 dp boyutuyla sınırlandırılmıştır ve aşağıdaki tabloda 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 ayarlanırsa farklı çıkışlar elde edilir. Aşağıda, ihtiyacınız olan doğru ContentScale
modunu seçmenize yardımcı olabilecek bir tablo bulunmaktadır:
Kaynak resim | ||
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.Crop : Resmi, mevcut alan içinde ortalayın. |
||
ContentScale.FillHeight : Sınırların hedef yüksekliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin. |
||
ContentScale.FillWidth : Sınırların hedef genişliğiyle eşleşmesi için en boy oranını koruyarak kaynağı ölçeklendirin. |
||
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.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 sınırların içinde yer alır. İçerik sınırlardan küçükse ölçeklendirme uygulanmaz. |
Kaynak resim sınırlardan büyük: Kaynak resim sınırlardan küçük: | Kaynak resim sınırlardan büyük: 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ırlardan büyük: Kaynak resim sınırlardan küçük: | Kaynak resim sınırlardan büyük: 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) )
Yuvarlatılmış köşe şekli - yuvarlamak istediğiniz köşelerin boyutuna göre: Modifier.clip(RoundedCornerShape(16.dp)
:
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)) )
Ayrıca Shape
öğesini genişletip şeklin kırpılması için bir Path
sağlayarak kendi kırpma şeklinizi 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()) )
Image
composable'a kenarlık ekle
Bir resmin etrafında kenarlık oluşturmak için Modifier.border()
öğesini Modifier.clip()
ile birleştirmek, sık kullanılan bir işlemdir:
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) )
Gradyan kenarlık oluşturmak isterseniz Brush
API'yi kullanarak resmin etrafına gökkuşağı gradyan kenarlığı ç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) )
Özel en boy oranı ayarlayın
Bir resmi özel en boy oranına dönüştürmek amacıyla resim (veya bu konudaki herhangi bir composable için) için özel oran sağlamak üzere Modifier.aspectRatio(16f/9f)
işlevini kullanın.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )
Renk filtresi - Resmin piksel renklerini dönüştürün
Image composable, resminizin bağımsız piksellerinin çıkışını değiştirebilen bir colorFilter
parametresine sahiptir.
Resim tonlama
ColorFilter.tint(color, blendMode)
kullanıldığında, Image
composable'ınıza belirtilen rengi içeren bir karıştırma modu uygulanır. ColorFilter.tint(color, blendMode)
, içeriğe ton vermek için BlendMode.SrcIn
değerini kullanır. Yani, verilen renk, resim ekranda gösterilir. Bu özellik, teması farklı olması 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) )
Diğer BlendMode
reklamları farklı etkilere yol açar. Örneğin, bir resim üzerinde BlendMode.Darken
öğesinin Color.Green
ile ayarlanması 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) )
Kullanılabilen farklı karıştırma 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
özelliğini kullanıp 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) }) )
Image
composable'ın kontrastını veya parlaklığını ayarlayın
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)) )
Image
bir composable'ın renklerini tersine çevirin
Bir resmin renklerini tersine çevirmek için ColorMatrix
simgesini renkleri ters ç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)) )
Image
bir composable'ı bulanıklaştır
Bir resmi bulanıklaştırmak için, yatay ve dikey yöndeki bulanıklık yarıçapını belirten radiusX
ve radiusY
değerlerini sağlayarak Modifier.blur()
özelliğini kullanı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)) ) )
Images
bulanıklaştırılırken, orijinal içeriğin sınırları dışında oluşturulması beklenen rastgele oluşturmaları bulanıklaştırmak için BlurredEdgeTreatment.Unbounded
yerine BlurredEdgeTreatment(Shape)
kullanılması önerilir. Resimlerde, büyük olasılıkla içerik sınırlarının dışında oluşturulmaz. Yuvarlak bir dikdörtgeni bulanıklaştırmak ise bu ayrımı gerektirebilir.
Örneğin, yukarıdaki resimde 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)) )
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Grafik Değiştiriciler
- Resimler yükleniyor {:#loading-images}
- Malzeme simgeleri {:#material-icons}