Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Crea una lista de paginación para que los usuarios puedan desplazarse y acceder a contenido demasiado grande para caber en una sola pantalla. Las listas de paginación horizontal pueden ayudar a los usuarios a navegar por contenido, como imágenes, presentaciones de diapositivas o carruseles de productos. Las listas de paginación vertical son útiles para las apps con mucho contenido en las que los usuarios pueden necesitar desplazarse por una gran cantidad de elementos, como artículos.
Compatibilidad de versiones
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Cómo crear una lista de paginación
Puedes configurar una lista de paginación horizontal o vertical, según la orientación requerida para tu app. El siguiente código crea una lista de paginación horizontal que muestra 10 elementos:
Puntos clave sobre el código
El elemento componible HorizontalPager proporciona una lista de elementos desplazable horizontalmente.
Para crear una lista de paginación vertical, usa el elemento VerticalPager componible.
Cada página de la lista contiene un objeto Text que muestra la cadena "Página" y el número de índice de la página.
Una instancia de rememberPagerState() conserva el estado de una página cuando el usuario sale de ella y muestra la misma página cuando el usuario regresa a ella.
Resultados
Figura 1: Demostración de HorizontalPager.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Cómo mostrar una lista o una cuadrícula
Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir para los usuarios.
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-02-06 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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)"]]
