Layout vincolo in Scrivi

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

Nel sistema View, ConstraintLayout era il modo consigliato per creare layout di grandi dimensioni e complessi, poiché una gerarchia di oggetti View 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 le gerarchie di layout profonde, quindi ConstraintLayout non è così vantaggioso.

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:$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 nella lambda del corpo.
• I vincoli vengono specificati utilizzando linkTo() o altri metodi utili.
• parent è un riferimento esistente che può essere utilizzato per specificare i vincoli verso 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)
            }
        )
    }
}
ConstraintLayoutSnippets.kt

Questo codice vincola la parte superiore di Button al genitore con un margine di 16.dp e un Text alla parte inferiore di Button anche con un margine di 16.dp.

API disaccoppiata

Nell'esempio di ConstraintLayout, i vincoli vengono specificati in linea, con un modificatore nel componibile 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 insiemi di vincoli.

In questi casi, 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 layoutId modificatore.

@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 i vincoli, puoi semplicemente passare un ConstraintSet diverso.

Concetti di ConstraintLayout

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

Linee guida

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

Esistono due tipi diversi di linee guida: verticali e orizzontali. Le due 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().

Barriere

Le barriere fanno riferimento a più 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 comporre la barriera.

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

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

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

Catene

Le catene forniscono un comportamento simile a quello di un gruppo in un singolo asse (orizzontalmente o verticalmente). 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ò essere utilizzata nel blocco Modifier.constrainAs().

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

• ChainStyle.Spread: lo spazio viene distribuito uniformemente tra tutti i componibili, incluso lo spazio libero prima del primo componibile e dopo l'ultimo componibile.
• ChainStyle.SpreadInside: lo spazio viene distribuito uniformemente tra tutti i componibili, senza spazio libero prima del primo componibile o dopo l'ultimo componibile.
• ChainStyle.Packed: lo spazio viene distribuito prima del primo e dopo l'ultimo componibile, i componibili vengono raggruppati senza spazio tra loro.