Layout vincolo in Scrivi

ConstraintLayout è un layout che ti consente di posizionare i composabili rispetto ad altri composabili sullo schermo. È un'alternativa all'utilizzo di più elementi personalizzati di layout Row, Column, Box e altri elementi di layout personalizzati nidificati. ConstraintLayout è utile per implementare layout più grandi con requisiti di allineamento più complicati.

Valuta la possibilità di utilizzare ConstraintLayout nei seguenti scenari:

• Per evitare di nidificare più Column e Row per posizionare gli elementi sullo schermo, migliora la leggibilità del codice.
• Per posizionare i composabili rispetto ad altri composabili o per posizionare i composabili in base a linee guida, barriere o catene.

Nel sistema di visualizzazione, ConstraintLayout era il metodo consigliato per creare layout grandi e complessi, in quanto una gerarchia di visualizzazioni piatta era migliore per il rendimento rispetto alle visualizzazioni nidificate. Tuttavia, questo non è un problema in Compose, che è in grado di gestire in modo efficiente gerarchie di layout complesse.

Inizia a utilizzare ConstraintLayout

Per utilizzare ConstraintLayout in Compose, devi aggiungere questa dipendenza in build.gradle (oltre alla configurazione di Compose):

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

Nota: l'elemento constraintLayout-compose ha un sistema di versionamento diverso da quello di Jetpack Compose. Controlla la versione più recente nella pagina di rilascio di ConstraintLayout.

ConstraintLayout in Scrittura funziona nel seguente modo utilizzando un DSL:

• Crea riferimenti per ogni composable in ConstraintLayout utilizzando createRefs() o createRefFor()
• I vincoli vengono forniti utilizzando il modificatore constrainAs(), che prende il riferimento come parametro e ti consente di specificare i relativi vincoli nel corpo della funzione lambda.
• I vincoli vengono specificati utilizzando linkTo() o altri metodi utili.
• parent è un riferimento esistente che può essere utilizzato per specificare vincoli nei confronti del componibile ConstraintLayout stesso.

Ecco un esempio di composable che utilizza un ConstraintLayout:

@Composable
fun ConstraintLayoutContent() {
    ConstraintLayout {
        // Create references for the composables to constrain
        val (button, text) = createRefs()

        Button(
            onClick = { /* Do something */ },
            // Assign reference "button" to the Button composable
            // and constrain it to the top of the ConstraintLayout
            modifier = Modifier.constrainAs(button) {
                top.linkTo(parent.top, margin = 16.dp)
            }
        ) {
            Text("Button")
        }

        // Assign reference "text" to the Text composable
        // and constrain it to the bottom of the Button composable
        Text(
            "Text",
            Modifier.constrainAs(text) {
                top.linkTo(button.bottom, margin = 16.dp)
            }
        )
    }
}
ConstraintLayoutSnippets.kt

Questo codice vincola la parte superiore di Button all'elemento principale con un margine di 16.dp e un Text alla parte inferiore di Button, sempre con un margine di 16.dp.

API disaccoppiata

Nell'esempio ConstraintLayout, i vincoli sono specificati in linea, con un modificatore nel composable a cui vengono applicati. Tuttavia, in alcune situazioni è preferibile disaccoppiare i vincoli dai layout a cui si applicano. Ad esempio, potresti voler cambiare i vincoli in base alla configurazione dello schermo o animare tra due insiemi di vincoli.

Per casi come questi, puoi utilizzare ConstraintLayout in un modo diverso:

1. Passa un ConstraintSet come parametro a ConstraintLayout.
2. Assegna i riferimenti creati in ConstraintSet ai composabili utilizzando il modificatore layoutId.

@Composable
fun DecoupledConstraintLayout() {
    BoxWithConstraints {
        val constraints = if (minWidth < 600.dp) {
            decoupledConstraints(margin = 16.dp) // Portrait constraints
        } else {
            decoupledConstraints(margin = 32.dp) // Landscape constraints
        }

        ConstraintLayout(constraints) {
            Button(
                onClick = { /* Do something */ },
                modifier = Modifier.layoutId("button")
            ) {
                Text("Button")
            }

            Text("Text", Modifier.layoutId("text"))
        }
    }
}

