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 |
![]() |
![]() |
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 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:
![]() ![]() |
Kaynak resim sınırların üzerinde:
![]() ![]() |
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:
![]() ![]() |
Kaynak resim sınırların üzerinde:
![]() ![]() |
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](https://developer.android.com/static/develop/ui/compose/images/graphics-clipcircle.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-roundedcorners.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-customcrop.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-border.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-gradientborder.png?authuser=5&hl=tr)
Ö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](https://developer.android.com/static/develop/ui/compose/images/graphics-aspectratio.png?authuser=5&hl=tr)
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ı.](https://developer.android.com/static/develop/ui/compose/images/graphics-bus.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-blendmode.png?authuser=5&hl=tr)
Ş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)](https://developer.android.com/static/develop/ui/compose/images/graphics-bw.png?authuser=5&hl=tr)
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ı](https://developer.android.com/static/develop/ui/compose/images/graphics-colormatrix.png?authuser=5&hl=tr)
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ş](https://developer.android.com/static/develop/ui/compose/images/graphics-inverted.png?authuser=5&hl=tr)
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ı](https://developer.android.com/static/develop/ui/compose/images/graphics-blur.png?authuser=5&hl=tr)
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](https://developer.android.com/static/develop/ui/compose/images/graphics-unbounded.png?authuser=5&hl=tr)
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}