Ta strona została przetłumaczona przez Cloud Translation API.

Układy niestandardowe

W Compose elementy interfejsu użytkownika są reprezentowane przez funkcje kompozytowe, które po wywołaniu emitują element interfejsu użytkownika, a następnie dodają go do drzewa interfejsu użytkownika, które jest renderowane na ekranie. Każdy element interfejsu ma jednego rodzica i potencjalnie wiele elementów podrzędnych. Każdy element jest również umieszczony w swoim elemencie nadrzędnym, określonym jako położenie (x, y) oraz rozmiar określony jako width i height.

Rodzice definiują ograniczenia dla elementów podrzędnych. Element musi określić swój rozmiar w ramach tych ograniczeń. Ograniczenia ograniczają minimalną i maksymalną wartość width oraz height elementu. Jeśli element ma elementy podrzędne, może mierzyć każdy z nich, aby określić swój rozmiar. Gdy element określi i zgłosi swój rozmiar, może określić, jak umieścić elementy podrzędne względem siebie. Szczegółowe informacje na ten temat znajdziesz w artykule Tworzenie niestandardowych układów.

Umieszczanie każdego węzła w drzewie interfejsu to proces 3-etapowy. Każdy węzeł musi:

Pomiar elementów podrzędnych
określać własny rozmiar,
umieszczać swoje potomstwo;

3 sposoby rozmieszczania węzłów: pomiar elementów podrzędnych, określenie rozmiaru, umieszczenie elementów podrzędnych

Zastosowanie zakresów określa, kiedy możesz mierzyć i umieszczać dzieci. Pomiar układu można przeprowadzić tylko podczas pomiaru i przesłań układu, a element podrzędny można umieścić tylko podczas przesyłania układu (i tylko po jego zmierzeniu). Z powodu zakresów kompilacji takich jak MeasureScope i PlacementScope jest to wymuszane w czasie kompilacji.

Używanie modyfikatora układu

Za pomocą modyfikatora layout możesz zmienić sposób pomiaru i układania elementu. Layout to funkcja lambda, której parametry obejmują element, który możesz mierzyć (przekazywany jako measurable), oraz docierające do niego ograniczenia (przekazywane jako constraints). Modyfikator niestandardowego układu może wyglądać tak:

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

Wyświetlmy na ekranie znak Text i zmodyfikujmy odległość od górnej krawędzi do linii bazowej pierwszego wiersza tekstu. Właśnie to robi modyfikator paddingFromBaseline, który implementujemy tutaj jako przykład. Aby to zrobić, użyj modyfikatora layout, aby ręcznie umieścić kompozyt na ekranie. Oto oczekiwane zachowanie, gdy ustawiono wypełnienie górne Text: 24.dp

Pokazuje różnicę między normalnym wypełnieniem interfejsu, które ustawia odstęp między elementami, a wypełnieniem tekstu, które ustawia odstęp między jedną podstawą a drugą

Oto kod, który powoduje takie rozmieszczenie:

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

Oto, co dzieje się w tym kodzie:

W parametrze lambda measurable mierzysz wartość Text reprezentowaną przez parametr mierzalny, wywołując funkcję measurable.measure(constraints).
Rozmiar elementu kompozytowego określasz, wywołując metodę layout(width, height), która zwraca też funkcję lambda używaną do umieszczania owiniętych elementów. W tym przypadku jest to wysokość między ostatnią bazą a dodaną górną przestrzenią.
Aby ustawić opakowane elementy na ekranie, wywołaj funkcję placeable.place(x, y). Jeśli owijane elementy nie są umieszczone, nie będą widoczne. Pozycja y odpowiada górnemu wypełnieniu – pozycji pierwszej linii tekstu.

Aby sprawdzić, czy wszystko działa zgodnie z oczekiwaniami, użyj tego modyfikatora w przypadku tagu 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

Kilka podglądów elementów tekstowych: jeden pokazuje zwykłe wypełnienie między elementami, a drugi – wypełnienie od jednej linii bazowej do następnej

Tworzenie układów niestandardowych

Modyfikator layout zmienia tylko wywoływane składane. Aby mierzyć i umieszczać wiele komponentów, użyj komponentu Layout. Ta kompozycja umożliwia ręczne pomiar i rozmieszczenie elementów podrzędnych. Wszystkie układy wyższego poziomu, takie jak Column i Row, są tworzone za pomocą komponentu Layout.

Utwórzmy bardzo podstawową wersję Column. Większość układów niestandardowych ma taki wzór:

@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

Podobnie jak w przypadku modyfikatora layout, measurables to lista elementów podrzędnych, które należy mierzyć, a constraints to ograniczenia z elementu nadrzędnego. Zgodnie z tą samą logiką co wcześniej MyBasicColumn można zastosować w ten sposób:

@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

Elementy składowe podrzędne są ograniczone przez ograniczenia Layout (bez ograniczeń minHeight) i są umieszczane na podstawie yPosition poprzedniego elementu składowego.

Oto, jak można używać niestandardowego komponentu:

@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

Kilka elementów tekstowych ułożonych jeden nad drugim w kolumnie.

Kierunek układu

Zmień kierunek układu kompozytowego, zmieniając kompozycję lokalną LocalLayoutDirection.

Jeśli funkcje kompozycyjne umieszczasz ręcznie na ekranie, LayoutDirection jest częścią LayoutScope modyfikatora layout lub funkcji kompozycyjnej Layout.

Podczas korzystania z funkcji layoutDirection umieszczaj komponenty za pomocą elementu place. W odróżnieniu od metody placeRelative wartość place nie zmienia się w zależności od kierunku układu (od lewej do prawej lub od prawej do lewej).