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

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

Тип

Появление

Цель

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

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

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

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

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

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

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

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

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

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

Тип

Пример

Маленький : для экранов, которые не требуют большого количества навигации или действий.

Небольшая верхняя панель приложений

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

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

Средний : для экранов, требующих умеренного количества навигации и действий.

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

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

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

поверхность 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. Пример реализации нижней панели приложения.

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