Forme in Compose

Con Componi puoi creare forme costituite da poligoni. Ad esempio, puoi creare i seguenti tipi di forme:

Figura 1. Esempi di forme diverse che puoi creare con la libreria di forme grafiche

Per creare un poligono arrotondato personalizzato in Compose, aggiungi la dipendenza graphics-shapes a app/build.gradle:

implementation "androidx.graphics:graphics-shapes:1.0.0-rc01"

Questa libreria ti consente di creare forme costituite da poligoni. Sebbene le forme poligonali abbiano solo bordi dritti e angoli acuti, consentono angoli arrotondati facoltativi. Consente di passare facilmente da una forma all'altra. Il morphing è difficile tra forme arbitrarie e tende a essere un problema di progettazione. Tuttavia, questa libreria semplifica il compito grazie alla trasformazione tra queste forme con strutture poligonali simili.

Nota: la libreria graphics-shapes è un insieme distinto di Forme rispetto alle forme di Compose integrate (come RoundedCornerShape).graphics-shapes sono progettati per essere utilizzati con il sistema Compose o View. Le forme di graphics-shapes possono essere convertite in forme di Compose convertendo le forme risultanti in oggetti Path, come mostrato in alcuni degli esempi di codice riportati di seguito.

Attenzione: questa libreria non è pensata per la trasformazione tra percorsi arbitrari (ad esempio da un'icona di riproduzione a un'icona di pausa), ma solo tra queste forme poligonali. Se hai un percorso arbitrario che deve essere trasformato tra i due, utilizza AnimatedVectorDrawables e uno strumento di terze parti come shapeshifter.design per allineare correttamente i punti del percorso.

Creare poligoni

Il seguente snippet crea una forma poligonale di base con 6 punti al centro dell'area di disegno:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 6,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Blue)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Figura 2. Esagono blu al centro dell'area di disegno.

In questo esempio, la libreria crea un RoundedPolygon che contiene la geometria rappresentante la forma richiesta. Per disegnare questa forma in un'app Scrivi, devi ottenere un oggetto Path per inserire la forma in un modulo che Scrivi sappia disegnare.

Arrotondare gli angoli di un poligono

Per arrotondare gli angoli di un poligono, utilizza il parametro CornerRounding. Richiede due parametri, radius e smoothing. Ogni angolo arrotondato è costituito da 1-3 curve cubiche, il cui centro ha la forma di un arco circolare, mentre le due curve laterali ("di accompagnamento") passano dal bordo della forma alla curva centrale.

Raggio

radius è il raggio del cerchio utilizzato per arrotondare un vertice.

Ad esempio, il seguente triangolo con angoli arrotondati viene creato nel seguente modo:

Figura 3. Triangolo con angoli arrotondati.

Figura 4. Il raggio di arrotondamento r determina la dimensione dell'arrotondamento circolare degli angoli arrotondati.

Sfumatura

L'appiattimento è un fattore che determina il tempo necessario per passare dalla parte arrotondata circolare dell'angolo al bordo. Un fattore di smussamento pari a 0 (non smussato, il valore predefinito per CornerRounding) comporta un smusso puramente circolare degli angoli. Un fattore di spianamento diverso da zero (fino al massimo 1,0) fa sì che il angolo venga arrotondato da tre curve distinte.

Figura 5. Un fattore di interpolazione pari a 0 (non interpolata) produce una singola curva cubica che segue un cerchio attorno all'angolo con il raggio di arrotondamento specificato, come nell'esempio precedente.

Figura 6. Un fattore di spianamento diverso da zero produce tre curve cubiche per arrotondare il vertice: la curva circolare interna (come prima) più due curve laterali che fanno da transizione tra la curva interna e i bordi del poligono.

Ad esempio, lo snippet riportato di seguito illustra la sottile differenza tra l'impostazione della funzionalità di spianamento su 0 e su 1:

Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygon = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2,
                centerX = size.width / 2,
                centerY = size.height / 2,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val roundedPolygonPath = roundedPolygon.toPath().asComposePath()
            onDrawBehind {
                drawPath(roundedPolygonPath, color = Color.Black)
            }
        }
        .size(100.dp)
)
ShapesSnippets.kt

