Agrega un indicador de página personalizado

Con los indicadores de página, puedes ayudar a los usuarios a comprender su posición actual dentro del contenido de tu app y proporcionar una indicación visual del progreso. Estas indicaciones de navegación son útiles cuando presentas contenido de forma secuencial, como implementaciones de carruseles, galerías de imágenes y presentaciones de diapositivas, o paginación en listas.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea un selector horizontal con un indicador de página personalizado

El siguiente código crea un paginador horizontal que tiene un indicador de página, lo que le brinda al usuario indicaciones visuales sobre cuántas páginas hay y cuál es 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

Puntos clave sobre el código

  • El código implementa un HorizontalPager, que te permite deslizar el dedo horizontalmente entre diferentes páginas de contenido. En este caso, cada página muestra el número de página.
  • La función rememberPagerState() inicializa el paginador y establece la cantidad de páginas en 4. Esta función crea un objeto de estado que realiza un seguimiento de la página actual y te permite controlar el paginador.
  • La propiedad pagerState.currentPage se usa para determinar qué indicador de página se debe destacar.
  • El indicador de página aparece en un paginador superpuesto por una implementación de Row.
  • Se dibuja un círculo de 16 dp para cada página del selector de páginas. El indicador de la página actual se muestra como DarkGray, mientras que el resto de los círculos de indicadores son LightGray.
  • El elemento componible Text dentro de HorizontalPager muestra el texto "Página: [número de página]" en cada página.

Resultados

Figura 1: Páginador que muestra un indicador de círculo debajo del contenido.

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:

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.
Colección de guías rápidas
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.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios