Панели приложений

Панели приложений — это контейнеры, которые предоставляют пользователю доступ к ключевым функциям и элементам навигации. Существует два типа панелей приложений: верхняя панель приложений и нижняя панель приложений. Их внешний вид и назначение следующие:

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

Рис. 1. Верхняя панель приложений (слева) и нижняя панель приложений (справа).

Чтобы реализовать верхнюю и нижнюю панель приложения, используйте составные элементы TopAppBar и BottomAppBar соответственно. Они позволяют создавать согласованные интерфейсы, инкапсулирующие навигацию и элементы управления действиями и соответствующие принципам Material Design.

Важно: Панели приложений обычно передаются в составной компонент Scaffold , который имеет определенные параметры для их получения. Для получения дополнительной информации о том, как Scaffold предоставляет удобный способ структурирования вашего приложения, посетите страницу Scaffold .

Лучшие панели приложений

В следующей таблице представлены четыре типа верхних панелей приложений:

Тип	Пример
Маленький : для экранов, которые не требуют большого количества навигации или действий.
По центру : для экранов с одним основным действием.
Средний : для экранов, требующих умеренного количества навигации и действий.
Большой : для экранов, требующих большого количества навигации и действий.

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

Различные составные элементы, позволяющие реализовать четыре разные верхние панели приложений, очень похожи. У них есть несколько общих ключевых параметров:

• title : текст, который отображается на панели приложения.
• navigationIcon : основной значок для навигации. Появляется слева от панели приложений.
• actions : значки, которые предоставляют пользователю доступ к ключевым действиям. Они появляются справа от панели приложения.
• scrollBehavior : определяет, как верхняя панель приложения реагирует на прокрутку внутреннего содержимого каркаса.
• colors : определяет, как будет выглядеть панель приложения.

Поведение прокрутки

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

Существует три типа TopAppBarScrollBehavior . Они заключаются в следующем:

• enterAlwaysScrollBehavior : когда пользователь извлекает внутреннее содержимое каркаса, верхняя панель приложения сворачивается. Панель приложения расширяется, когда пользователь затем опускает внутреннее содержимое.
• exitUntilCollapsedScrollBehavior : аналогично enterAlwaysScrollBehavior , однако панель приложения дополнительно расширяется, когда пользователь достигает конца внутреннего содержимого каркаса.
• pinnedScrollBehavior : панель приложения остается на месте и не реагирует на прокрутку.

Следующие примеры реализуют некоторые из этих вариантов.

Примеры

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

Маленький

Чтобы создать небольшую верхнюю панель приложения, используйте составной элемент TopAppBar . Это простейшая верхняя панель приложения, которая в данном примере содержит только заголовок.

В следующем примере TopAppBar не передается значение для scrollBehavior и поэтому не реагирует на прокрутку внутреннего содержимого.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Эта реализация выглядит следующим образом:

Рисунок 2. Небольшая верхняя панель приложения.

Выровнено по центру

Верхняя панель приложения, выровненная по центру, по сути такая же, как маленькая панель приложения, хотя заголовок располагается по центру компонента. Чтобы реализовать это, используйте специальный составной объект CenterAlignedTopAppBar .

В этом примере используется enterAlwaysScrollBehavior() для получения значения, которое он передает для scrollBehavior . Таким образом, панель сворачивается, когда пользователь прокручивает внутреннее содержимое каркаса.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Эта реализация выглядит следующим образом:

Рисунок 3. Верхняя панель приложения, выровненная по центру.

Середина

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

Как и в предыдущем фрагменте кода, в этом примере используется enterAlwaysScrollBehavior() для получения значения, которое он передает для scrollBehavior .

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Эта реализация выглядит следующим образом, с демонстрацией того, как выглядит поведение прокрутки из enterAlwaysScrollBehavior() :

Рисунок 4. Верхняя панель приложения, выровненная по центру.

Большой

Большая верхняя панель приложения похожа на среднюю, хотя отступы между заголовком и значками больше, и в целом она занимает больше места на экране. Чтобы создать его, используйте составной объект LargeTopAppBar .

В отличие от предыдущих фрагментов кода, в этом примере используется exitUntilCollapsedScrollBehavior() для получения значения, которое он передает для scrollBehavior . Таким образом, панель сворачивается, когда пользователь прокручивает внутреннее содержимое каркаса, но затем расширяется, когда пользователь прокручивает до конца внутреннего содержимого.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Эта реализация выглядит следующим образом:

Рисунок 5. Пример реализации большой верхней панели приложения.

Нижняя панель приложений

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

• actions : серия значков, которые появляются в левой части панели. Обычно это либо ключевые действия для данного экрана, либо элементы навигации.
• floatingActionButton : плавающая кнопка действия, которая появляется в правой части панели.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Эта реализация выглядит следующим образом:

Рисунок 6. Пример реализации нижней панели приложения.

Примечание. Вы также можете использовать BottomAppBar без передачи значения для actions и floatingActionButton . В этом случае вы можете создать собственную нижнюю панель приложения, заполнив BottomAppBar содержимым, как и другие контейнеры.

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

• Документы Material3 — верхняя панель приложения
• Документы Material3 — нижняя панель приложения
• Строительные леса