private fun decoupledConstraints(margin: Dp): ConstraintSet {
    return ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        constrain(button) {
            top.linkTo(parent.top, margin = margin)
        }
        constrain(text) {
            top.linkTo(button.bottom, margin)
        }
    }
}
ConstraintLayoutSnippets.kt

Poi, quando devi modificare le limitazioni, puoi semplicemente passare un valore ConstraintSet diverso.

Concetti di ConstraintLayout

ConstraintLayout contiene concetti come linee guida, barriere e catene che possono aiutarti a posizionare gli elementi all'interno del tuo Composable.

Linee guida

Le linee guida sono piccoli ausili visivi per progettare i layout. I composabili possono essere vincolati a una linea guida. Le linee guida sono utili per posizionare gli elementi in un determinato dp o percentage all'interno del composable principale.

Esistono due tipi diversi di linee guida, verticali e orizzontali. Le due linee orizzontali sono top e bottom, mentre le due verticali sono start e end.

ConstraintLayout {
    // Create guideline from the start of the parent at 10% the width of the Composable
    val startGuideline = createGuidelineFromStart(0.1f)
    // Create guideline from the end of the parent at 10% the width of the Composable
    val endGuideline = createGuidelineFromEnd(0.1f)
    //  Create guideline from 16 dp from the top of the parent
    val topGuideline = createGuidelineFromTop(16.dp)
    //  Create guideline from 16 dp from the bottom of the parent
    val bottomGuideline = createGuidelineFromBottom(16.dp)
}
ConstraintLayoutSnippets.kt

Per creare una linea guida, utilizza createGuidelineFrom* con il tipo di linea guida richiesto. Viene creato un riferimento che può essere utilizzato nel blocco Modifier.constrainAs().

Nota: ti consigliamo di utilizzare il composable Spacer per ottenere un effetto simile con Rows e Columns.

Barriere

Barriere fa riferimento a più composabili per creare una linea guida virtuale in base al widget più estremo sul lato specificato.

Per creare una barriera, utilizza createTopBarrier() (o createBottomBarrier(), createEndBarrier(), createStartBarrier()) e fornisci i riferimenti che devono costituirla.

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val topBarrier = createTopBarrier(button, text)
    }
}
ConstraintLayoutSnippets.kt

La barriera può quindi essere utilizzata in un blocco Modifier.constrainAs().

Nota: valuta la possibilità di utilizzare le misurazioni intrinseche per ottenere un effetto simile con Righe e Colonne.

Catene

Le catene forniscono un comportamento simile a quello di un gruppo in un singolo asse (orizzontale o verticale). L'altro asse può essere vincolato in modo indipendente.

Per creare una catena, utilizza createVerticalChain o createHorizontalChain:

ConstraintLayout {
    val constraintSet = ConstraintSet {
        val button = createRefFor("button")
        val text = createRefFor("text")

        val verticalChain = createVerticalChain(button, text, chainStyle = ChainStyle.Spread)
        val horizontalChain = createHorizontalChain(button, text)
    }
}
ConstraintLayoutSnippets.kt

La catena può quindi essere utilizzata nel blocco Modifier.constrainAs().

Una catena può essere configurata con diversi ChainStyles, che determinano come gestire lo spazio che circonda un composable, ad esempio:

• ChainStyle.Spread: lo spazio viene distribuito in modo uniforme tra tutti i composabili, incluso lo spazio libero prima del primo composable e dopo l'ultimo composable.
• ChainStyle.SpreadInside: lo spazio viene distribuito in modo uniforme tra tutti i composabili, senza spazi vuoti prima del primo composable o dopo l'ultimo.
• ChainStyle.Packed: lo spazio viene distribuito prima del primo e dopo l'ultimo composable, i composable sono raggruppati senza spazi tra loro.

Nota: valuta la possibilità di utilizzare Righe e Colonne tradizionali con diversi arrangiamenti per ottenere un effetto simile a quello delle catene in ConstraintLayout.

Scopri di più

Scopri di più su ConstraintLayout in Compose dalle API in azione nei campioni di Compose che utilizzano ConstraintLayout.