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

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

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

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

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

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

Верхние панели приложений

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

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

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

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

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

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

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

Существует три типа TopAppBarScrollBehavior . Они следующие:

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

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

Примеры

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

Маленький

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

В следующем примере 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 composable.

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

@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 . Таким образом, панель сворачивается, когда пользователь прокручивает внутреннее содержимое scaffold, но затем расширяется, когда пользователь прокручивает до конца внутреннего содержимого.

@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 composable. Использование этого composable очень похоже на top app bar composables, описанные в предыдущих разделах этой страницы. Вы передаете composables для следующих ключевых параметров:

• 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 docs - Верхняя панель приложений
• Material3 docs - Нижняя панель приложений
• Строительные леса