Mostrare un'immagine ritagliata in una forma

Puoi adattare un'immagine a una forma ritagliata e disegnare ombre attorno al perimetro della forma per dare un aspetto tridimensionale. Questa tecnica è utile per creare design come avatar e miniature di prodotti o per visualizzare loghi con forme personalizzate.

Per visualizzare un'immagine ritagliata in una forma, devi:

  • Creare la forma.
  • Ritagliare l'immagine nella forma.

Risultati

Cane in esagono con ombra applicata intorno ai bordi
Figura 1. Forma personalizzata applicata come ritaglio.

Compatibilità delle versioni

Questa implementazione richiede che il minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare una forma

Il seguente codice crea una forma personalizzata che può disegnare e visualizzare dinamicamente un poligono arrotondato:

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)
    }
}

Punti chiave sul codice

  • RoundedPolygon.getBounds() definisce una funzione di estensione nella classe RoundedPolygon per calcolarne i limiti.
  • La classe RoundedPolygonShape implementa l' Shape interfaccia, che consente di definire una forma personalizzata (un poligono arrotondato) in Jetpack Compose.
  • La forma utilizza un Matrix per gestire le operazioni di scalabilità e traslazione per un rendering flessibile.
  • La funzione createOutline() accetta un oggetto RoundedPolygon, lo scala e lo traduce in modo che si adatti a una determinata dimensione e restituisce un oggetto Outline che descrive la forma finale da disegnare.

Ritagliare l'immagine in una forma

Il seguente codice ritaglia l'immagine in un esagono e aggiunge una leggera ombra per dare un senso di profondità:

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)
    )
}

Punti chiave sul codice

  • Gli oggetti RoundedPolygon e RoundedPolygonShape vengono utilizzati per definire e applicare una forma esagonale all'immagine.
  • Il codice utilizza graphicsLayer per aggiungere un'ombra basata sull'elevazione all'immagine. In questo modo si crea un senso di profondità e separazione visiva dallo sfondo.
  • L'utilizzo dei bloc0}remember blocchi ottimizza il rendimento assicurando che le definizioni di forma e ritaglio vengano calcolate una sola volta e memorizzate per le successive ricomposizioni dell'UI.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide curate che riguardano obiettivi di sviluppo Android più ampi:

Scopri le tecniche per utilizzare immagini luminose e coinvolgenti per dare alla tua app per Android un aspetto accattivante.
Raccolta di guide rapide

Hai domande o feedback?

Visita la nostra pagina delle domande frequenti e scopri le guide rapide oppure contattaci e comunicaci la tua opinione.
Vai alle Domande frequenti Lascia un feedback