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

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

Тип

Внешний вид

Назначение

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

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

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

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

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

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

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

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

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

Тип

Пример

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

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

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

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

Средний. Для экранов, на которых нужно выполнять среднее количество действий и переходов.

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

Большой – для экранов, на которых нужно выполнять много действий и переходить между разными разделами.

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

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

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

  • title – текст, который появляется на панели приложения.
  • navigationIcon – основной значок для навигации. Отображается слева от панели приложений.
  • actions – значки, с помощью которых пользователь может выполнять ключевые действия. Они находятся справа от панели приложений.
  • scrollBehavior: определяет, как верхняя панель приложения реагирует на прокрутку внутреннего контента каркаса.
  • 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. Небольшая верхняя панель приложения.

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

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

  • 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. Пример реализации нижнего бара приложений.

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