Créez une liste de pagination afin que les utilisateurs puissent faire défiler l'écran pour accéder à un contenu trop volumineux pour tenir sur un seul écran. Les listes de pagination horizontale peuvent aider les utilisateurs à parcourir des contenus tels que des images, des diaporamas ou des carrousels de produits. Les listes de pagination verticale sont utiles pour les applications contenant beaucoup de contenu, où les utilisateurs peuvent avoir besoin de faire défiler un grand nombre d'éléments, tels que des articles.
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 une liste de pagination
Vous pouvez configurer une liste de pagination horizontale ou verticale, en fonction de l'orientation requise pour votre application. Le code suivant crée une liste de pagination horizontale affichant 10 éléments:
Points clés concernant le code
- Le composable
HorizontalPager
fournit une liste d'éléments à faire défiler horizontalement.- Pour créer une liste de pagination verticale, utilisez plutôt le composable
VerticalPager
.
- Pour créer une liste de pagination verticale, utilisez plutôt le composable
- Chaque page de la liste contient un objet
Text
qui affiche la chaîne "Page" et le numéro d'index de la page. - Une instance de
rememberPagerState()
conserve l'état d'une page lorsque l'utilisateur quitte la page et affiche la même page lorsque l'utilisateur y revient.
Résultats
HorizontalPager
.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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fr)
Afficher une liste ou une grille
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fr)
Afficher des composants interactifs
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=fr)