Figura 7. Due triangoli neri che mostrano la differenza nel parametro di spianamento.

Dimensioni e posizione

Per impostazione predefinita, viene creata una forma con un raggio di 1 intorno al centro (0, 0). Questo raggio rappresenta la distanza tra il centro e i vertici esterni del poligono su cui si basa la forma. Tieni presente che l'arrotondamento dei bordi consente di ottenere una forma più piccola, poiché i bordi arrotondati saranno più vicini al centro rispetto ai vertici arrotondati. Per modificare le dimensioni di un poligono, regola il valore radius. Per regolare la posizione, modifica centerX o centerY del poligono. In alternativa, trasforma l'oggetto per modificarne le dimensioni, la posizione e la rotazione utilizzando le funzioni di trasformazione DrawScope standard, come DrawScope#translate().

Trasformare le forme

Un oggetto Morph è una nuova forma che rappresenta un'animazione tra due forme poligonali. Per eseguire la transizione tra due forme, crea due oggetti RoundedPolygons e un oggetto Morph che assumono queste due forme. Per calcolare una forma tra le forme iniziale e finale, fornisci un valore progress compreso tra zero e uno per determinarne la forma tra le forme iniziale (0) e finale (1):

Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = 0.5f).asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Nell'esempio precedente, l'avanzamento è esattamente a metà tra le due forme (triangolo arrotondato e quadrato), producendo il seguente risultato:

Figura 8. 50% del percorso tra un triangolo arrotondato e un quadrato.

Nella maggior parte dei casi, il morphing viene eseguito nell'ambito di un'animazione e non solo di un rendering statico. Per animare il passaggio da uno stato all'altro, puoi utilizzare le API di animazione standard in Compose per modificare il valore di avanzamento nel tempo. Ad esempio, puoi animare infinitamente la transizione tra queste due forme come segue:

val infiniteAnimation = rememberInfiniteTransition(label = "infinite animation")
val morphProgress = infiniteAnimation.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(
        tween(500),
        repeatMode = RepeatMode.Reverse
    ),
    label = "morph"
)
Box(
    modifier = Modifier
        .drawWithCache {
            val triangle = RoundedPolygon(
                numVertices = 3,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f,
                rounding = CornerRounding(
                    size.minDimension / 10f,
                    smoothing = 0.1f
                )
            )
            val square = RoundedPolygon(
                numVertices = 4,
                radius = size.minDimension / 2f,
                centerX = size.width / 2f,
                centerY = size.height / 2f
            )

            val morph = Morph(start = triangle, end = square)
            val morphPath = morph
                .toPath(progress = morphProgress.value)
                .asComposePath()

            onDrawBehind {
                drawPath(morphPath, color = Color.Black)
            }
        }
        .fillMaxSize()
)
ShapesSnippets.kt

Figura 9. Trasformazione infinita tra un quadrato e un triangolo arrotondato.

Utilizzare un poligono come clip

È comune utilizzare il modificatore clip in Compose per modificare il modo in cui viene visualizzato un composable e per sfruttare le ombre disegnate intorno all'area di ritaglio:

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

Puoi quindi utilizzare il poligono come clip, come mostrato nello snippet seguente:

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

Il risultato è il seguente:

Figura 10. Esagono con il testo "Un saluto da Scrivi" al centro.

Potrebbe non sembrare molto diverso da quanto veniva visualizzato in precedenza, ma consente di sfruttare altre funzionalità in Compose. Ad esempio, questa tecnica può essere utilizzata per ritagliare un'immagine e applicare un'ombra intorno alla regione ritagliata:

val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = "Dog",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .graphicsLayer {
                this.shadowElevation = 6.dp.toPx()
                this.shape = clip
                this.clip = true
                this.ambientShadowColor = Color.Black
                this.spotShadowColor = Color.Black
            }
            .size(200.dp)

    )
}
ShapesSnippets.kt

Figura 11. Forma personalizzata applicata come clip.

Pulsante Morph al clic

