Aggiungere un indicatore di pagina personalizzato

Utilizzando gli indicatori di pagina, puoi aiutare gli utenti a comprendere la loro posizione corrente all'interno dei contenuti della tua app, fornendo un'indicazione visiva dell'avanzamento. Questi indicatori di navigazione sono utili quando presenti i contenuti in sequenza, ad esempio implementazioni di caroselli, gallerie di immagini e presentazioni di diapositive o la paginazione negli elenchi.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Creare un cursore orizzontale con un indicatore di pagina personalizzato

Il seguente codice crea un selettore di pagine orizzontale con un indicatore di pagina, che fornisce all'utente indicazioni visive sul numero di pagine e su quale pagina è visibile:

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

Punti chiave del codice

  • Il codice implementa un HorizontalPager, che ti consente di scorrere horizontalmente tra diverse pagine di contenuti. In questo caso, ogni pagina visualizza il numero di pagina.
  • La funzione rememberPagerState() inizializza il pager e imposta il numero di pagine su 4. Questa funzione crea un oggetto stato che monitora la pagina corrente e ti consente di controllare il pager.
  • La proprietà pagerState.currentPage viene utilizzata per determinare quale indicatore di pagina deve essere evidenziato.
  • L'indicatore di pagina viene visualizzato in un selettore di pagine sovrapposto da un'implementazione Row.
  • Viene disegnato un cerchio di 16 dp per ogni pagina del selettore di pagine. L'indicatore della pagina corrente viene visualizzato come DarkGray, mentre gli altri cerchi dell'indicatore sono LightGray.
  • L'elemento componibile Text all'interno di HorizontalPager mostra il testo "Pagina: [numero di pagina]" su ogni pagina.

Risultati

Figura 1. Paginatore che mostra un indicatore circolare sotto i contenuti.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Elenchi e griglie consentono alla tua app di mostrare le raccolte in un formato piacevole dal punto di vista visivo e facilmente fruibile dagli utenti.
Collezione di guide rapide
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback