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) ) } }
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 estLightGray
. - Le composable
Text
dansHorizontalPager
affiche le texte "Page: [numéro de page]" sur chaque page.
Résultats
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:

Afficher une liste ou une grille
