Diese Seite wurde von der Cloud Translation API übersetzt.

Bild anpassen

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
)CustomizeImageSnippets.kt

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.	Quellbild ist größer als zulässig: Quellbild ist kleiner als die Grenzen:	Quell-Image größer als zulässig: Quell-Image 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.	Quell-Image größer als zulässig: Quell-Image kleiner als die Grenzen:	Quell-Image größer als zulässig: Quell-Image 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)
)CustomizeImageSnippets.kt

**Abbildung 1**: Bild mit CircleShape ausschneiden

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))
)CustomizeImageSnippets.kt

**Abbildung 2**: Bild mit RoundedCornerShape ausschneiden

Sie können auch eine eigene Beschneidungsform erstellen, indem Sie Shape erweitern und ein Path für die Form, um die Sie ihn zuschneiden 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())
)CustomizeImageSnippets.kt

**Abbildung 3**: Bild mit benutzerdefinierter Pfadform ausschneiden

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)
)CustomizeImageSnippets.kt

**Abbildung 4**: Bild ausschneiden und mit einem Rahmen versehen

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)
)CustomizeImageSnippets.kt

Kreis mit Farbverlauf in Regenbogenfarben — **Abbildung 5**: Kreisränder mit Farbverlauf in Regenbogen

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)
)CustomizeImageSnippets.kt

Modifier.aspectRatio(16f/9f) auf das Bild anwenden — **Abbildung 6**: `Modifier.aspectRatio(16f/9f)` für ein Bild verwenden

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)
)CustomizeImageSnippets.kt

**Abbildung 7**: "ColorFilter.tint" mit "BlendMode.SrcIn" angewendet

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)
)CustomizeImageSnippets.kt

Color.Green-Tönung mit BlendMode.Darken — **Abbildung 8**: Farbe.Grüne Färbung mit BlendMode.Darken

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) })
)CustomizeImageSnippets.kt

**Abbildung 9**: Farbmatrix mit Sättigung 0 (Schwarz-Weiß-Bild)

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))
)CustomizeImageSnippets.kt

**Abbildung 10**: Bildhelligkeit und Kontrast mithilfe von ColorMatrix angepasst

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))
)CustomizeImageSnippets.kt

**Abbildung 11**: Umgekehrte Farben des Bilds

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))
        )
)CustomizeImageSnippets.kt

Weichzeichnereffekt auf Bild angewendet — **Abbildung 12**: Weichzeichnen-Effekt auf das Bild angewendet

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))
)CustomizeImageSnippets.kt

**Abbildung 13**: BlurEdgeTreatment.Unbounded

Empfehlungen für dich

Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
Grafikmodifikatoren
Bilder werden geladen {:#loading-images}
Material-Symbole {:#material-icons}

Bild anpassen

Inhaltsumfang

Zusammensetzbare Funktion Image an eine Form fixieren

Rahmen für zusammensetzbare Image-Elemente hinzufügen