Diese Seite wurde von der Cloud Translation API übersetzt.

Bild anpassen

Bilder können mithilfe von Attributen in einem Image-Komposit (contentScale, colorFilter) angepasst werden. Sie können auch die vorhandenen Modifiers-Effekte anwenden, um verschiedene Effekte auf Ihre 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 folgenden Beispiel ist das Bild-Composeable auf eine Größe von 150 dp mit einem Rahmen beschränkt und der Hintergrund des Image-Composeables ist auf gelb festgelegt, um die verschiedenen ContentScale-Optionen in der folgenden Tabelle zu veranschaulichen.

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:

Quellbild
`ContentScale`	Ergebnis – Bild im Hochformat:	Ergebnis – Bild im Querformat:
`ContentScale.Fit`: Bild gleichmäßig skalieren und das Seitenverhältnis beibehalten (Standard). 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`: Die Inhalte werden vertikal und horizontal nicht einheitlich skaliert, um die Zielgrenzen zu fü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 die Inhalte kleiner als die Grenzen sind, wird keine Skalierung angewendet.	Quell-Image größer als zulässig: Quell-Image kleiner als die Grenzen:	Quellbild ist 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.	Quellbild größer als die Grenzen: Quellbild kleiner als die Grenzen:	Quellbild größer als die Grenzen: Quellbild kleiner als die Grenzen:

`Image`-Komposition an eine Form zuschneiden

Wenn Sie ein Bild in eine Form einpassen möchten, verwenden Sie die integrierte Tastenkombination clip. 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

Bild mit CircleShape ausschneiden — **Abbildung 1**: Bild mit CircleShape zuschneiden

Form mit abgerundeten Ecken: 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))
)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**: Kreisrand mit Regenbogenverlauf

Benutzerdefiniertes Seitenverhältnis festlegen

Wenn du ein Bild in ein benutzerdefiniertes Seitenverhältnis umwandeln möchtest, verwende Modifier.aspectRatio(16f/9f), um ein benutzerdefiniertes Seitenverhältnis für ein Bild (oder ein beliebiges bearbeitbares Element) anzugeben.

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 Bild anwenden — **Abbildung 6**: `Modifier.aspectRatio(16f/9f)` auf einem Bild verwenden

Farbfilter – Pixelfarben des Bilds transformieren

Das Bild-Composit hat einen colorFilter-Parameter, mit dem sich die Ausgabe einzelner Pixel des Bilds ändern lässt.

Bilder einfärben

Wenn Sie ColorFilter.tint(color, blendMode) verwenden, wird ein Mischmodus mit dem auf Ihre Image zusammensetzbare Funktion hinzu. 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. Das ist nützlich für Symbole und Vektoren, die unterschiedlich 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)
)CustomizeImageSnippets.kt

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

Andere BlendMode haben unterschiedliche Auswirkungen. Wenn Sie beispielsweise BlendMode.Darken mit einem Color.Green auf einem 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)
)CustomizeImageSnippets.kt

Color.Green-Farbton mit BlendMode.Darken — **Abbildung 8**: Color.GreenTint mit BlendMode.Darken

In der Referenzdokumentation zum BlendMode finden Sie weitere Informationen zur verschiedene Mischmodi verfügbar.

`Image`-Filter mit Farbmatrix anwenden

Transformieren Sie das Bild mit der Option „Farbmatrix“ ColorFilter. 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 eines `Image`-Composeables anpassen

Mit der Taste ColorMatrix können Sie den Kontrast und die Helligkeit eines Bildes ä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 eines `Image`-Composeables 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

Umgekehrte Farben im Bild — **Abbildung 11**: Umgekehrte Farben des Bilds

Zusammensetzbare Funktion vom Typ „`Image`“ unkenntlich machen

Wenn Sie ein Bild unscharfstellen möchten, verwenden Sie Modifier.blur() und geben Sie radiusX und radiusY an, um den Unschärferadius in horizontaler und vertikaler Richtung anzugeben.

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**: BlurEffect auf Bild angewendet

Wenn Sie Images unkenntlich machen möchten, empfehlen wir, BlurredEdgeTreatment(Shape) anstelle von BlurredEdgeTreatment.Unbounded zu verwenden. Letzteres wird zum Unkenntlichmachen beliebiger Renderings verwendet, die voraussichtlich außerhalb der Grenzen der ursprünglichen Inhalte gerendert werden. Bilder werden wahrscheinlich nicht außerhalb des die Grenzen des Inhalts; Um ein abgerundetes Rechteck unkenntlich zu machen, Unterscheidung.

Wenn wir z. B. BlurredEdgeTreatment oben auf „Unbegrenzt“ festlegen, werden die Bildränder verschwommen statt scharf dargestellt:

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.
Grafiken-Modifikatoren
Bilder werden geladen {:#loading-images}
Material Design-Symbole {:#material-icons}

Bild anpassen

Inhaltsumfang

Image-Komposition an eine Form zuschneiden

Rahmen für zusammensetzbare Image-Elemente hinzufügen