ConstraintLayout in Compose

ConstraintLayout ist ein Layout, mit dem Sie zusammensetzbare Funktionen relativ zum anderen zusammensetzbaren Funktionen auf dem Bildschirm. Es ist eine Alternative zur Verwendung mehrerer verschachtelter Row, Column, Box und weitere benutzerdefinierte Layoutelemente. ConstraintLayout ist nützlich bei der Implementierung größerer Layouts mit komplizierterer Ausrichtung. Anforderungen.

Erwägen Sie die Verwendung von ConstraintLayout in den folgenden Szenarien:

• Um zu vermeiden, dass mehrere Column- und Row-Elemente zur Positionierung von Elementen auf um die Lesbarkeit von Code zu verbessern.
• Um zusammensetzbare Funktionen im Verhältnis zu anderen zusammensetzbaren Funktionen zu positionieren oder um zusammensetzbare Funktionen zu positionieren, die auf Richtlinien, Barrieren oder Ketten basieren.

Im System von Datenansichten wurde ConstraintLayout für die Erstellung großer und komplexe Layouts, da eine flache Ansichtshierarchie besser für die Leistung war verschachtelte Ansichten. Dies ist jedoch kein Problem in der Funktion „Schreiben“, um tiefe Layouthierarchien effizient handhaben zu können.

Einführung in ConstraintLayout

Wenn Sie ConstraintLayout in „Compose“ verwenden möchten, müssen Sie diese Abhängigkeit in Ihr build.gradle (zusätzlich zum Einrichtung erstellen:

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

Hinweis: Das Artefakt constraintLayout-compose hat eine andere Versionsverwaltung als Jetpack Compose. Die aktuelle Version finden Sie im ConstraintLayout-Releaseseite

So funktioniert ConstraintLayout in „Compose“ mit einem DSL:

• Erstellen Sie Referenzen für jede zusammensetzbare Funktion in ConstraintLayout mithilfe der createRefs() oder createRefFor()
• Einschränkungen werden mit dem constrainAs()-Modifikator bereitgestellt, der die Referenz als Parameter verwenden und die Einschränkungen im Textkörper festlegen Lambda.
• Einschränkungen werden mithilfe von linkTo() oder anderen hilfreichen Methoden angegeben.
• parent ist ein vorhandener Verweis, mit dem Einschränkungen angegeben werden können ConstraintLayout selbst zusammensetzbar.

Hier ein Beispiel für eine zusammensetzbare Funktion mit einem 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

Durch diesen Code wird der obere Bereich von Button auf das übergeordnete Element mit einem Rand von 16.dp und Text am unteren Rand von Button, ebenfalls mit einem Rand von 16.dp.

Entkoppelte API

Im Beispiel ConstraintLayout Einschränkungen werden inline mit einem Modifikator in der zusammensetzbaren Funktion angegeben. auf die sie angewendet wird. Es gibt jedoch Situationen, in denen es vorteilhaft ist, die von den Layouts, auf die sie angewendet werden. Vielleicht möchten Sie je nach Bildschirmkonfiguration die Beschränkungen ändern oder zwischen zwei Modi Einschränkungssätze.

Für solche Fälle können Sie ConstraintLayout anders verwenden:

1. Übergeben Sie ConstraintSet als Parameter an ConstraintLayout.
2. Weisen Sie mithilfe der FunktionConstraintSet layoutId-Modifikator.

@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

Wenn Sie dann die Einschränkungen ändern müssen, können Sie einfach eine andere ConstraintSet

ConstraintLayout Konzepte

ConstraintLayout enthält Konzepte wie Richtlinien, Barrieren und Ketten die Ihnen bei der Positionierung von Elementen innerhalb Ihres Composables helfen kann.

Richtlinien

Richtlinien sind kleine visuelle Hilfsmittel beim Entwerfen von Layouts. Zusammensetzbare Elemente können auf eine Richtlinie beschränkt. Richtlinien sind hilfreich für die Positionierung von Elementen an einer bestimmte dp oder percentage in der übergeordneten zusammensetzbaren Funktion.

Es gibt zwei verschiedene Arten von Richtlinien: vertikal und horizontal. Die beiden Die horizontalen sind top und bottom, die beiden vertikalen sind start und 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

Um eine Richtlinie zu erstellen, verwende createGuidelineFrom* mit dem Typ der Richtlinie erforderlich. Dadurch wird eine Referenz erstellt, die im Modifier.constrainAs() Block.

Hinweis :Sie können die zusammensetzbare Funktion Spacer verwenden, um einen ähnlichen Effekt mit Rows und Columns.

Barrieren

Hindernisse beziehen sich auf mehrere zusammensetzbare Funktionen, um eine virtuelle Richtlinie zu erstellen, die auf das extremste Widget der angegebenen Seite.

Verwenden Sie zum Erstellen einer Hürde createTopBarrier() (oder: createBottomBarrier(), createEndBarrier(), createStartBarrier()) und geben Sie die Referenzen an, die sollte die Barriere ausmachen.

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

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

Die Hürde kann dann in einem Modifier.constrainAs()-Block verwendet werden.

Hinweis: Sie können die Verwendung von Intrinsische Messungen mit Zeilen und Spalten erzielen Sie einen ähnlichen Effekt.

Ketten

Ketten bieten ein gruppenähnliches Verhalten auf einer einzigen Achse (horizontal oder vertikal) . Die andere Achse kann unabhängig voneinander fixiert werden.

Verwenden Sie zum Erstellen einer Kette entweder createVerticalChain oder 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

Die Kette kann dann im Modifier.constrainAs()-Block verwendet werden.

Eine Kette kann mit verschiedenen ChainStyles konfiguriert werden, die entscheiden, wie der Deal abgewickelt wird. mit dem Raum um eine zusammensetzbare Funktion, wie z. B.:

• ChainStyle.Spread: Der Raum ist gleichmäßig auf alle zusammensetzbaren Funktionen verteilt, einschließlich kostenloser Platz vor der ersten zusammensetzbaren Funktion und nach der letzten zusammensetzbar.
• ChainStyle.SpreadInside: Der Raum ist gleichmäßig über alle zusammensetzbare Funktionen ohne kostenlosen Platz vor der ersten zusammensetzbaren Funktion oder nach dem der letzten zusammensetzbaren Funktion.
• ChainStyle.Packed: Der Bereich wird vor dem ersten und nach dem Letzte zusammensetzbare Funktionen werden ohne Platz dazwischen gepackt sich gegenseitig helfen.

Hinweis: Ziehen Sie die Verwendung herkömmlicher Zeilen und Spalten mit unterschiedlichen Vereinbarungen um einen ähnlichen Effekt wie Chains in ConstraintLayout zu erzielen.

Weitere Informationen

Weitere Informationen zu ConstraintLayout unter „Compose from the APIs in Aktion“ finden Sie in der Beispiele erstellen, in denen ConstraintLayout verwendet wird.