Listy z funkcją Utwórz na Wear OS

Listy umożliwiają użytkownikom wybieranie elementów z zestawu opcji na urządzeniach z Wear OS.

Wiele urządzeń z Wear OS ma okrągłe ekrany, co utrudnia wyświetlanie elementów listy znajdujących się u góry i u dołu ekranu. Z tego powodu Compose na Wear OS zawiera wersję klasy LazyColumn o nazwie TransformingLazyColumn, która obsługuje animacje skalowania i przekształcania. Gdy elementy przesuwają się na krawędzie, zmniejszają się i znikają.

Aby zastosować zalecane efekty skalowania i przewijania:

  1. Użyj Modifier.transformedHeight, aby funkcja Compose mogła obliczyć zmianę wysokości podczas przewijania elementu na ekranie.
  2. Użyj transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym zmniejszyć zawartość elementu.
  3. Użyj niestandardowego TransformationSpec w przypadku komponentów, które nie przyjmują transformation jako parametru, np. Text.

Poniższa animacja pokazuje, jak element listy skaluje się i zmienia kształt, gdy zbliża się do górnej i dolnej krawędzi ekranu:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą układu TransformingLazyColumn, aby utworzyć treści, które świetnie wyglądają na różnych rozmiarach ekranu Wear OS.

Fragment kodu pokazuje też użycie modyfikatora minimumVerticalContentPadding, który należy ustawić w elementach listy, aby zastosować odpowiedni odstęp u góry i u dołu listy.

Aby wyświetlić wskaźnik przewijania, podziel columnState między ScreenScaffold a TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Dodawanie efektu przyciągania i przesuwania

Przyciąganie zapewnia, że gdy użytkownik zakończy przewijanie lub gest szybkiego przesunięcia, lista zatrzyma się z elementem umieszczonym dokładnie w określonym punkcie, zwykle na środku ekranu. Na okrągłych ekranach, na których elementy skalują się i przekształcają w miarę oddalania się od środka, przyciąganie jest szczególnie przydatne, ponieważ zapewnia, że najbardziej odpowiedni element pozostaje w pełni widoczny i czytelny w optymalnym obszarze wyświetlania.

Aby dodać zachowanie przyciągania i przesuwania, ustaw parametr flingBehavior na wartość TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Ustaw rotaryScrollableBehavior tak, aby pasowało do RotaryScrollableDefaults.snapBehavior(columnState), aby zapewnić spójność podczas korzystania z fizycznego pokrętła lub ramki.

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}

Układ odwrócony

Domyślnie lista z możliwością przewijania jest zakotwiczona u góry. Jeśli użytkownik przewinie standardową listę do dołu i na końcu zostanie dodany nowy element, lista zachowa widok użytkownika na bieżący element. Jeśli na przykład użytkownik wyświetla element 10 u dołu ekranu, a dodany zostanie element 11, widok pozostanie skupiony na elemencie 10, a element 11 pojawi się poza ekranem poniżej bieżącego widoku.

W przypadku aplikacji do przesyłania wiadomości lub dzienników na żywo takie zachowanie jest zwykle niepożądane. Gdy pojawią się nowe elementy, użytkownicy zwykle chcą od razu zobaczyć najnowsze treści, jeśli są już na dole listy. Jeśli wiele elementów dotrze jednocześnie, lista powinna przejść do wyświetlania najnowszego elementu na dole (co oznacza, że niektóre elementy pośrednie mogą nie być w ogóle wyświetlane, chyba że użytkownik przewinie listę w górę).

Aby obsługiwać te przypadki użycia, TransformingLazyColumn umożliwia odwrócenie układu przez ustawienie reverseLayout = true. Spowoduje to zmianę punktu zakotwiczenia listy z górnej krawędzi na dolną.

Ustawienie reverseLayout = true odwraca też kolejność wizualną elementów i kierunek gestów przewijania:

  • Elementy są ułożone od dołu do góry, co oznacza, że indeks 0 znajduje się u dołu ekranu.
  • Przewijanie w górę powoduje wyświetlanie elementów o wyższych indeksach.

Aby dodać zachowanie przyciągania i przesuwania wraz z odwrotnym układem, możesz połączyć atrybuty flingBehavior i rotaryScrollableBehavior, jak pokazano w tym fragmencie kodu:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding,
        reverseLayout = true,
        modifier = Modifier.fillMaxWidth()
    ) {
        items(10) { index ->
            Button(
                label = {
                    Text(
                        text = "Item ${index + 1}"
                    )
                },
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            )
        }
        item {
            // With reverseLayout = true, the last item declared appears at the top.
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text("Header")
            }
        }
    }
}

Poniższe obrazy pokazują różnicę między zwykłą listą a listą odwróconą:

TransformingLazyColumn ze zwykłym układem, w którym na górze znajduje się element 1, a pozostałe elementy są ułożone w kolejności rosnącej.
Rysunek 1. Standardowy układ listy, w którym treść wypełnia obszar od góry do dołu.
Element TransformingLazyColumn z odwróconym układem, w którym element 1 znajduje się u dołu, a elementy są ułożone w kolejności malejącej w kierunku góry.
Rysunek 2. Odwrócony układ listy, w którym treści wypełniają obszar od dołu do góry.