Ein Bild anzeigen, das in eine Form zugeschnitten ist

Sie können ein Bild in eine zugeschnittene Form einpassen und Schatten um den Umriss der Form zeichnen, um einen dreidimensionalen Eindruck zu erzeugen. Diese Technik eignet sich zum Erstellen von Designs wie Avataren und Produkt-Thumbnails oder zum Darstellen von Logos mit benutzerdefinierten Formen.

So blenden Sie ein Bild in eine Form ein:

• Erstellen Sie die Form.
• Schneiden Sie das Bild an die Form zu.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Form erstellen

Mit dem folgenden Code wird eine benutzerdefinierte Form erstellt, mit der ein abgerundetes Polygon dynamisch gezeichnet und gerendert werden kann:

fun RoundedPolygon.getBounds() = calculateBounds().let { Rect(it[0], it[1], it[2], it[3]) }
class RoundedPolygonShape(
    private val polygon: RoundedPolygon,
    private var matrix: Matrix = Matrix()
) : Shape {
    private var path = Path()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        path.rewind()
        path = polygon.toPath().asComposePath()
        matrix.reset()
        val bounds = polygon.getBounds()
        val maxDimension = max(bounds.width, bounds.height)
        matrix.scale(size.width / maxDimension, size.height / maxDimension)
        matrix.translate(-bounds.left, -bounds.top)

        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

Wichtige Punkte zum Code

• RoundedPolygon.getBounds() definiert eine Erweiterungsfunktion für die Klasse RoundedPolygon, um ihre Grenzen zu berechnen.
• Die RoundedPolygonShape-Klasse implementiert die Schnittstelle Shape, mit der Sie in Jetpack Compose eine benutzerdefinierte Form (ein abgerundetes Polygon) definieren können.
• Für die Form wird ein Matrix verwendet, um Skalierungs- und Verschiebungsvorgänge für flexibles Rendering zu verwalten.
• Die Funktion createOutline() skaliert und verschiebt ein RoundedPolygon-Objekt, damit es in eine bestimmte Größe passt, und gibt ein Outline-Objekt zurück, das die zu zeichnende endgültige Form beschreibt.

Bild in eine Form zuschneiden

Im folgenden Code wird das Bild zu einem Sechseck zugeschnitten und ein subtiler Schlagschatten hinzugefügt, um einen Eindruck von Tiefe zu vermitteln:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier
        .clip(clip)
        .background(MaterialTheme.colorScheme.secondary)
        .size(200.dp)
) {
    Text(
        "Hello Compose",
        color = MaterialTheme.colorScheme.onSecondary,
        modifier = Modifier.align(Alignment.Center)
    )
}
ShapesSnippets.kt

Wichtige Punkte zum Code

• Mit den Objekten RoundedPolygon und RoundedPolygonShape wird eine sechseckige Form definiert und auf das Bild angewendet.
• Im Code wird graphicsLayer verwendet, um dem Bild einen höhenbasierten Schatten hinzuzufügen. So entsteht ein Gefühl von Tiefe und eine visuelle Trennung vom Hintergrund.
• Durch die Verwendung von remember-Blöcken wird die Leistung optimiert, da die Form- und Schnittdefinitionsdaten nur einmal berechnet und für spätere Neuzusammensetzungen der Benutzeroberfläche gespeichert werden.

Ergebnisse

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Bilder anzeigen

Hier erfahren Sie, wie Sie mit leuchtenden, ansprechenden visuellen Elementen Ihrer Android-App ein ansprechendes Erscheinungsbild verleihen.

Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.

Zu den FAQs Feedback geben