Отобразить верхнюю панель приложения

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

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

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

Зависимости

Создайте компонуемый элемент для верхней панели приложения

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

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

  • Внешний Scaffold с комплектом TopBar .
  • Заголовок, состоящий из одного элемента Text .
  • Верхняя панель с определенным одним действием.
  • Действие IconButton с лямбда-выражением onClick для выполнения действия.
  • IconButton содержащий Icon с изображением значка и текстом описания содержимого.
  • Поведение прокрутки внутреннего содержимого Scaffold определяется как enterAlwaysScrollBehavior() . Это сворачивает панель приложения, когда пользователь извлекает внутреннее содержимое, и расширяет панель приложения, когда пользователь опускает внутреннее содержимое.
  • В дополнение к MediumTopBar , который содержит заголовок, вы также можете использовать:
    • TopAppBar : используйте для экранов, которые не требуют большого количества навигации или действий.
    • CenterAlignedTopAppBar : используйте для экранов с одним основным действием. Заголовок центрируется внутри компонента.
    • MediumTopAppBar : используйте для экранов, требующих умеренного количества навигации и действий.
    • LargeTopAppBar : используйте для экранов, требующих большого количества навигации и действий. Использует больше полей, чем MediumTopAppBar , и помещает заголовок под любыми дополнительными значками.

Результаты

Рисунок 1. Средняя верхняя панель приложения.

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

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

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

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

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