Android Academy · Урок

Нижняя навигация

Создавайте нижнюю навигацию со вкладками

«Нижняя навигация» — бесплатный урок Android Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.

Нижние панели навигации

Во многих приложениях основные разделы размещаются в нижней панели навигации. Compose предоставляет для этого NavigationBar и NavigationBarItem.

NavigationBar

NavigationBar — это контейнер, который обычно помещают в слот bottomBar компонента Scaffold. Он содержит несколько элементов NavigationBarItem.

NavigationBar {
    // items go here
}

NavigationBarItem

Каждая вкладка — это NavigationBarItem с icon, необязательным label, флагом selected и обработчиком onClick.

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

Моделирование вкладок

Определите вкладки как данные, чтобы перебирать их в цикле. Для этого хорошо подойдёт простой класс данных с маршрутом, названием и значком.

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

Отслеживание текущего маршрута

Чтобы выделить активную вкладку, нужен текущий маршрут. Получите его из текущей записи стека возврата контроллера.

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

Отметка выбранной вкладки

Сравнивайте маршрут каждой вкладки с currentRoute и устанавливайте флаг selected, чтобы панель выделяла нужный элемент.

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

Предотвращение разрастания стека возврата

Повторные нажатия на вкладки не должны накапливать назначения. При переходе между вкладками используйте popUpTo для начального назначения вместе с launchSingleTop.

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

saveState / restoreState

saveState и restoreState сохраняют положение прокрутки и состояние каждой вкладки при переходе на другую вкладку и обратно — это ожидаемое поведение для нижних вкладок.

Интеграция со Scaffold

Оберните всё в Scaffold. Поместите панель в bottomBar, а NavHost — в содержимое, используя предоставленные отступы, чтобы содержимое не скрывалось за панелью.

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

Перебор элементов

Создайте панель, перебирая список вкладок. Это позволяет сохранить код коротким и единообразным.

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

Соберём всё вместе

Полностью подключённая нижняя панель, связанная с контроллером и выделяющая активную вкладку.

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

Быстрая проверка

Как определить, для какого NavigationBarItem нужно установить selected?

Повторение

Нижняя навигация:

NavigationBar содержит элементы NavigationBarItem.
Отслеживайте активную вкладку через currentBackStackEntryAsState() и устанавливайте selected.
Используйте popUpTo + launchSingleTop + saveState/restoreState для удобного переключения вкладок.
Размещайте панель в bottomBar компонента Scaffold.

Часто задаваемые вопросы

Урок «Нижняя навигация» бесплатный?

Да — полный текст урока «Нижняя навигация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.

Чему я научусь в уроке «Нижняя навигация»?

Создавайте нижнюю навигацию со вкладками Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Нижняя навигация»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy