Отображение нижней панели приложения

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

Совместимость версий

Для этой реализации требуется, чтобы в minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Создайте нижнюю панель приложения

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

@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

Ключевые моменты о коде

  • Внешний Scaffold с набором bottomBar .
  • Реализация bottomBar , содержащая список действий.
  • Действия, являющиеся реализациями IconButton , которые содержат Icon для текста описания изображения и содержимого, каждое из которых имеет лямбда-выражение onClick для выполнения этих действий.

Вы можете передавать компонуемые объекты для следующих ключевых параметров:

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

Результаты

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

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Узнайте, как использовать стандартизированную платформу для создания сложных пользовательских интерфейсов. Структура объединяет различные части пользовательского интерфейса, придавая приложениям целостный внешний вид.
Сборник кратких руководств
Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы дизайна Material Design.
Сборник кратких руководств

Есть вопросы или отзывы

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