Puoi utilizzare la libreria graphics-shape per creare un pulsante che passa da una forma all'altra al tocco. Innanzitutto, crea un MorphPolygonShape che espanda Shape, riscalandolo e traducendolo in modo che si adatti in modo appropriato. Tieni presente che il progresso viene passato in modo che la forma possa essere animata:

class MorphPolygonShape(
    private val morph: Morph,
    private val percentage: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)
        return Outline.Generic(path)
    }
}
ShapesSnippets.kt

Per utilizzare questa forma di morphing, crea due poligoni, shapeA e shapeB. Crea e ricordati il Morph. Quindi, applica la trasformazione al pulsante come contorno del clip, utilizzando il pulsante interactionSource premuto come forza trainante dell'animazione:

val shapeA = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val shapeB = remember {
    RoundedPolygon.star(
        6,
        rounding = CornerRounding(0.1f)
    )
}
val morph = remember {
    Morph(shapeA, shapeB)
}
val interactionSource = remember {
    MutableInteractionSource()
}
val isPressed by interactionSource.collectIsPressedAsState()
val animatedProgress = animateFloatAsState(
    targetValue = if (isPressed) 1f else 0f,
    label = "progress",
    animationSpec = spring(dampingRatio = 0.4f, stiffness = Spring.StiffnessMedium)
)
Box(
    modifier = Modifier
        .size(200.dp)
        .padding(8.dp)
        .clip(MorphPolygonShape(morph, animatedProgress.value))
        .background(Color(0xFF80DEEA))
        .size(200.dp)
        .clickable(interactionSource = interactionSource, indication = null) {
        }
) {
    Text("Hello", modifier = Modifier.align(Alignment.Center))
}
ShapesSnippets.kt

Quando tocchi la casella, viene visualizzata la seguente animazione:

Figura 12. La morph viene applicata come clic tra due forme.

Animare la trasformazione di una forma all'infinito

Per animare in modo continuo una forma morph, utilizza rememberInfiniteTransition. Di seguito è riportato un esempio di un'immagine del profilo che cambia forma (e ruota) in modo infinito nel tempo. Questo approccio utilizza un piccolo aggiustamento al valore MorphPolygonShape mostrato sopra:

class CustomRotatingMorphShape(
    private val morph: Morph,
    private val percentage: Float,
    private val rotation: Float
) : Shape {

    private val matrix = Matrix()
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        // Below assumes that you haven't changed the default radius of 1f, nor the centerX and centerY of 0f
        // By default this stretches the path to the size of the container, if you don't want stretching, use the same size.width for both x and y.
        matrix.scale(size.width / 2f, size.height / 2f)
        matrix.translate(1f, 1f)
        matrix.rotateZ(rotation)

        val path = morph.toPath(progress = percentage).asComposePath()
        path.transform(matrix)

        return Outline.Generic(path)
    }
}

@Preview
@Composable
private fun RotatingScallopedProfilePic() {
    val shapeA = remember {
        RoundedPolygon(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val shapeB = remember {
        RoundedPolygon.star(
            12,
            rounding = CornerRounding(0.2f)
        )
    }
    val morph = remember {
        Morph(shapeA, shapeB)
    }
    val infiniteTransition = rememberInfiniteTransition("infinite outline movement")
    val animatedProgress = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            tween(2000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    val animatedRotation = infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            tween(6000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        ),
        label = "animatedMorphProgress"
    )
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painter = painterResource(id = R.drawable.dog),
            contentDescription = "Dog",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .clip(
                    CustomRotatingMorphShape(
                        morph,
                        animatedProgress.value,
                        animatedRotation.value
                    )
                )
                .size(200.dp)
        )
    }
}
ShapesSnippets.kt

Questo codice restituisce il seguente risultato divertente:

Figura 13. Immagine del profilo ritagliata da una forma a festoni in rotazione.

Poligoni personalizzati

Se le forme create da poligoni regolari non coprono il tuo caso d'uso, puoi creare una forma più personalizzata con un elenco di vertici. Ad esempio, potresti voler creare una forma a cuore come questa:

Figura 14. A forma di cuore.

