Pager orizzontali in Jetpack Compose Glimmer

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Occhiali con display
Scopri di più sui tipi di dispositivi XR →

In Jetpack Compose Glimmer, GlimmerHorizontalPager è un layout a composizione pigra e scorrevole orizzontalmente che dispone le pagine in sequenza. È simile allo standard HorizontalPager presente in Compose Foundation, ma è personalizzato per gli occhiali con display con comportamenti e valori predefiniti di Glimmer.

Per impostazione predefinita, viene visualizzata in modo prominente una sola pagina alla volta. Per offrire un'esperienza ottimale, il pager utilizza animazioni di snap per garantire che una pagina si posizioni sempre esattamente nei limiti della finestra di visualizzazione al termine del gesto di scorrimento dell'utente.

Figura 1. Un esempio di GlimmerHorizontalPager.

Parametri chiave e opzioni di layout

Un GlimmerHorizontalPager fornisce parametri personalizzabili per controllare la spaziatura, l'allineamento del layout e il caricamento lento. Alcuni di questi parametri sono:

Parametro Descrizione

state

Un oggetto GlimmerPagerState che gestisce, osserva e controlla a livello di programmazione la posizione di scorrimento e la pagina attiva del pager.

contentPadding

Spazio interno applicato ai limiti dei contenuti complessivi dopo il ritaglio, utile per aggiungere uno spazio interno sul bordo iniziale o finale prima della prima pagina o dopo l'ultima pagina.

pageSpacing

La spaziatura orizzontale tra le singole pagine del pager.

pageIndicator

Uno slot componibile che esegue il rendering dell'indicatore della pagina attiva. Il valore predefinito è GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Il numero di pagine da comporre e disporre oltre la finestra di visualizzazione visibile come ottimizzazione del precaricamento. Evita di impostare valori elevati per preservare l'efficienza della composizione pigra.

Per informazioni su tutti i parametri disponibili , consulta la documentazione di riferimento completa.

Consigli per il movimento del testo animato

Durante le animazioni di snap e le transizioni del pager sugli occhiali con display, il rendering del testo predefinito può mostrare artefatti di pixel-snapping. L'impostazione di TextMotion.Animated garantisce un rendering uniforme durante le animazioni del layout:

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

Esempio: pager orizzontale

Il seguente codice mostra come creare un pager orizzontale di base con 10 pagine, inserendo una scheda in ogni pagina:

// 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),
        )
    }
}

Punti chiave sul codice

  • Stato: inizializza un GlimmerPagerState utilizzando rememberGlimmerPagerState(pageCount = { 10 }) per gestire lo stato del pager.
  • Contenuto dello slot della pagina: riceve l'indice della pagina page all'interno della GlimmerPagerScope lambda per eseguire il rendering di ogni scheda.
  • Stile del testo dell'animazione fluida: copia LocalTextStyle.current e attiva esplicitamente TextMotion.Animated.
  • Indicatore di pagina automatico: a differenza dei pager Compose standard che richiedono un componente indicatore esterno, GlimmerHorizontalPager incorpora automaticamente un indicatore di pagina in stile punto per impostazione predefinita.

Indicatori di pagina

Per impostazione predefinita, GlimmerHorizontalPager esegue il rendering di un indicatore di pagina basato su punti utilizzando GlimmerHorizontalPagerDefaults.PageIndicator. L'indicatore adatta automaticamente la combinazione di colori:

  • Il punto attivo utilizza il colore dei contenuti risolto dalla circostante più vicina surface.

Puoi passare un PageIndicator personalizzato per specificare colori espliciti o sostituire il punto con il tuo layout personalizzato:

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),
        )
    }
)