Ein Bild anzeigen, das in eine Form zugeschnitten ist

Sie können ein Bild an eine zugeschnittene Form anpassen und Schatten um den Rand der Form zeichnen, um einen dreidimensionalen Eindruck zu erwecken. Diese Technik ist nützlich, um Designs wie Avatare und Produkt-Thumbnails zu erstellen oder Logos mit benutzerdefinierten Formen anzuzeigen.

Wenn Sie ein an eine Form zugeschnittenes Bild anzeigen möchten, müssen Sie Folgendes tun:

• Form erstellen
• Bild an die Form anpassen

Ergebnisse

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 Shape Schnittstelle, mit der Sie in Jetpack Compose eine benutzerdefinierte Form (ein abgerundetes Polygon) definieren können.
• Die Form verwendet eine Matrix, um Skalierungs- und Übersetzungsvorgänge für ein flexibles Rendering zu verwalten.
• Die createOutline() Funktion verwendet ein RoundedPolygon Objekt, skaliert und übersetzt es, um es an eine bestimmte Größe anzupassen, und gibt ein Outline Objekt zurück, das die endgültige zu zeichnende Form beschreibt.

Bild an eine Form anpassen

Mit dem folgenden Code wird das Bild an ein Sechseck angepasst und ein dezenter Schlagschatten hinzugefügt, um einen Tiefeneffekt zu erzielen:

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

• Die Objekte RoundedPolygon und RoundedPolygonShape werden verwendet, um eine sechseckige Form für das Bild zu definieren und anzuwenden.
• Der Code verwendet graphicsLayer, um dem Bild einen höhenbasierten Schatten hinzuzufügen. Dadurch entsteht ein Tiefeneffekt und eine visuelle Trennung vom Hintergrund.
• Die Verwendung von remember-Blöcken optimiert die Leistung, da die Form und Zuschneidedefinitionen nur einmal berechnet und für spätere Neukompositionen der Benutzeroberfläche gespeichert werden.

Sammlungen, die diese Anleitung enthalten

Diese Anleitung ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die umfassendere Android-Entwicklungsziele abdecken:

Bilder anzeigen

Hier erfahren Sie, wie Sie mit hellen, ansprechenden Bildern Ihrer Android-App ein schönes Aussehen und ein angenehmes Gefühl verleihen.

Sammlung von Kurzanleitungen

Fragen oder Feedback

Auf der Seite mit den häufig gestellten Fragen finden Sie weitere Informationen zu Kurzanleitungen. Sie können uns auch kontaktieren und uns Ihre Meinung mitteilen.

Zu den FAQs Feedback geben