Pagers horizontaux dans Jetpack Compose Glimmer

Appareils XR concernés
Ces conseils vous aident à créer des expériences pour ces types d'appareils XR.
En savoir plus sur les types d'appareils XR →
Lunettes d'affichage
En savoir plus sur les types d'appareils XR →

Dans Jetpack Compose Glimmer, GlimmerHorizontalPager est une mise en page à composition différée et à défilement horizontal qui organise ses pages de manière séquentielle. Elle est semblable à la mise en page standard HorizontalPager disponible dans Compose Foundation, mais adaptée aux lunettes d'affichage avec des comportements et des valeurs par défaut Glimmer.

Par défaut, une seule page est affichée de manière visible à la fois. Pour offrir une expérience soignée, le pager utilise des animations d'ancrage afin de s'assurer qu'une page s'affiche toujours exactement dans les limites de la fenêtre d'affichage une fois le geste de défilement de l'utilisateur terminé.

Figure 1. Exemple de GlimmerHorizontalPager.

Paramètres clés et options de mise en page

Un GlimmerHorizontalPager fournit des paramètres personnalisables pour contrôler l'espacement, l'alignement de la mise en page et le chargement différé. Voici quelques-uns de ces paramètres :

Paramètre Description

state

Un GlimmerPagerState objet qui gère, observe et contrôle par programmation la position de défilement et la page active du pager.

contentPadding

Marge intérieure appliquée autour des limites globales du contenu après le découpage, utile pour ajouter une marge intérieure de début ou de fin avant la première page ou après la dernière page.

pageSpacing

Espacement horizontal entre les pages individuelles du pager.

pageIndicator

Emplacement composable affichant l'indicateur de page active. La valeur par défaut est GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Nombre de pages à composer et à mettre en page au-delà de la fenêtre d'affichage visible en tant qu'optimisation de préchargement. Évitez de définir des valeurs élevées pour préserver l'efficacité de la composition différée.

Pour en savoir plus sur tous les paramètres disponibles , consultez la documentation de référence complète .

Recommandation concernant l'animation du texte

Lors des animations d'ancrage et des transitions du pager sur les lunettes d'affichage, le rendu de texte par défaut peut présenter des artefacts d'ancrage de pixels. La définition de TextMotion.Animated garantit un rendu fluide tout au long des animations de mise en page :

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

Exemple : Pager horizontal

Le code suivant montre comment créer un pager horizontal de base avec 10 pages, en plaçant une carte dans chaque page :

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

Points clés concernant le code

  • État : initialise un GlimmerPagerState à l'aide de rememberGlimmerPagerState(pageCount = { 10 }) pour gérer l'état du pager.
  • Contenu de l'emplacement de la page : reçoit l'index de la page page dans le GlimmerPagerScope lambda pour afficher chaque carte.
  • Style de texte d'animation fluide : copie LocalTextStyle.current et active explicitement TextMotion.Animated.
  • Indicateur de page automatique : contrairement aux pagers Compose standards qui nécessitent un composant d'indicateur externe, GlimmerHorizontalPager intègre automatiquement un indicateur de page de style pointillé par défaut.

Indicateurs de page

Par défaut, GlimmerHorizontalPager affiche un indicateur de page basé sur des points à l'aide de GlimmerHorizontalPagerDefaults.PageIndicator. L'indicateur adapte automatiquement son jeu de couleurs :

  • Le point actif utilise la couleur de contenu résolue à partir de la surface environnante la plus proche surface.

Vous pouvez transmettre un PageIndicator personnalisé pour spécifier des couleurs explicites ou remplacer le point par votre propre mise en page personnalisée :

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)