Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
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.
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
Figure 1 Démonstration de 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:
Afficher une liste ou une grille
Les listes et les grilles permettent à votre application d'afficher des collections sous une forme visuellement attrayante et facile à utiliser pour les utilisateurs.
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.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["# Display a paging list\n\n\u003cbr /\u003e\n\nCreate a paging list so that users can scroll to access content too large to fit\non a single screen. Horizontal paging lists can help users navigate through\ncontent such as images, slideshows, or product carousels. Vertical paging lists\nare useful for content-heavy apps where users may need to scroll through a large\nnumber of items, such as articles.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a paging list\n--------------------\n\nYou can configure a horizontal or vertical paging list, depending on the\norientation required for your app. The following code creates a horizontal\npaging list displaying 10 items:\n\n val pagerState = rememberPagerState(pageCount = {\n 10\n })\n HorizontalPager(state = pagerState) { page -\u003e\n Text(\n text = \"Page: $page\",\n modifier = Modifier.fillMaxWidth()\n )\n }\n\n### Key points about the code\n\n- The [`HorizontalPager`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#HorizontalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,kotlin.Function2)) composable provides a horizontally scrollable list of items.\n - To create a vertical paging list, use the [`VerticalPager`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#VerticalPager(androidx.compose.foundation.pager.PagerState,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.pager.PageSize,kotlin.Int,androidx.compose.ui.unit.Dp,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.foundation.gestures.snapping.SnapPosition,kotlin.Function2)) composable instead.\n- Each page in the list contains a [`Text`](/reference/kotlin/androidx/compose/material/package-summary#Text(androidx.compose.ui.text.AnnotatedString,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.collections.Map,kotlin.Function1,androidx.compose.ui.text.TextStyle)) object that displays the string \"Page\" and the page index number.\n- An instance of [`rememberPagerState()`](/reference/kotlin/androidx/compose/foundation/pager/package-summary#rememberPagerState(kotlin.Int,kotlin.Float)) persists a page's state when the user navigates away, and displays the same page when the user returns to it.\n\nResults\n-------\n\n**Figure 1.** Demo of `HorizontalPager`.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display a list or grid\n\nLists and grids allow your app to display collections in a visually pleasing form that's easy for users to consume. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-a-list-or-grid) \n\n### Display interactive components\n\nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\n### Compose basics (video collection)\n\nThis series of videos introduces various Compose APIs, quickly showing you what's available and how to use them. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/compose-basics) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
