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

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

  • Три-пять направлений одинаковой важности
  • Компактные размеры окон
  • Единый список пунктов назначения на всех экранах приложения.
Панель навигации с 4 пунктами назначения. Каждый пункт назначения имеет имя-заполнитель под названием «Метка», при этом выбранный пункт назначения отображается в виде круглой иконки, а остальные — в виде треугольников.
Рисунок 1. Панель навигации с 4 пунктами назначения.

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

Поверхность API

Используйте компонуемые объекты 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))
    }
}
Navigation.kt

Ключевые моменты

  • 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 , чтобы визуально выделить нажатый элемент.
  • Логика навигации вызывает составной объект AppNavHost , передавая ему navController и startDestination , для отображения фактического содержимого выбранного экрана.

Результат

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

Экран приложения с тремя горизонтально расположенными разделами в нижней панели навигации: «Песни», «Альбом» и «Плейлист». Каждому разделу соответствует соответствующий значок (например, нота для раздела «Песни»).
Рисунок 2. Панель навигации, содержащая 3 раздела с соответствующими значками: Песни, Альбом и Плейлист.

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