Puoi specificare i singoli vertici di questa forma utilizzando l'overload RoundedPolygon che accetta un array di valori float di coordinate x e y.

Per suddividere il poligono a forma di cuore, tieni presente che il sistema di coordinate polari per la specifica dei punti semplifica la procedura rispetto all'utilizzo del sistema di coordinate cartesiane (x, y), in cui 0° inizia sul lato destro e procede in senso orario, con 270° in corrispondenza della posizione delle ore 12:

Figura 15. Forma a cuore con coordinate.

Ora la forma può essere definita in modo più semplice specificando l'angolo (𝜭) e il raggio dal centro in ogni punto:

Figura 16. Forma a cuore con coordinate, senza arrotondamento.

Ora i vertici possono essere creati e passati alla funzione RoundedPolygon:

val vertices = remember {
    val radius = 1f
    val radiusSides = 0.8f
    val innerRadius = .1f
    floatArrayOf(
        radialToCartesian(radiusSides, 0f.toRadians()).x,
        radialToCartesian(radiusSides, 0f.toRadians()).y,
        radialToCartesian(radius, 90f.toRadians()).x,
        radialToCartesian(radius, 90f.toRadians()).y,
        radialToCartesian(radiusSides, 180f.toRadians()).x,
        radialToCartesian(radiusSides, 180f.toRadians()).y,
        radialToCartesian(radius, 250f.toRadians()).x,
        radialToCartesian(radius, 250f.toRadians()).y,
        radialToCartesian(innerRadius, 270f.toRadians()).x,
        radialToCartesian(innerRadius, 270f.toRadians()).y,
        radialToCartesian(radius, 290f.toRadians()).x,
        radialToCartesian(radius, 290f.toRadians()).y,
    )
}
ShapesSnippets.kt

I vertici devono essere tradotti in coordinate cartesiane utilizzando questa funzioneradialToCartesian:

internal fun Float.toRadians() = this * PI.toFloat() / 180f

internal val PointZero = PointF(0f, 0f)
internal fun radialToCartesian(
    radius: Float,
    angleRadians: Float,
    center: PointF = PointZero
) = directionVectorPointF(angleRadians) * radius + center

internal fun directionVectorPointF(angleRadians: Float) =
    PointF(cos(angleRadians), sin(angleRadians))
ShapesSnippets.kt

Il codice precedente fornisce i vertici non elaborati del cuore, ma devi arrotondare angoli specifici per ottenere la forma del cuore scelta. I vertici 90° e 270° non sono arrotondati, ma gli altri sì. Per ottenere un arrotondamento personalizzato per i singoli vertici, utilizza il parametro perVertexRounding:

val rounding = remember {
    val roundingNormal = 0.6f
    val roundingNone = 0f
    listOf(
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNormal),
        CornerRounding(roundingNone),
        CornerRounding(roundingNormal),
    )
}

val polygon = remember(vertices, rounding) {
    RoundedPolygon(
        vertices = vertices,
        perVertexRounding = rounding
    )
}
Box(
    modifier = Modifier
        .drawWithCache {
            val roundedPolygonPath = polygon.toPath().asComposePath()
            onDrawBehind {
                scale(size.width * 0.5f, size.width * 0.5f) {
                    translate(size.width * 0.5f, size.height * 0.5f) {
                        drawPath(roundedPolygonPath, color = Color(0xFFF15087))
                    }
                }
            }
        }
        .size(400.dp)
)
ShapesSnippets.kt

Viene visualizzato il cuore rosa:

Figura 17. Risultato a forma di cuore.

Se le forme precedenti non coprono il tuo caso d'uso, ti consigliamo di utilizzare la classe Path per disegnare una forma personalizzata o di caricare un file ImageVector dal disco. La libreria graphics-shapes non è pensata per essere utilizzata per forme arbitrarie, ma è specificamente progettata per semplificare la creazione di poligoni arrotondati e animazioni di morph tra di loro.

Risorse aggiuntive

Per ulteriori informazioni ed esempi, consulta le seguenti risorse:

• Post del blog: The Shape of Things to Come - Shapes
• Post del blog: Morphing delle forme in Android
• Dimostrazione di Shapes su GitHub