Bilder können mithilfe von Eigenschaften einer zusammensetzbaren Image
-Funktion angepasst werden
(contentScale
, colorFilter
) Sie können auch die vorhandenen Modifiers
anwenden.
um verschiedene Effekte auf Image
anzuwenden. Modifikatoren können auf allen
zusammensetzbar und nicht nur mit der Image
zusammensetzbaren Funktion, während contentScale
und
colorFilter
sind explizite Parameter für die zusammensetzbare Funktion Image
.
Inhaltsumfang
Gib eine contentScale
-Option an, um ein Bild zuzuschneiden oder die Größe des Bilds zu ändern
Grenzen festzulegen. Wenn Sie keine contentScale
-Option angeben,
ContentScale.Fit
wird verwendet.
Im Beispiel unten ist das zusammensetzbare Bild auf eine Größe von 150 dp mit einem
Rahmen und der Hintergrund ist bei der zusammensetzbaren Funktion Image
auf Gelb eingestellt, um
die verschiedenen ContentScale
-Optionen in der Tabelle unten.
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. Darunter
ist eine Tabelle, die bei der Auswahl des richtigen ContentScale
-Modus hilft,
erfordern:
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 vergrößert, dass es in die Begrenzungen passt. |
||
ContentScale.Crop : Mit dieser Option wird das Bild auf den verfügbaren Platz zugeschnitten. |
||
ContentScale.FillHeight : Skaliert die Quelle unter Beibehaltung des Seitenverhältnisses, sodass die Grenzen der Zielhöhe entsprechen. |
||
ContentScale.FillWidth : Skaliert die Quelle unter Beibehaltung des Seitenverhältnisses, sodass die Grenzen der Zielbreite entsprechen. |
||
ContentScale.FillBounds : Der Inhalt wird ungleichmäßig vertikal und horizontal skaliert, um die Zielgrenzen auszufüllen. (Hinweis: Bilder werden verzerrt dargestellt, wenn sie in Containern platziert werden, die nicht genau mit dem Seitenverhältnis des Bildes übereinstimmen.) |
||
ContentScale.Inside : Skaliert die Quelle, damit das Seitenverhältnis innerhalb der Zielgrenzen erhalten bleibt. Wenn die Quelle in beiden Dimensionen kleiner oder gleich dem Ziel ist, verhält sie sich ähnlich wie „Keine“. Inhalte bleiben immer innerhalb der Grenzen. Wenn der Inhalt die Grenzen überschreitet, wird keine Skalierung angewendet. |
Quell-Image größer als zulässig: Quell-Image kleiner als die Grenzen: | Quellbild ist größer als zulässig: Quellbild ist kleiner als die Grenzen: |
ContentScale.None : Es wird keine Skalierung auf die Quelle angewendet. Wenn der Inhalt kleiner als die Zielgrenzen ist, wird er nicht vertikal skaliert. |
Quellbild ist größer als zulässig: Quellbild ist kleiner als die Grenzen: | Quellbild ist größer als zulässig: Quellbild ist kleiner als die Grenzen: |
Zusammensetzbare Funktion Image
an eine Form fixieren
Wenn Sie ein Bild an eine bestimmte Form anpassen möchten, verwenden Sie den integrierten clip
-Modifikator.
Verwenden Sie Modifier.clip(CircleShape)
, um ein Bild auf einen Kreis zuzuschneiden:
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) )<ph type="x-smartling-placeholder">
Abgerundete Ecken – verwenden Sie Modifier.clip(RoundedCornerShape(16.dp)
) mit dem
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)) )<ph type="x-smartling-placeholder">
Sie können auch eine eigene Beschneidungsform erstellen, indem Sie Shape
erweitern und
ein Path
für die Form, um die Sie ihn abschneiden können:
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()) )<ph type="x-smartling-placeholder">
Rahmen für zusammensetzbare Image
-Elemente hinzufügen
Ein gängiger Vorgang besteht darin, Modifier.border()
mit Modifier.clip()
zu kombinieren.
So erstellen Sie einen Rahmen um ein Bild:
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) )<ph type="x-smartling-placeholder">
Wenn Sie einen Rahmen mit Farbverlauf erstellen möchten, können Sie die Brush
API verwenden.
Zeichnen Sie einen Rahmen mit Regenbogenverlauf um das Bild:
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) )<ph type="x-smartling-placeholder">
Benutzerdefiniertes Seitenverhältnis festlegen
Um ein Bild in ein benutzerdefiniertes Seitenverhältnis umzuwandeln, verwenden Sie
Modifier.aspectRatio(16f/9f)
zum Bereitstellen eines benutzerdefinierten Seitenverhältnisses für ein Bild (oder ein beliebiges Bildformat)
zusammensetzbar sind).
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), modifier = Modifier.aspectRatio(16f / 9f) )<ph type="x-smartling-placeholder">
Farbfilter: Bildfarben in Pixel umwandeln
Die zusammensetzbare Funktion „Bild“ hat einen colorFilter
-Parameter, der die Ausgabe von
einzelne Pixel Ihres Bildes.
Bilder färben
Wenn Sie ColorFilter.tint(color, blendMode)
verwenden, wird ein Mischmodus mit dem
auf Ihre zusammensetzbare Funktion Image
. ColorFilter.tint(color, blendMode)
verwendet BlendMode.SrcIn
zur Färbung von Inhalten, d. h., die angegebene Farbe ist
an der Stelle, an der das Bild
auf dem Bildschirm angezeigt wird. Dies ist nützlich für Symbole und
Vektoren, die anders behandelt 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) )<ph type="x-smartling-placeholder">
Andere BlendMode
haben andere Auswirkungen. Wenn Sie zum Beispiel
BlendMode.Darken
mit einer Color.Green
für ein Bild erzeugt Folgendes:
Ergebnis:
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.tint(Color.Green, blendMode = BlendMode.Darken) )<ph type="x-smartling-placeholder">
Weitere Informationen finden Sie in der Referenzdokumentation zum BlendMode. verschiedene Mischmodi verfügbar.
Image
-Filter mit Farbmatrix anwenden
Wandeln Sie Ihr Bild mit der Farbmatrix ColorFilter
-Option um. Beispiel:
Um einen Schwarz-Weiß-Filter auf Ihre Bilder anzuwenden, verwenden Sie die Methode
ColorMatrix
und legen Sie die Sättigung auf 0f
fest.
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description), colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(0f) }) )<ph type="x-smartling-placeholder">
Kontrast oder Helligkeit einer mit Image
zusammensetzbaren Funktion anpassen
Kontrast und Helligkeit eines Bildes können Sie mit der Methode
ColorMatrix
, um die Werte zu ä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)) )<ph type="x-smartling-placeholder">
Farben einer zusammensetzbaren Funktion Image
umkehren
Um die Farben eines Bildes umzukehren, setzen Sie ColorMatrix
so, dass die
Farben:
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)) )<ph type="x-smartling-placeholder">
Zusammensetzbare Funktion vom Typ „Image
“ unkenntlich machen
Um ein Bild unkenntlich zu machen, verwende Modifier.blur()
und gib die radiusX
und radiusY
an.
gibt den Weichzeichner-Radius in horizontaler und vertikaler Richtung an.
.
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)) ) )<ph type="x-smartling-placeholder">
Zum Unkenntlichmachen von Images
empfehlen wir die Verwendung von BlurredEdgeTreatment(Shape)
,
statt BlurredEdgeTreatment.Unbounded
, da Letzteres für die Unkenntlichmachung
von beliebigen Renderings, die voraussichtlich außerhalb der Grenzen des
Originalinhalte Bilder werden wahrscheinlich nicht außerhalb der
die Grenzen des Inhalts; Um ein abgerundetes Rechteck unkenntlich zu machen,
Unterscheidung.
Wenn wir z. B. BlurredEdgeTreatment
oben auf „Unbegrenzt“ festlegen,
erscheinen die Bildränder verschwommen statt scharf:
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)) )<ph type="x-smartling-placeholder">
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Grafikmodifikatoren
- Bilder werden geladen {:#loading-images}
- Material-Symbole {:#material-icons}