Listes avec Compose pour Wear OS

Grâce aux listes, les utilisateurs peuvent faire leur choix parmi un ensemble d'éléments sur des appareils Wear OS.

De nombreux appareils Wear OS utilisent des écrans ronds, ce qui rend plus difficile la visibilité des éléments de liste qui apparaissent en haut et en bas de l'écran. C'est la raison pour laquelle Compose pour Wear OS inclut une version de la classe LazyColumn appelée TransformingLazyColumn, qui prend en charge les animations de mise à l'échelle et de morphing. Lorsque les éléments se déplacent vers les bords, ils deviennent plus petits et s'estompent.

Pour appliquer les effets de mise à l'échelle et de défilement recommandés :

  1. Utilisez Modifier.transformedHeight pour permettre à Compose de calculer le changement de hauteur lorsque l'élément défile sur l'écran.
  2. Utilisez transformation = SurfaceTransformation(transformationSpec) pour appliquer les effets visuels, y compris la réduction de la taille du contenu de l'élément.
  3. Utilisez un TransformationSpec personnalisé pour les composants qui ne prennent pas transformation comme paramètre, tels que Text.

L'animation suivante montre comment un élément de liste est mis à l'échelle et change de forme lorsqu'il s'approche du haut et du bas de l'écran :

L'extrait de code suivant montre comment créer une liste à l'aide de TransformingLazyColumn mise en page pour créer du contenu qui s'affiche correctement sur différentes tailles d'écran Wear OS.

L'extrait montre également l'utilisation du modificateur minimumVerticalContentPadding, que vous devez définir sur les éléments de liste pour appliquer le remplissage correct en haut et en bas de la liste.

Pour afficher l'indicateur de défilement, partagez le columnState entre le ScreenScaffold et le 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,
                )
            }
        }
    }
}

Ajouter un effet d'ancrage et de glissement

L'ancrage garantit que lorsqu'un utilisateur termine un geste de défilement ou de glissement, la liste s'arrête avec un élément positionné précisément à un point spécifique, généralement au centre de l'écran. Sur les écrans ronds, où les éléments sont mis à l'échelle et se transforment à mesure qu'ils s'éloignent du centre, l'ancrage est particulièrement utile pour s'assurer que l'élément le plus pertinent reste entièrement visible et lisible dans la zone de visualisation optimale.

Pour ajouter un comportement d'ancrage et de glissement, définissez le paramètre flingBehavior sur TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Définissez le rotaryScrollableBehavior pour qu'il corresponde, en utilisant RotaryScrollableDefaults.snapBehavior(columnState) pour une expérience cohérente lorsque vous utilisez la couronne ou la lunette physique.

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

Mise en page inversée

Par défaut, une liste déroulante s'ancre à son bord supérieur. Si un utilisateur a fait défiler une liste standard jusqu'en bas et qu'un nouvel élément est ajouté à la fin, la liste conserve la vue de l'utilisateur sur l'élément actuel. Par exemple, si l'utilisateur consulte l'élément 10 en bas de l'écran et que l'élément 11 est ajouté, la vue reste axée sur l'élément 10, et l'élément 11 apparaît hors écran sous la vue actuelle.

Pour les cas d'utilisation tels que les applications de messagerie ou les journaux en direct, ce comportement n'est généralement pas souhaité. Lorsque de nouveaux éléments arrivent, les utilisateurs souhaitent généralement voir immédiatement le contenu le plus récent s'ils se trouvent déjà en bas de la liste. Si de nombreux éléments arrivent en même temps, la liste doit passer à l'élément le plus récent en bas (ce qui signifie que certains éléments intermédiaires peuvent ne pas s'afficher du tout, sauf si l'utilisateur fait défiler la liste vers le haut).

Pour prendre en charge ces cas d'utilisation, TransformingLazyColumn vous permet d'inverser la mise en page en définissant reverseLayout = true. Cela modifie l'ancrage de la liste, qui passe du bord supérieur au bord inférieur.

Pour plus de commodité, la définition de reverseLayout = true inverse également l'ordre visuel des éléments et le sens des gestes de défilement :

  • Les éléments sont composés de bas en haut, ce qui signifie que l'index 0 apparaît en bas de l'écran.
  • Faire défiler la liste vers le haut révèle les éléments avec des index plus élevés.

Pour ajouter un comportement d'ancrage et de glissement avec une mise en page inversée, vous pouvez combiner flingBehavior et rotaryScrollableBehavior, comme illustré dans l'extrait suivant :

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")
            }
        }
    }
}

Les images suivantes montrent la différence entre une liste normale et une liste inversée :

Un TransformingLazyColumn avec une mise en page normale, affichant l'élément 1 en haut et les éléments dans l'ordre croissant.
Figure 1. Mise en page de liste standard où le contenu est rempli de haut en bas.
Un TransformingLazyColumn avec une mise en page inversée, montrant l'élément 1 en bas et les éléments dans l'ordre décroissant vers le haut.
Figure 2. Mise en page de liste inversée où le contenu est rempli de bas en haut.