Всплывающие темы для Android, что это такое

Обновлено: 24.09.2022

За прошедшие годы Android как операционная система претерпела множество визуальных изменений, и текущим воплощением этих изменений является Material Design. Подробное руководство от Google подробно объясняет его концепции, но, вероятно, больше всего касается дизайнеров и экспертов по пользовательскому интерфейсу. Однако, с точки зрения программиста, некоторые эффекты были трудно достижимы и несовместимы между приложениями из-за использования пользовательских решений или сторонних библиотек. К счастью, Google создал библиотеку поддержки дизайна, которая теперь содержит все часто используемые визуальные компоненты, которые мы можем использовать. Пользовательский код больше не нужен.

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

Предпосылки

Пожалуйста, обратитесь к базовому руководству How To Get Started With Android Programming для объяснения основных концепций Android. Этот учебник напрямую расширяет базовый проект — исходный код можно скачать здесь.

Настройка проекта

Откройте файл build.gradle своего приложения и добавьте библиотеку поддержки дизайна в раздел зависимостей. Синхронизировать проект.

Тема и цвета AppCompat

В новейших версиях Android Studio тема для всего приложения по умолчанию устанавливается в AndroidManifest.xml как AppTheme :

Нажмите @style/AppTheme, удерживая клавишу Command, чтобы увидеть файл ресурсов, расположенный в папке /res/values/styles.xml вашего приложения.


Как видите, у нашей темы есть родитель с именем Theme.AppCompat.Light.DarkActionBar (не стесняйтесь изменять его с помощью автодополнения кода, чтобы увидеть, какие другие темы доступны) и определяет три пользовательских цвета: colorPrimary , colorPrimaryDark и colorAccent . Это соглашение, введенное с помощью Material Design и AppCompat, позволяет нам быстро изменять цветовую схему всего приложения. Эта тема AppCompat представляет собой бэк-порт темы Material (доступна только на Android 5.0+) для использования на старых платформах, что является предпочтительным способом для обеспечения обратной совместимости.

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


Чтобы настроить цветовую схему вручную, вы всегда можете перейти в /res/values/colors.xml и изменить значения или добавить новые с соответствующими свойствами темы в styles.xml.

Панель инструментов

Панель инструментов — это, по сути, конкретная реализация панели приложений, ранее известной как панель действий. Несмотря на то, что панель инструментов визуально очень похожа, она содержит улучшения по сравнению с хорошо известным шаблоном панели действий — будучи ViewGroup, она может содержать произвольные виджеты внутри себя и может быть размещена в любом месте вашего макета приложения. Он больше не является частью оформления окна (как атрибут темы).

Включить панель инструментов

Наша применяемая в настоящее время тема Theme.AppCompat.Light.DarkActionBar делает именно это — предоставляет панель действий. Давайте изменим это на Theme.AppCompat.Light.NoActionBar в styles.xml. Теперь в наши макеты действий не добавлена ​​панель действий по умолчанию, поэтому нам нужно добавить ее как еще один виджет в иерархию представлений.

Мы добавили панель инструментов и переместили TextView относительно ниже нее, добавив android:layout_below https://res.cloudinary.com/dukp6c7f7/image/upload/f_auto,fl_lossy,q_auto/s3-ghost/2017/03. /Screenshot_2016_03_20_19_00_06-1490710646255.jpg" alt="" loading="ленивый">

Панель инструментов можно настроить как панель действий для действия, но это необходимо сделать в коде. Измените MainActivity.java. Обратите внимание на пакет поддержки, содержащий панель инструментов:

Теперь запустите приложение. Он отображает заголовок Playground на панели инструментов, но он черный на темно-синем фоне. Исправьте это, установив для него дополнительные свойства:

Всплывающая тема пригодится в следующем разделе.

Настройка меню действий

  • определить XML меню
  • внедрить методы обратного вызова в Activity

Создайте новый файл ресурсов /res/menu/main.xml:

Добавьте два метода в MainActivity.java:

Теперь вы должны увидеть элементы действий на панели инструментов.

Настроить панель инструментов

Поскольку это обычный компонент ViewGroup, мы можем размещать в нем произвольные иерархии представлений.Измените узел панели инструментов в файле activity_main.xml:

В MainActivity.java получите ссылку на ActionBar в методе onCreate() и скройте его заголовок:

Обратите внимание, что мы используем SupportActionBar. Это дает нам ссылку на ActionBar активности, в данном конкретном случае — это экземпляр панели инструментов, полностью совместимый с API ActionBar. Окончательный эффект должен выглядеть так:


Макет ввода текста

Этот удобный макет охватывает TextView и предоставляет несколько полезных функций, которые большинству Android-программистов в какой-то момент приходилось программировать вручную. Добавьте этот XML в макет активности:

И этот код в конце метода onCreate():

  • добавляет счетчик в TextView, устанавливает максимальное количество символов и включает его
  • добавляет сообщение об ошибке, что обычно должно выполняться динамически в ответ на какой-либо метод проверки

Конечный эффект выглядит следующим образом:


Плавающая кнопка действия

