Layout vincolo in Scrivi

ConstraintLayout è un layout che ti consente di posizionare gli elementi componibili in relazione ad altri elementi componibili sullo schermo. È un'alternativa all'utilizzo di più elementi nidificati Row, Column, Box e altri elementi di layout personalizzati.

Nel sistema View, ConstraintLayout era il modo consigliato per creare layout grandi e complessi, poiché una gerarchia di oggetti View piatta era migliore per le prestazioni rispetto alle visualizzazioni nidificate. Tuttavia, questo non è un problema in Compose, che è in grado di gestire in modo efficiente gerarchie di layout profonde, quindi ConstraintLayout non è così vantaggioso.

Inizia a utilizzare ConstraintLayout

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

implementation "androidx.constraintlayout:constraintlayout-compose:$constraintlayout_compose_version"

ConstraintLayout in Compose funziona nel seguente modo utilizzando un DSL:

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

Ecco un esempio di un componibile 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)
            }
        )
    }
}

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.

Il pulsante viene visualizzato sopra il testo
Figura 1. Un componibile Button e un componibile Text vincolati l'uno all'altro in un ConstraintLayout.

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 modificare i vincoli in base alla configurazione dello schermo o animare tra due set di vincoli.

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

In seguito, quando devi modificare i vincoli, puoi semplicemente passare un ConstraintSet diverso.

ConstraintLayout concetti

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

Linee guida

Le linee guida sono piccoli elementi visivi che aiutano a progettare i layout. Gli elementi componibili 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 diversi tipi 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)
}

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

Barriere

Le barriere fanno riferimento a più elementi componibili per creare una linea guida virtuale basata sul widget più estremo sul lato specificato.

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

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

        val topBarrier = createTopBarrier(button, text)
    }
}

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

Catene

Le catene forniscono un comportamento simile a quello dei gruppi su 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)
    }
}

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

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

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