Mostrare un'immagine ritagliata in una forma

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

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

• Crea la forma.
• Ritaglia l'immagine in base alla forma.

Compatibilità delle versioni

Questa implementazione richiede che il valore 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)
    }
}
ShapesSnippets.kt

Punti chiave del codice

• RoundedPolygon.getBounds() definisce una funzione di estensione per la classe RoundedPolygon per calcolarne i limiti.
• La classe RoundedPolygonShape implementa l'interfaccia Shape, consentendoti di definire una forma personalizzata (un poligono arrotondato) in Jetpack Compose.
• La forma utilizza un Matrix per gestire le operazioni di ridimensionamento e traduzione per un rendering flessibile.
• La funzione createOutline() prende un oggetto RoundedPolygon, lo ridimensiona e lo trasla in modo che rientri in una determinata dimensione e restituisce un oggetto Outline che descrive la forma finale da disegnare.

Ritagliare l'immagine in una forma

Il codice seguente ritaglia l'immagine in un esagono e aggiunge una sfumatura delicata per dare un'impressione 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)
    )
}
ShapesSnippets.kt

Punti chiave del codice

• Gli oggetti RoundedPolygon e RoundedPolygonShape vengono utilizzati per definire e applicare una forma esagonale all'immagine.
• Il codice utilizza graphicsLayer per aggiungere all'immagine un'ombra basata sull'elevazione. In questo modo viene creato un senso di profondità e separazione visiva dallo sfondo.
• L'utilizzo dei blocchi remember ottimizza le prestazioni garantendo che le definizioni di forma e ritaglio vengano calcolate una sola volta e memorizzate per le ricostruzioni successive dell'interfaccia utente.

Risultati

Raccolte che contengono questa guida

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

Visualizza immagini

Scopri le tecniche per utilizzare immagini brillanti e coinvolgenti per conferire un aspetto accattivante alla tua app per Android.

Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.

Vai alle domande frequenti Lascia un feedback