Benutzerdefinierte Layouts

In Compose werden UI-Elemente durch zusammensetzbare Funktionen dargestellt, die beim Aufrufen ein UI-Element ausgeben, das dann einem UI-Baum hinzugefügt wird, der auf dem Bildschirm gerendert wird. Jedes UI-Element hat ein übergeordnetes Element und möglicherweise viele untergeordnete Elemente. Jedes Element befindet sich auch in seinem übergeordneten Element, angegeben als (x, y)-Position und Größe, angegeben als width und height.

Übergeordnete Elemente definieren die Einschränkungen für ihre untergeordneten Elemente. Ein Element wird gebeten, um die Größe innerhalb dieser Einschränkungen zu definieren. Einschränkungen schränken die Mindest- und Maximal width und height eines Elements. Hat ein Element untergeordnete Elemente, kann es kann jedes untergeordnete Element messen, um seine Größe zu bestimmen. Sobald ein Element bestimmt, und meldet ihre eigene Größe, kann sie festlegen, wie ihr untergeordnete -Elemente relativ zu sich selbst, wie unter Benutzerdefinierte Layouts

Die Anordnung der einzelnen Knoten im UI-Baum erfolgt in drei Schritten. Jeder Knoten muss:

  1. Untergeordnete Elemente messen
  2. Größe selbst festlegen
  3. Untergeordnete Elemente platzieren

Drei Schritte für das Knotenlayout: Kinder messen, Größe festlegen, Kinder platzieren

Damit legen Sie fest, wann Sie Ihre Kinder messen und platzieren dürfen. Das Messen eines Layouts kann nur während der Messung und des Layout-Durchlaufs erfolgen. und ein untergeordnetes Element kann nur während des Layout-Passes platziert werden (und erst nachdem es gemessen). Aufgrund von Compose-Bereichen wie MeasureScope, und PlacementScope, bei der Kompilierung erzwungen.

Layout-Modifikator verwenden

Mit dem layout-Modifikator können Sie ändern, wie ein Element gemessen und platziert wird. aus. Layout ist ein Lambda; seine Parameter umfassen das Element, das Sie messen können, übergeben als measurable, und die eingehenden Einschränkungen dieses Composeables, übergeben als constraints. Ein benutzerdefinierter Layout-Modifikator kann so aussehen:

fun Modifier.customLayoutModifier() =
    layout { measurable, constraints ->
        // ...
    }
CustomLayoutSnippets.kt

Zeigen wir ein Text auf dem Bildschirm an und steuern den Abstand von der Oberkante zur Grundlinie der ersten Textzeile. Genau das ist der Der paddingFromBaseline-Modifikator wird hier als Beispiel implementiert. Verwenden Sie dazu den layout-Modifikator, um die zusammensetzbare Funktion manuell im Bildschirm. Hier ist das gewünschte Verhalten, wenn das obere Text-Abstand 24.dp festgelegt ist:

Der Unterschied zwischen dem normalen UI-Abstand, der den Abstand zwischen Elementen festlegt, und dem Textabstand, der den Abstand von einer Grundlinie zur nächsten festlegt

Hier ist der Code zum Erstellen des Abstands:

fun Modifier.firstBaselineToTop(
    firstBaselineToTop: Dp
) = layout { measurable, constraints ->
    // Measure the composable
    val placeable = measurable.measure(constraints)

    // Check the composable has a first baseline
    check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
    val firstBaseline = placeable[FirstBaseline]

    // Height of the composable with padding - first baseline
    val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
    val height = placeable.height + placeableY
    layout(placeable.width, height) {
        // Where the composable gets placed
        placeable.placeRelative(0, placeableY)
    }
}
CustomLayoutSnippets.kt

