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

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

Тип

Внешний вид

Назначение

Верхняя панель приложения

В верхней части экрана.

Предоставляет доступ к основным задачам и информации. Обычно содержит заголовок, основные действия и некоторые элементы навигации.

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

В нижней части экрана.

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

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

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

В таблице ниже описаны четыре типа верхних панелей приложения.

Тип

Пример

Маленькая. Для экранов, на которых не требуется много элементов навигации или действий.

 Маленькая верхняя панель приложения

Выравнивание по центру. Для экранов с одним основным действием.

 Верхняя панель приложения с выравниванием по центру

Средний. Для экранов с умеренным количеством элементов навигации и действий.

 Средняя верхняя панель приложения

Большая. Для экранов, на которых требуется много элементов навигации и действий.

 Большая верхняя панель приложения

API surface

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

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

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

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

Существует три типа TopAppBarScrollBehavior. Вот эти типы:

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

В примерах ниже показано, как реализовать некоторые из этих вариантов.

Примеры

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

Мелкий

Чтобы создать небольшую верхнюю панель приложения, используйте composable-функцию 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)
    }
}

Вот как это выглядит:

Пример маленькой верхней панели приложения.
Рисунок 2. Маленькая верхняя панель приложения.

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

Верхняя панель приложения с выравниванием по центру по сути такая же, как и маленькая панель приложения, хотя заголовок находится по центру компонента. Для этого используйте специальную composable-функцию CenterAlignedTopAppBar.

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

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    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)
    }
}

Вот как это выглядит:

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

Средний

В средней верхней панели приложения заголовок размещается под дополнительными значками. Чтобы создать его, используйте composable-функцию 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)
    }
}

Ниже показано, как выглядит эта реализация и как работает прокрутка из enterAlwaysScrollBehavior().

Рисунок 4. Средняя верхняя панель приложения, которая сворачивается, когда пользователь прокручивает экран вверх, и разворачивается, когда пользователь прокручивает экран вниз.

Крупный

Большая верхняя панель приложения похожа на среднюю, но отступ между заголовком и значками больше, и она занимает больше места на экране. Чтобы создать его, используйте composable-функцию 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)
    }
}

Вот как это выглядит:

Экран в приложении с нижней панелью приложения, на которой слева расположены четыре значка действий, а справа – плавающая кнопка действия.
Рисунок 5. Пример реализации большой верхней панели приложения.

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

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

  • 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."
        )
    }
}

Вот как это выглядит:

Экран в приложении с нижней панелью приложения, на которой слева расположены четыре значка действий, а справа – плавающая кнопка действия.
Рисунок 6. Пример реализации нижней панели приложения.

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