Listy z funkcją Utwórz na Wear OS

Listy umożliwiają użytkownikom wybieranie pozycji 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 umożliwić Compose obliczanie zmiany wysokości podczas przewijania elementu na ekranie.
  2. Użyj transformation = SurfaceTransformation(transformationSpec), aby zastosować efekty wizualne, w tym zmniejszenie zawartości 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 lub dolnej krawędzi ekranu:

Poniższy fragment kodu pokazuje, jak utworzyć listę za pomocą TransformingLazyColumn układu, aby utworzyć treści, które będą dobrze wyglądać na ekranach Wear OS o różnych rozmiarach.

Fragment kodu pokazuje też, jak używać modyfikatora minimumVerticalContentPadding, który należy ustawić w elementach listy, aby zastosować prawidłowe dopełnienie u góry i u dołu listy.

Aby wyświetlić wskaźnik przewijania, udostępnij 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 skończy przewijać lub przeciągać, 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ą, gdy oddalają się od środka, przyciąganie jest szczególnie przydatne, ponieważ zapewnia, że najważniejszy element pozostaje w pełni widoczny i czytelny w optymalnym obszarze wyświetlania.

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

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    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 listę standardową do końca i na końcu zostanie dodany nowy element, lista zachowa widok użytkownika na bieżącym elemencie. Jeśli na przykład użytkownik wyświetla element 10 u dołu ekranu i zostanie dodany element 11, widok pozostanie skupiony na elemencie 10, a element 11 pojawi się poza ekranem poniżej bieżącego widoku.

W przypadku takich zastosowań jak aplikacje do przesyłania wiadomości czy dzienniki na żywo takie zachowanie zwykle nie jest pożądane. Gdy pojawiają się nowe elementy, użytkownicy zwykle chcą od razu zobaczyć najnowsze treści, jeśli są już na końcu listy. Jeśli jednocześnie pojawi się wiele elementów, lista powinna pominąć niektóre z nich i wyświetlić najnowszy element na dole (co oznacza, że niektóre elementy pośrednie mogą nie być w ogóle wyświetlane, chyba że użytkownik przewinie listę do góry).

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ą.

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

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

Aby dodać efekt przyciągania i przesuwania wraz z układem odwróconym, możesz połączyć 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ści wypełniają 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.