Carruseles horizontales en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Lentes de visualización
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, GlimmerHorizontalPager es un diseño componible de forma diferida y desplazable horizontalmente que organiza sus páginas de forma secuencial. Es similar al HorizontalPager estándar que se encuentra en Compose Foundation, pero está diseñado para lentes de visualización con comportamientos y valores predeterminados de Glimmer.

De forma predeterminada, solo se muestra una página de forma destacada a la vez. Para proporcionar una experiencia optimizada, el paginador usa animaciones de ajuste para garantizar que una página siempre se ajuste exactamente a los límites de la ventana gráfica después de que finalice el gesto de desplazamiento de un usuario.

Figura 1. Un ejemplo de GlimmerHorizontalPager.

Parámetros clave y opciones de diseño

Un GlimmerHorizontalPager proporciona parámetros personalizables para controlar el espaciado, la alineación del diseño y la carga diferida. Algunos de estos parámetros son los siguientes:

Parámetro Descripción

state

Un objeto GlimmerPagerState que administra, observa y controla de forma programática la posición de desplazamiento y la página activa del paginador.

contentPadding

Es el padding que se aplica alrededor de los límites generales del contenido después del recorte, lo que resulta útil para agregar padding de borde inicial o final antes de la primera página o después de la última.

pageSpacing

Es el espaciado horizontal entre las páginas individuales del paginador.

pageIndicator

Es un espacio componible que renderiza el indicador de página activa. La configuración predeterminada es GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Es la cantidad de páginas que se componen y diseñan más allá de la ventana gráfica visible como una optimización de carga previa. Evita establecer valores grandes para preservar la eficiencia de la composición diferida.

Consulta la documentación de referencia completa para obtener información sobre todos los parámetros disponibles.

Recomendación de movimiento de texto animado

Durante las animaciones de ajuste y las transiciones del paginador en los lentes de visualización, la renderización de texto predeterminada puede mostrar artefactos de ajuste de píxeles. Configurar TextMotion.Animated garantiza una renderización fluida en las animaciones de diseño:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

Ejemplo: Paginador horizontal

En el siguiente código, se muestra cómo crear un paginador horizontal básico con 10 páginas, colocando una tarjeta dentro de cada página:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

Puntos clave sobre el código

  • Estado: Inicializa un GlimmerPagerState con rememberGlimmerPagerState(pageCount = { 10 }) para administrar el estado del paginador.
  • Contenido del espacio de página: Recibe el índice de página page dentro de la GlimmerPagerScope expresión lambda para renderizar cada tarjeta.
  • Estilo de texto de animación fluida: Copia LocalTextStyle.current y habilita explícitamente TextMotion.Animated.
  • Indicador de página automático: A diferencia de los paginadores de Compose estándares que requieren un componente indicador externo, GlimmerHorizontalPager incorpora automáticamente un indicador de página de estilo de puntos de forma predeterminada.

Indicadores de página

De forma predeterminada, GlimmerHorizontalPager renderiza un indicador de página basado en puntos con GlimmerHorizontalPagerDefaults.PageIndicator. El indicador adapta automáticamente su esquema de colores:

  • El punto activo usa el color de contenido resuelto del surface circundante más cercano.

Puedes pasar un PageIndicator personalizado para especificar colores explícitos o reemplazar el punto por tu propio diseño personalizado:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)