FAB – это новая концепция одной четко видимой кнопки ImageButton, которая предлагает пользователю выполнить значимое контекстное действие, характерное для экрана, на котором он находится. Это может быть создание нового электронного письма, фотографирование или редактирование просматриваемого в данный момент события календаря. Это также демонстрация блестящих новых свойств материала, таких как возвышение (отбрасывание тени на элементы ниже) и эффект щелчка рябью.

Добавьте FAB в конец файла макета:

Давайте добавим OnClickListener в метод onCreate() MainActivity:

Как видите, FAB имеет дополнительные функции анимации своего представления при скрытии или отображении.


Закусочная

Закусочная — это тост следующего уровня. Он может ненадолго появиться на экране и может иметь одно необязательное действие, которое происходит при нажатии. Обычно он используется для подтверждения действий, таких как архивирование электронной почты или отправка сообщения, и дополнительно предоставляет контекстное отменить действие для того, что мы только что сделали. Его легко использовать, потому что API похож на его предшественника. Измените часть кода, отвечающую за FAB из предыдущего раздела:

Поэкспериментируйте с параметрами Snackbar.LENGTH, различными цветами текста и настраиваемой продолжительностью, которые можно установить с помощью вспомогательных настроек. Как видите:

  • вместо Context мы предоставляем конструкцию View for Snackbar (см. следующий раздел)
  • текст действия написан с заглавной буквы
  • Snackbar появился в нижней части экрана без каких-либо изменений в макете XML
  • по умолчанию он закрывает все, что находится под ним — это плохо, когда мы используем FAB, но мы исправим это в следующем разделе


Макет координатора

Чего нам не хватало в предыдущем разделе, так это CoordinatorLayout — интеллектуального FrameLayout, который знает о взаимодействиях между представлениями — прокрутке, перемещении представлений и т. д. Путем реализации поведения дочерние представления могут определять свои взаимодействия и модификации макета, которые они хотели бы выполнять в ответ на действия других. Компоненты библиотеки поддержки обеспечивают поведение по умолчанию, и мы собираемся использовать их сейчас.

Измените файл activity_main.xml, чтобы он соответствовал CoordinatorLayout, и извлеките FAB из RelativeLayout, содержащего другие компоненты:

Мы обернули FAB в CoordinatorLayout в XML, теперь нам нужно установить его как представление привязки Snackbar в onCreate() :

Благодаря настройкам Behaviors и CoordinatorLayout по умолчанию, Snackbar выдвигает FAB вверх, когда он появляется на экране.


PercentRelativeLayout

Одним изящным дополнением к SupportLibrary является PercentRelativeLayout, который (наконец-то) позволяет нам определять относительные размеры в процентах от доступного пространства.

Добавьте зависимость в файл build.gradle:

Измените RelativeLayout на PercentRelativeLayout и измените ширину панели инструментов (просто для удовольствия), заменив атрибут android:layout_width="wrap_content" на app:layout_widthPercent="80%" :

Не стесняйтесь поворачивать экран, чтобы увидеть, остается ли ширина по отношению к общей ширине. Окончательный эффект должен выглядеть так (это также доказывает, что панель инструментов — это просто еще одно представление):

Вы можете столкнуться с ошибками, используя эти процентные атрибуты:


Это исчезнет, ​​как только инструменты будут обновлены для распознавания процентной библиотеки, но фактическая компиляция должна пройти нормально.

Обзор

В этом руководстве вы познакомились с основами Material Design, которые кардинально изменили внешний вид современных приложений Android, а также взаимодействие с пользователями. Теперь вы можете воспользоваться преимуществами самых популярных строительных блоков, предоставляемых Android, и использовать библиотеку поддержки проектирования на новейших и старых устройствах Android.

Исходный код этого руководства можно найти на GitHub.

Адам Йодловски

Еженедельник X-Team

Наш новостной бюллетень о программировании, продуктивности и вдохновении.
Будьте в курсе культуры X-Team.

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

Использование панели инструментов вместо панели действий:

  1. Более широкие возможности настройки внешнего вида.
  2. Полная поддержка устройств Android с более низкими версиями через библиотеку поддержки AppCompact.
  3. Продолжайте использовать функции панели действий, такие как меню, элементы выбора и т. д.
  4. Используйте отдельную панель инструментов, разместите ее в любом месте приложения.

Добавить панель инструментов

  1. У вас есть библиотека поддержки совместимости приложений версии 7.
  2. Действие для расширения AppCompatActivity
  3. Обновить тему без панели действий.
  4. Применить тему к каждому действию
  5. Определить панель инструментов в макете активности
  6. Обновите onCreate(), чтобы иметь эту панель инструментов

Расширить активность AppCompat

Обновить тему

Обновите тему до NoActionBar, чтобы приложение не использовало собственный класс ActionBar для предоставления панели инструментов.

Обновить файл AndroidManifest.xml

Обновить макет активности

  • android:theme устанавливает тему для всей панели инструментов.
  • app:popupTheme устанавливает тему для дополнительного меню панели инструментов.

Обновление onCreate()

Добавить кнопки действий

