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

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

Тип

Появление

Цель

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

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

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

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

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

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

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

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

Зависимости

Реализация верхней панели приложений

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

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

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

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

Результат

Пример небольшой верхней панели приложений.
Рисунок 1. Небольшая верхняя панель приложения.

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

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

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

Результат

Напишите здесь свой альтернативный текст
Рисунок 2. Верхняя панель приложения, выровненная по центру.

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

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

Как и предыдущий код, в этом примере используется enterAlwaysScrollBehavior() для получения значения, которое он передает для scrollBehavior .

Результат

Рисунок 3. Средняя верхняя панель приложения, демонстрирующая поведение прокрутки из enterAlwaysScrollBehavior .

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

Большая верхняя панель приложения похожа на среднюю, хотя отступы между заголовком и значками больше, и в целом она занимает больше места на экране. Чтобы создать его, используйте составной объект LargeTopAppBar ).

В этом примере exitUntilCollapsedScrollBehavior() используется для получения значения, которое он передает для scrollBehavior . Панель сворачивается, когда пользователь прокручивает внутреннее содержимое каркаса, но затем расширяется, когда пользователь прокручивает внутреннее содержимое до конца.

Результат

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

Реализация нижней панели приложения

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

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

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

Результат

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

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

  • Обычно вы передаете панели приложений в составной элемент Scaffold , который имеет определенные параметры для их получения.

  • Составные элементы, которые вы используете для реализации верхних панелей приложений, имеют общие ключевые параметры:

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

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

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

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

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

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

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

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