Hier ist, was in diesem Code passiert:

  1. Im Lambda-Parameter measurable messen Sie die Text, die durch den messbaren Parameter durch Aufrufen von measurable.measure(constraints).
  2. Sie geben die Größe des Composeables an, indem Sie die Methode layout(width, height) aufrufen. Dadurch wird auch ein Lambda-Ausdruck zurückgegeben, der zum Platzieren der umhüllten Elemente verwendet wird. In diesem Fall ist es die Höhe zwischen der letzten Grundlinie und dem hinzugefügten oberen Abstand.
  3. Sie positionieren die umgebrochenen Elemente auf dem Bildschirm, indem Sie placeable.place(x, y) aufrufen. Wenn die umschlossenen Elemente nicht platziert werden, werden sie nicht sichtbar sind. Die y-Position entspricht dem oberen Abstand, also der Position der ersten Textgrundlinie.

Um zu prüfen, ob das wie erwartet funktioniert, verwenden Sie diesen Modifikator in einem Text:

@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
    }
}

@Preview
@Composable
fun TextWithNormalPaddingPreview() {
    MyApplicationTheme {
        Text("Hi there!", Modifier.padding(top = 32.dp))
    }
}
CustomLayoutSnippets.kt

Mehrere Vorschaubilder von Textelementen; eines zeigt den normalen Abstand zwischen den Elementen, das andere den Abstand von einer Grundlinie zur nächsten

Benutzerdefinierte Layouts erstellen

Der Modifizierer layout ändert nur das Anruf-Composeable. Zum Messen und Layout mehreren zusammensetzbaren Funktionen verwenden, verwenden Sie stattdessen die zusammensetzbare Funktion Layout. Diese zusammensetzbare Funktion können Sie Kinder manuell messen und anordnen. Alle übergeordneten Layouts Column und Row werden mit der zusammensetzbaren Funktion Layout erstellt.

Erstellen wir eine sehr einfache Version von Column. Die meisten benutzerdefinierten Layouts folgen diesem Muster:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // measure and position children given constraints logic here
        // ...
    }
}
CustomLayoutSnippets.kt

Ähnlich wie beim layout-Modifikator ist measurables die Liste der untergeordneten Elemente, die müssen gemessen werden und constraints sind die Einschränkungen des übergeordneten Elements. Gemäß der gleichen Logik wie zuvor kann MyBasicColumn so implementiert werden:

@Composable
fun MyBasicColumn(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each children
            measurable.measure(constraints)
        }

        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Track the y co-ord we have placed children up to
            var yPosition = 0

            // Place children in the parent layout
            placeables.forEach { placeable ->
                // Position item on the screen
                placeable.placeRelative(x = 0, y = yPosition)

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}
CustomLayoutSnippets.kt

Die untergeordneten Composeables sind durch die Layout-Einschränkungen (ohne die minHeight-Einschränkungen) eingeschränkt und werden basierend auf der yPosition des vorherigen Composeables platziert.

So wird dieses benutzerdefinierte Composed-Element verwendet:

@Composable
fun CallingComposable(modifier: Modifier = Modifier) {
    MyBasicColumn(modifier.padding(8.dp)) {
        Text("MyBasicColumn")
        Text("places items")
        Text("vertically.")
        Text("We've done it by hand!")
    }
}
CustomLayoutSnippets.kt

Mehrere Textelemente in einer Spalte übereinander gestapelt.

Layout-Richtung

Ändern Sie die Layoutrichtung eines Composeables, indem Sie die lokale LocalLayoutDirection-Komposition ändern.

Wenn Sie zusammensetzbare Funktionen manuell auf dem Bildschirm platzieren, wird der LayoutDirection Teil des LayoutScope des layout-Modifikators oder der zusammensetzbaren Layout-Funktion.

Wenn du layoutDirection verwendest, platziere die Elemente mit place. Im Gegensatz zur Methode placeRelative ändert sich place nicht je nach Layoutrichtung (links nach rechts oder rechts nach links).

Benutzerdefinierte Layouts in der Praxis

Weitere Informationen zu Layouts und Modifikatoren finden Sie unter Grundlegende Layouts in Compose. Beispiele für benutzerdefinierte Layouts finden Sie unter Compose-Beispiele zum Erstellen benutzerdefinierter Layouts.

Weitere Informationen

Weitere Informationen zu benutzerdefinierten Layouts in Compose finden Sie in den folgenden zusätzlichen Ressourcen.

Videos

Zurück
Flow-Layouts
Weiter
Übersicht