Чтобы добавить кнопки действий:

  1. Обновите XML-файл макета меню в res/menu/, чтобы появилась эта кнопка.
  2. Обновите onOptionsItemSelected(), чтобы добавить прослушиватель

Обновить макет меню в формате xml

Кнопка появится непосредственно на панели инструментов или в дополнительном меню в зависимости от:

  • app:showAsAction="ifRoom" - кнопка будет отображаться на панели инструментов, если на панели инструментов достаточно места; в противном случае он будет в дополнительном меню.
  • app:showAsAction="never" — только в дополнительном меню.

Обновите onOptionsItemSelected(), чтобы добавить прослушиватель

Добавление действия вверх

Кнопка «Вверх» на панели инструментов предназначена для всех действий (кроме основного) для перехода к родительскому действию.

  1. Объявить родительское действие
  2. Включить кнопку «Вверх» для действия.

Объявить родительское действие

  • Для Android выше 4.1 (уровень API 16) используйте android:parentActivityName .
  • Для более старой версии используется пара "имя-значение", где имя – android.support.PARENT_ACTIVITY, а значение -- название родительского действия.

Включить кнопку «Вверх»

Просмотры действий

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

  1. Добавить в ресурс меню панели инструментов
  2. Обновите onCreateOptionsMenu(), чтобы добавить прослушиватель событий

Обновить ресурс меню панели инструментов

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

  • actionViewClass — класс виджета, реализующего действие.
  • actionLayout – ресурс макета, описывающий компоненты действия.

Задайте для showAsAction значение ifRoom|collapseActionView или never|collapseActionView .

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

Обновление onCreateOptionsMenu()

Обновите onCreateOptionsMenu() в действии, чтобы добавить прослушиватель событий

Прослушиватель действий сворачивает/разворачивает

Если мы хотим что-то сделать, когда представление действий сворачивается/раскрывается:

  1. Определить и переопределить OnActionExpandListener
  2. Добавить этот прослушиватель в элемент просмотра действий

Поставщики действий

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

В Android есть нормальная (темная) и светлая темы, хотя на самом деле это светлые темы, которые обычно отображаются в примерах нового дизайна Material.

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

screenshot_toolbar_light_theme_default_cropped

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

screenshot_toolbar_dark_theme_default_cropped

Это относится как к темам Holo, так и к новым темам Material.

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

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

Новая панель инструментов Android, которая заменяет панель действий (с некоторым неудобным кодом), упрощает изменение цвета текста заголовка и цвета значка переполнения меню (и значка вверх/назад). Итак, теперь у меня наконец есть темный текст и значки на светлом фоне в темной теме:

screenshot_toolbar_dark_text_on_light_with_dark_theme_cropped

Тема панели инструментов и всплывающая тема

Мне потребовалась целая вечность, чтобы понять, как это сделать, поэтому, надеюсь, следующее объяснение сэкономит кому-то время. Буду рад любым исправлениям.

Моя основная тема основана на Theme.AppCompat (а не Theme.AppCompat.Light), которая является темной темой Material для старых устройств, потому что я хочу, чтобы большая часть пользовательского интерфейса была темной.

(Обновление: изначально я использовал Theme.AppCompat, вручную установив для windowActionBar значение false, прежде чем узнать о Theme.AppCompat.NoActionBar здесь, но я не заметил никакой разницы)

Но эта темная тема дает мне светлый текст и значки на моем светлом фоне панели приложений:

screenshot_toolbar_standard_white_text_on_light_with_dark_theme_cropped

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

Поэтому XML-макет моей панели инструментов определяет другую тему (android:theme или app:theme при использовании версий appcompat до 22.1.0), например так:

Эта тема панели инструментов определяет textColorPrimary и textColorSecondary для изменения цвета текста заголовка и кнопки переполнения меню. Вы могли бы просто указать стандартную тему Theme.AppCompat.Light.NoActionBar для панели инструментов, чтобы получить темный текст и значок переполнения, но я хотел получить от своей собственной темы и внести только небольшие изменения, потому что я понятия не имею, что еще может быть затронуто.

Это дает мне темный текст и значки на панели приложений при использовании темной темы:

screenshot_toolbar_dark_text_on_light_with_dark_theme_cropped

На самом деле он серый, а не черный, а белые значки на самом деле не совсем белые, поэтому вы можете использовать собственный цвет, чтобы стандартные значки были действительно черными или белыми:

Обратите внимание, что также используется popupTheme (app:popuptheme при использовании AppCompat или android:popupTheme при использовании SDK >=21). Без этого внешний вид дополнительного меню зависит от стиля панели инструментов, что приводит к темному тексту на темном фоне:

screenshot_toolbar_dark_text_on_light_with_dark_theme_with_menu_with_menu_without_popuptheme_cropped-300x136.jpg

Указав popupTheme панели инструментов, мы можем вместо нее использовать нашу обычную тему в меню:

screenshot_toolbar_dark_text_on_light_with_dark_theme_with_menu_cropped



[1] «Панель приложений», похоже, является новой официальной терминологией. Он используется здесь и в некоторых других местах, которые я сейчас не могу найти.

Читайте также: