Diese Seite wurde von der Cloud Translation API übersetzt.

Bild anpassen

Bilder können mithilfe der Eigenschaften einer zusammensetzbaren Image (contentScale, colorFilter) angepasst werden. Sie können auch die vorhandenen Modifiers anwenden, um verschiedene Effekte auf Image anzuwenden. Modifikatoren können für alle Composables verwendet werden, nicht nur für das Image-Composable. contentScale und colorFilter sind dagegen explizite Parameter für das Image-Composable.

Inhaltsskala

Geben Sie eine contentScale-Option an, um ein Bild innerhalb seiner Begrenzungen zuzuschneiden oder zu ändern. Wenn Sie keine contentScale-Option angeben, wird standardmäßig ContentScale.Fit 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. Die folgende Tabelle hilft Ihnen bei der Auswahl des richtigen ContentScale-Modus:

Quellbild
`ContentScale`	Ergebnis – Bild im Hochformat:	Ergebnis – Bild im Querformat:
`ContentScale.Fit`: Skaliert das Bild gleichmäßig unter Beibehaltung des Seitenverhältnisses (Standardeinstellung). Ist der Inhalt kleiner als die Größe, wird das Bild so skaliert, dass es in die Grenzen passt.
`ContentScale.Crop`: Zentrieren Sie das Bild im verfügbaren Bereich.
`ContentScale.FillHeight`: Skaliert die Quelle unter Beibehaltung des Seitenverhältnisses, sodass die Grenzen der Zielhöhe entsprechen.
`ContentScale.FillWidth`: Die Quelle unter Beibehaltung des Seitenverhältnisses skalieren, damit die Begrenzungen der Breite des Ziels entsprechen.
`ContentScale.FillBounds`: Die Inhalte werden vertikal und horizontal nicht einheitlich skaliert, um die Zielgrenzen zu füllen. Hinweis: Bilder werden verzerrt, wenn Sie sie in Container einfügen, die nicht genau dem Seitenverhältnis des Bildes entsprechen.
`ContentScale.Inside`: Die Quelle wird so skaliert, dass das Seitenverhältnis innerhalb der Zielgrenzen beibehalten wird. Wenn die Quelle in beiden Dimensionen kleiner oder gleich dem Ziel ist, verhält sie sich ähnlich wie „None“. Der Inhalt bleibt immer innerhalb der Grenzen. Wenn die Inhalte kleiner als die Grenzen sind, wird keine Skalierung angewendet.	Quellbild größer als die Grenzen: Quellbild kleiner als die Grenzen:	Quellbild größer als die Grenzen: Quellbild 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 auf die Größe des Bereichs skaliert.	Quellbild größer als die Grenzen: Quellbild kleiner als die Grenzen:	Quellbild ist größer als die Grenzen: Quellbild ist kleiner als die Grenzen:

`Image`-Komposition an eine Form anpinnen

Wenn Sie ein Bild in eine Form einpassen möchten, verwenden Sie die integrierte clip-Modifikation. Wenn Sie ein Bild zu einem Kreis zuschneiden möchten, verwenden Sie Modifier.clip(CircleShape):

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

Abgerundete 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

Bilder mit RoundedCornerShape zuschneiden — **Abbildung 2**: Bild mit RoundedCornerShape zuschneiden

Sie können auch eine eigene Schnittform erstellen, indem Sie Shape verlängern und eine Path für die Form angeben, um die herum zu schneiden:

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

Bilder mit benutzerdefinierter Pfadform zuschneiden — **Abbildung 3**: Bild mit benutzerdefinierter Pfadform beschneiden

Einem `Image`-Element einen Rahmen hinzufügen

Häufig wird Modifier.border() mit Modifier.clip() kombiniert, 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)
)CustomizeImageSnippets.kt

Bilder zuschneiden und einen Rahmen um sie herum hinzufügen — **Abbildung 4**: Bild ausschneiden und mit Rahmen versehen

Wenn du einen Farbverlaufsrand erstellen möchtest, kannst du mit der Brush API einen Regenbogen-Farbverlaufsrand 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)
)CustomizeImageSnippets.kt

Kreis mit Regenbogen-Farbverlauf — **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: Bildfarben in Pixel umwandeln

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 auf das Image-Composeable ein Mischmodus mit der angegebenen Farbe angewendet. ColorFilter.tint(color, blendMode) verwendet BlendMode.SrcIn, um Inhalte zu färben. Das bedeutet, dass die angegebene Farbe dort angezeigt wird, wo 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 führen zu anderen Effekten. Wenn Sie beispielsweise BlendMode.Darken mit einer Color.Green für ein Bild festlegen, führt dies zu folgendem 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

Weitere Informationen zu den verschiedenen verfügbaren Überblendungsmodi finden Sie in der Referenzdokumentation zu „BlendMode“.

`Image`-Filter mit Farbmatrix anwenden

Transformieren Sie das Bild mit der Option „Farbmatrix“ ColorFilter. Wenn Sie beispielsweise einen Schwarz-Weiß-Filter auf Ihre Bilder anwenden möchten, können Sie 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) })
)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

Helligkeit und Kontrast des Bildes mit ColorMatrix angepasst — **Abbildung 10**: Mit ColorMatrix angepasste Bildhelligkeit und -kontrast

Farben eines `Image`-Kompositionselements umkehren

Wenn Sie die Farben eines Bildes umkehren möchten, legen Sie mit ColorMatrix fest, dass die Farben umgekehrt werden:

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 des Bilds — **Abbildung 11**: Inversion der Farben im Bild

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. Bei Bildern ist es wahrscheinlich, dass sie außerhalb der Grenzen des Inhalts nicht gerendert werden. Das Weichzeichnen eines abgerundeten Rechtecks hingegen erfordert möglicherweise eine solche Unterscheidung.

Wenn wir beispielsweise für das Bild oben BlurredEdgeTreatment auf „Unbegrenzt“ festlegen, sind die Ränder des Bilds unscharf 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.
Grafiken-Modifikatoren
Bilder werden geladen {:#loading-images}
Material-Symbole {:#material-icons}

Bild anpassen

Inhaltsskala

Image-Komposition an eine Form anpinnen

Einem Image-Element einen Rahmen hinzufügen