Resimler, Image
composable'ındaki (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'ında değil, tüm Composable'da kullanılabilir. contentScale
ve colorFilter
ise Image
composable'daki 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 contentScale
seçeneği belirtin. Varsayılan olarak, bir contentScale
seçeneği belirtmezseniz ContentScale.Fit
kullanılır.
Aşağıdaki örnekte Image composable, 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ı ile 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 ayarlamak farklı çıkışlara neden olur. Gereken doğru ContentScale
modunu seçmenize yardımcı olabilecek bir tabloyu aşağıda bulabilirsiniz:
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 sığacak şekilde büyütülür. |
||
ContentScale.Crop : Resmi, kullanılabilir alana göre ortalayın. |
||
ContentScale.FillHeight : Kaynağı, en boy oranını koruyarak, sınırların hedef yüksekliğiyle eşleşmesi için ölçeklendirin. |
||
ContentScale.FillWidth : Kaynağı, en boy oranını koruyarak, sınırlar hedef genişlikle eşleşecek şekilde ölçeklendirin. |
||
ContentScale.FillBounds : Hedef sınırlarını doldurmak için içeriği dikey ve yatay olarak düzenli olmayacak şekilde ölçeklendirin. (Not: Resmin tam oranıyla eşleşmeyen kapsayıcılara yerleştirmeniz durumunda görüntüler bozulur) |
||
ContentScale.Inside : En boy oranını hedef sınırları içinde 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ın içinde olur. İçerik sınırların altındaysa ölçeklendirme uygulanmaz. |
Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında: | Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında: |
ContentScale.None : Kaynağa herhangi bir ölçeklendirme uygulamayın. İçerik hedef sınırlarından küçükse alana sığacak şekilde ölçeklendirilmez. |
Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında: | Kaynak görüntü sınırlardan büyük: Kaynak görüntü sınırların altında: |
Bestelenen Image
öğesini şekle dönüştürme
Bir resmi şekle sığdırmak için yerleşik clip
değiştiricisini kullanın.
Resmi daire şeklinde kırpmak için Modifier.clip(CircleShape)
öğesini 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 (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)) )
Ayrıca Shape
öğesini genişletip şeklin kırpılması 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()) )
Image
composable'ına kenarlık ekleme
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ığı oluşturmak istiyorsanız resmin etrafına gökkuşağı gradyanı sınırı çizmek için Brush
API'yi kullanabilirsiniz:
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ı ayarla
Bir resmi özel en boy oranına dönüştürmek için resim (veya bu şekilde oluşturulan herhangi bir resim) için özel oran sağlamak amacıyla Modifier.aspectRatio(16f/9f)
özelliğini 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.
Resmi tonlama
ColorFilter.tint(color, blendMode)
kullanıldığında Image
composable'ınıza belirtilen renkle bir harmanlama modu uygulanır. ColorFilter.tint(color, blendMode)
, içeriğe ton eklemek için BlendMode.SrcIn
değerini kullanır. Diğer bir deyişle, sağlanan renk, resmin ekranda gösterildiği yerde gösterilir. Bu, farklı temalarının belirlenmesi gereken
simgeler ve vektörler için faydalı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) )
Bazı BlendMode
'ler ise farklı etkilere yol açar. Örneğin, bir resimde Color.Green
ile BlendMode.Darken
değerinin ayarlanması aşağıdaki sonucu oluşturur:
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ı harmanlama 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) }) )
Image
composable'ının kontrastını veya parlaklığını ayarlayın
Bir resmin kontrastını ve parlaklığını değiştirmek amacıyla değerleri değiştirmek için ColorMatrix
kullanabilirsiniz:
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
composable'ın renklerini çevirin
Bir resmin renklerini ters ç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
composable'ını bulanıklaştırın
Bir resmi bulanıklaştırmak için, yatay ve dikey yönde bulanıklaştırma yarıçapını sırasıyla 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ın bulanıklaştırılması için BlurredEdgeTreatment.Unbounded
yerine BlurredEdgeTreatment(Shape)
kullanılması önerilir. Resimlerde, muhtemelen içeriğin sınırlarının dışında oluşturulmazlar. Yuvarlak bir dikdörtgenin bulanıklaştırılması ise bu ayrımı gerektirebilir.
Örneğin, BlurredEdgeTreatment
özelliğini yukarıdaki resimde Sınırsız olarak ayarlarsak görüntünün 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: Bağlantı metni JavaScript kapalıyken görüntülenir
- Grafik Değiştiriciler
- Resimler yükleniyor {:#loading-images}
- Malzeme simgeleri {:#material-icons}