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) } }
Punti chiave del codice
RoundedPolygon.getBounds()
definisce una funzione di estensione per la classeRoundedPolygon
per calcolarne i limiti.- La classe
RoundedPolygonShape
implementa l'interfacciaShape
, 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 oggettoRoundedPolygon
, lo ridimensiona e lo trasla in modo che rientri in una determinata dimensione e restituisce un oggettoOutline
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) ) }
Punti chiave del codice
- Gli oggetti
RoundedPolygon
eRoundedPolygonShape
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:
