Android Academy · Aula

Navegação inferior

Crie uma navegação inferior com abas.

Navegação inferior é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

Barras de navegação inferior

Muitos aplicativos colocam suas seções principais em uma barra de navegação inferior. O Compose fornece NavigationBar e NavigationBarItem para isso.

NavigationBar

NavigationBar é o contêiner, geralmente colocado no espaço bottomBar de um Scaffold. Ele contém vários NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Cada aba é um NavigationBarItem com um icon, um label opcional, uma indicação selected e um onClick.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Modelando as abas

Defina suas abas como dados para poder percorrê-las em um loop. Uma classe de dados simples com uma rota, um rótulo e um ícone funciona bem.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Acompanhando a rota atual

Para destacar a aba ativa, você precisa da rota atual. Leia-a da entrada atual da pilha de retorno do controlador.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Marcando a aba selecionada

Compare a rota de cada aba com currentRoute para definir a indicação selected, fazendo com que a barra destaque o item correto.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Evitando o acúmulo na pilha de retorno

Tocar repetidamente nas abas não deve acumular destinos. Use popUpTo no destino inicial e também launchSingleTop ao navegar entre abas.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState e restoreState preservam a posição de rolagem e o estado de cada aba quando você sai dela e retorna, que é o comportamento esperado para abas inferiores.

Integração com Scaffold

Envolva tudo em um Scaffold. Coloque a barra em bottomBar e o NavHost no conteúdo, usando o preenchimento fornecido para que o conteúdo não fique oculto atrás da barra.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Percorrendo os itens

Crie a barra percorrendo a lista de abas, o que mantém o código curto e consistente.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Reunindo tudo

Barra inferior completa conectada a um controlador, com destaque para a aba ativa.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Verificação rápida

Como você sabe qual NavigationBarItem deve marcar como selected?

Recapitulação

Navegação inferior:

NavigationBar contém NavigationBarItem.
Acompanhe a aba ativa por meio de currentBackStackEntryAsState() e defina selected.
Use popUpTo + launchSingleTop + saveState/restoreState para alternar entre abas sem acúmulo.
Coloque-a no bottomBar de um Scaffold.

Perguntas Frequentes

A aula “Navegação inferior” é grátis?

Sim — o texto completo de “Navegação inferior” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Navegação inferior”?

Crie uma navegação inferior com abas. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Android Academy?

Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Navegação inferior”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Android Academy?

Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Android Academy