Bilder können mithilfe der Eigenschaften einer zusammensetzbaren Image
-Funktion (contentScale
, colorFilter
) angepasst werden. Sie können auch den vorhandenen Modifiers
anwenden, um verschiedene Effekte auf Image
anzuwenden. Modifikatoren können für jede zusammensetzbare Funktion verwendet werden, nicht nur für die zusammensetzbare Funktion Image
. contentScale
und colorFilter
sind hingegen explizite Parameter für die zusammensetzbare Funktion Image
.
Inhaltsskalierung
Geben Sie eine contentScale
-Option an, um ein Bild innerhalb seiner Grenzen zuzuschneiden oder zu ändern. Wenn Sie keine contentScale
-Option angeben, wird standardmäßig ContentScale.Fit
verwendet.
Im folgenden Beispiel ist die zusammensetzbare Funktion „Image“ auf eine Größe von 150 dp mit Rahmen beschränkt und der Hintergrund für die zusammensetzbare Funktion Image
auf Gelb eingestellt, um die verschiedenen ContentScale
-Optionen in der Tabelle unten zu sehen.
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 )
Das Festlegen unterschiedlicher ContentScale
-Optionen führt zu unterschiedlichen Ausgaben. Unten finden Sie eine Tabelle, die bei der Auswahl des richtigen ContentScale
-Modus helfen kann, den Sie benötigen:
Quell-Image | ||
ContentScale |
Ergebnis – Bild im Hochformat: | Ergebnis – Bild im Querformat: |
ContentScale.Fit : Skaliert das Bild gleichmäßig unter Beibehaltung des Seitenverhältnisses (Standardeinstellung). Wenn der Inhalt kleiner als die Größe ist, wird das Bild so skaliert, dass es in die Begrenzungen passt. |
||
ContentScale.Crop : Mittig wird das Bild auf den verfügbaren Platz zugeschnitten. |
||
ContentScale.FillHeight : Skaliert die Quelle unter Beibehaltung des Seitenverhältnisses, sodass die Begrenzungen der Zielhöhe entsprechen. |
||
ContentScale.FillWidth : Skaliert die Quelle unter Beibehaltung des Seitenverhältnisses, sodass die Begrenzungen der Zielbreite entsprechen. |
||
ContentScale.FillBounds : Der Inhalt wird ungleichförmig vertikal und horizontal skaliert, um die Zielgrenzen zu füllen. Hinweis: Dadurch werden Bilder verzerrt, wenn Sie sie in Containern platzieren, die nicht dem genauen Seitenverhältnis des Bildes entsprechen. |
||
ContentScale.Inside : Skaliert die Quelle so, dass das Seitenverhältnis innerhalb der Zielgrenzen bleibt. Wenn die Quelle in beiden Dimensionen kleiner oder gleich dem Ziel ist, verhält sie sich ähnlich wie „Keine“. Der Inhalt ist immer innerhalb der Grenzen enthalten. Wenn der Inhalt kleiner als die Grenzen ist, wird keine Skalierung angewendet. |
Quellbild ist größer als die Grenzen: Quellbild kleiner als die Grenzen: | Quellbild ist größer als die Grenzen: Quellbild kleiner als die Grenzen: |
ContentScale.None : Wenden Sie keine Skalierung auf die Quelle an. Ist der Inhalt kleiner als die Zielgrenzen, wird er nicht vertikal skaliert. |
Quellbild ist größer als die Grenzen: Quellbild kleiner als die Grenzen: | Quellbild ist größer als die Grenzen: Quellbild kleiner als die Grenzen: |
Eine zusammensetzbare Funktion (Image
) an eine Form zuschneiden
Um ein Bild an eine Form anzupassen, verwenden Sie den integrierten clip
-Modifikator.
Mit Modifier.clip(CircleShape)
können Sie ein Bild auf einen Kreis zuschneiden:
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) )
Form der abgerundeten Ecke: Verwenden Sie Modifier.clip(RoundedCornerShape(16.dp)
) mit der Größe der Ecken, die abgerundet werden sollen:
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)) )
Sie können auch eine eigene Ausschneideform erstellen. Dazu erweitern Sie Shape
und geben ein Path
an, um das die Form ausgerichtet werden soll:
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()) )
Rahmen zu einer Image
zusammensetzbaren Funktion hinzufügen
Ein häufiger Vorgang besteht darin, Modifier.border()
mit Modifier.clip()
zu kombinieren, um einen Rahmen um ein Bild zu erstellen:
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) )
Wenn Sie einen Farbverlaufsrahmen erstellen möchten, können Sie mit der Brush
API einen Farbverlaufsrahmen in Regenbogenfarben um das Bild zeichnen:
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) )
Benutzerdefiniertes Seitenverhältnis festlegen
Wenn Sie ein Bild in ein benutzerdefiniertes Seitenverhältnis umwandeln möchten, verwenden Sie Modifier.aspectRatio(16f/9f)
. Damit können Sie ein benutzerdefiniertes Seitenverhältnis für ein Bild (oder eine beliebige zusammensetzbare Funktion) angeben.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )
Farbfilter – Pixelfarben eines Bildes umwandeln
Die zusammensetzbare Funktion „Bild“ hat den Parameter colorFilter
, mit dem die Ausgabe einzelner Pixel Ihres Bildes geändert werden kann.
Bilder einfärben
Mit ColorFilter.tint(color, blendMode)
wird ein Mischmodus mit der angegebenen Farbe auf die zusammensetzbare Funktion Image
angewendet. ColorFilter.tint(color, blendMode)
verwendet BlendMode.SrcIn
, um Inhalte zu färben. Das bedeutet, dass die angegebene Farbe genau dort angezeigt wird, wo das Bild auf dem Bildschirm angezeigt wird. Das ist nützlich für Symbole und Vektoren,
die anders gestaltet werden müssen.
Image( painter = painterResource(id = R.drawable.baseline_directions_bus_24), contentDescription = stringResource(id = R.string.bus_content_description), colorFilter = ColorFilter.tint(Color.Yellow) )
Andere BlendMode
haben andere Effekte. Wenn Sie beispielsweise BlendMode.Darken
mit einem Color.Green
für ein Bild festlegen, erhalten Sie das folgende Ergebnis:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken) )
Weitere Informationen zu den verfügbaren Mischmodi finden Sie in der Referenzdokumentation zu „BlendMode“.
Filter Image
mit Farbmatrix anwenden
Transformieren Sie Ihr Bild mit der Farbmatrix-Option ColorFilter
. Wenn Sie beispielsweise einen Schwarz-Weiß-Filter auf Ihre Bilder anwenden möchten, können Sie den ColorMatrix
verwenden und die Sättigung auf 0f
setzen.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) )
Kontrast oder Helligkeit einer zusammensetzbaren Funktion von Image
anpassen
Wenn Sie den Kontrast und die Helligkeit eines Bildes ändern möchten, können Sie die Werte mit ColorMatrix
ändern:
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)) )
Farben einer zusammensetzbaren Funktion (Image
) invertieren
Wenn Sie die Farben eines Bildes umkehren möchten, kehren Sie die Farben mit ColorMatrix
um:
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)) )
Zusammensetzbare Funktion (Image
) unkenntlich machen
Um ein Bild unkenntlich zu machen, verwenden Sie Modifier.blur()
und geben Sie dabei radiusX
und radiusY
an, die den Weichzeichner-Radius in horizontaler bzw. vertikaler Richtung angeben.
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)) ) )
Beim Unkenntlichmachen von Images
wird empfohlen, BlurredEdgeTreatment(Shape)
anstelle von BlurredEdgeTreatment.Unbounded
zu verwenden. Letzteres wird zum Unkenntlichmachen von beliebigen Renderings verwendet, die voraussichtlich außerhalb der Grenzen des Originalinhalts gerendert werden. Bei Bildern ist es wahrscheinlich, dass sie nicht außerhalb der Ränder des Inhalts gerendert werden. Das Unkenntlichmachen eines abgerundeten Rechtecks kann diese Unterscheidung erfordern.
Wenn wir beispielsweise BlurredEdgeTreatment
im obigen Bild auf „Unbegrenzt“ setzen, werden die Ränder des Bildes unscharf statt scharf angezeigt:
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)) )
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Grafikmodifikatoren
- Bilder werden geladen {:#loading-images}
- Material-Symbole {:#material-icons}