Панель навигации

Панель навигации позволяет пользователям переключаться между разделами приложения. Ее следует использовать:

  • Три–пять пунктов назначения одинаковой важности.
  • Компактные размеры окон
  • Единые целевые страницы для всех экранов приложения
Панель навигации с четырьмя пунктами назначения. У каждого пункта назначения есть название-плейсхолдер "Ярлык". Выбранный пункт назначения отмечен значком круга, а остальные – треугольниками.
Рисунок 1. Панель навигации с четырьмя пунктами назначения.

На этой странице показано, как отобразить панель навигации в приложении со связанными экранами и базовой навигацией.

API surface

Используйте composable-функции NavigationBar и NavigationBarItem, чтобы реализовать логику переключения между пунктами назначения. Каждый объект NavigationBarItem представляет собой отдельный пункт назначения.

NavigationBarItem включает следующие основные параметры:

  • selected: определяет, выделен ли текущий элемент визуально.
  • onClick() – определяет действие, которое выполняется, когда пользователь нажимает на элемент. Здесь должна быть логика для обработки событий навигации, обновления состояния выбранного элемента или загрузки соответствующего контента.
  • label – текст, который будет показываться в элементе. Необязателен.
  • icon: показывает значок в элементе. Необязателен.

Пример: нижняя панель навигации

В следующем фрагменте кода реализована нижняя панель навигации с элементами, позволяющими пользователям перемещаться между различными экранами в приложении:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}

Основные положения

  • NavigationBar показывает коллекцию элементов, каждый из которых соответствует Destination.
  • val navController = rememberNavController() создает и запоминает экземпляр NavHostController, который управляет навигацией в NavHost.
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } управляет состоянием выбранного элемента.
    • startDestination.ordinal возвращает числовой индекс (позицию) записи перечисления Destination.SONGS.
  • При нажатии на элемент вызывается navController.navigate(route = destination.route) для перехода к соответствующему экрану.
  • Лямбда-выражение onClick элемента NavigationBarItem обновляет состояние selectedDestination, чтобы визуально выделить выбранный элемент.
  • Логика навигации вызывает composable-функцию AppNavHost, передавая navController и startDestination, чтобы показать контент выбранного экрана.

Результат

На изображении ниже показана панель навигации, созданная с помощью предыдущего фрагмента кода.

Экран приложения с тремя целевыми страницами, перечисленными горизонтально на нижней панели навигации: "Песни", "Альбом" и "Плейлист". Рядом с каждым пунктом назначения есть значок, например нота рядом с пунктом "Треки".
Рисунок 2. Панель навигации, которая содержит три раздела со значками: "Треки", "Альбом" и "Плейлист".

Дополнительные ресурсы