Вкладки

Вкладки позволяют упорядочивать группы связанного контента. Существует два типа вкладок:

• Основные вкладки размещаются в верхней части панели контента под верхней панелью приложения. Они показывают основные разделы контента и используются, когда нужен только один набор вкладок.
• Вторичные вкладки используются в области контента, чтобы разделить связанный контент и установить иерархию. Они необходимы, когда на экране требуется более одного уровня вкладок.

Рисунок 1. Основные (1) и дополнительные (2) вкладки.

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

API surface

Используйте composable-функции Tab, PrimaryTabRow и SecondaryTabRow, чтобы реализовать вкладки. Composable-функция Tab представляет отдельную вкладку в строке и обычно используется внутри PrimaryTabRow (для вкладок с основным индикатором) или SecondaryTabRow (для вкладок с дополнительным индикатором).

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

• selected определяет, выделена ли текущая вкладка визуально.
• onClick() – обязательная лямбда-функция, которая определяет действие, выполняемое при нажатии на вкладку. Обычно здесь обрабатываются события навигации, обновляется состояние выбранной вкладки или загружается соответствующий контент.
• text – текст на вкладке. Необязателен.
• icon – на вкладке показывается значок. Необязателен.
• enabled – определяет, включена ли вкладка и можно ли с ней взаимодействовать. Если задано значение False, вкладка будет неактивна и не будет реагировать на нажатия.

Пример: навигация на основе вкладок

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

Примечание. Полный исходный код включает код, который устанавливает базовую структуру навигации для следующего примера.

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

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

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

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

Результат

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

Рисунок 2. Три вкладки: "Треки", "Альбомы" и "Плейлисты".

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

• Material 3 – вкладки
• Навигация с помощью Compose