Bild anpassen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Empfehlungen für dich

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