Ajouter un indicateur de page personnalisé

Les indicateurs de page permettent d'aider les utilisateurs à comprendre leur position actuelle dans le contenu de votre application, en leur fournissant une indication visuelle de leur progression. Ces repères de navigation sont utiles lorsque vous présentez du contenu de manière séquentielle, comme les implémentations de carrousels, les galeries d'images et les diaporamas, ou la pagination dans les listes.

Compatibilité des versions

Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.

Dépendances

Créer un pager horizontal avec un indicateur de page personnalisé

Le code suivant crée un pager horizontal avec un indicateur de page, qui donne à l'utilisateur des repères visuels sur le nombre de pages et la page visible:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

Points clés concernant le code

  • Le code implémente un HorizontalPager, qui vous permet de balayer horizontalement entre différentes pages de contenu. Dans ce cas, chaque page affiche le numéro de page.
  • La fonction rememberPagerState() initialise le pager et définit le nombre de pages sur 4. Cette fonction crée un objet d'état qui suit la page actuelle et vous permet de contrôler le pager.
  • La propriété pagerState.currentPage permet de déterminer quel indicateur de page doit être mis en surbrillance.
  • L'indicateur de page s'affiche dans un pager superposé à une implémentation Row.
  • Un cercle de 16 dp est dessiné pour chaque page du pager. L'indicateur de la page actuelle est affiché sous la forme DarkGray, tandis que le reste des cercles d'indicateur est LightGray.
  • Le composable Text dans HorizontalPager affiche le texte "Page: [numéro de page]" sur chaque page.

Résultats

Figure 1 Un pager affichant un indicateur circulaire sous le contenu.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.
Collection de guides rapides
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Envoyer des commentaires