Adicionar um indicador de página personalizado

Com os indicadores de página, você pode ajudar os usuários a entender a posição atual no conteúdo do app, fornecendo uma indicação visual do progresso. Essas indicações de navegação são úteis quando você apresenta conteúdo sequencialmente, como implementações de carrossel, galerias de imagens e apresentações de slides ou paginação em listas.

Compatibilidade de versões

Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou mais recente.

Dependências

Criar um seletor horizontal com um indicador de página personalizado

O código abaixo cria um seletor horizontal com um indicador de página, fornecendo indicações visuais ao usuário sobre quantas páginas existem e qual delas está visível:

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

Pontos principais sobre o código

  • O código implementa um HorizontalPager, que permite deslizar horizontalmente entre diferentes páginas de conteúdo. Nesse caso, cada página mostra o número da página.
  • A função rememberPagerState() inicializa o paginador e define o número de páginas como 4. Essa função cria um objeto de estado que rastreia a página atual e permite controlar o pageador.
  • A propriedade pagerState.currentPage é usada para determinar qual indicador de página deve ser destacado.
  • O indicador de página aparece em um pager sobreposto por uma implementação Row.
  • Um círculo de 16 dp é desenhado para cada página no pager. O indicador da página atual é exibido como DarkGray, enquanto o restante dos círculos do indicador são LightGray.
  • O elemento combinável Text no HorizontalPager mostra o texto "Página: [número da página]" em cada página.

Resultados

Figura 1. Leitor mostrando um indicador de círculo abaixo do conteúdo.

Coleções que contêm este guia

Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem metas mais amplas de desenvolvimento para Android:

As listas e as grades permitem que o app exiba coleções de uma forma agradável e fácil de consumir.
Coletânea de guias rápidos
Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback