Обзор виджетов приложения

Попробуйте способ Compose
Jetpack Compose — рекомендуемый набор инструментов пользовательского интерфейса для Android. Узнайте, как создавать виджеты с использованием API в стиле Compose.

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

В этой документации представлены различные типы виджетов, которые вы можете создать, и принципы проектирования, которым нужно следовать. Чтобы создать виджет приложения с использованием API Remote View и макетов XML, см. раздел Создание простого виджета . Чтобы создать виджет с использованием API в стиле Kotlin и Compose, см. раздел Jetpack Glance .

Типы виджетов

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

Информационные виджеты

Пример погодного виджета, отображающего Токио как преимущественно облачный, 14 градусов, и прогнозируемую температуру, начинающуюся с 16:00 до 19:00
Рисунок 1. Информационный виджет из приложения «Погода».

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

Коллекция виджетов

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

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

  • Просмотр коллекции.
  • Открытие элемента коллекции для его подробного просмотра в соответствующем приложении.
  • Взаимодействие с элементами, например, отметка их как выполненных, с поддержкой составных кнопок в Android 12 (API уровня 31).

Виджеты управления

Виджет для приложения под названием «Список освещения», отображающий переключатели  с надписями «Спальня», «Кухня» и «Гостиная», при этом первые два  переключателя выключены
Рисунок 4. Пример виджета управления.

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

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

Гибридные виджеты

Обычное музыкальное приложение с кнопками «палец вниз», «назад», «воспроизведение/пауза», «вперед» и «палец вверх». Исполнитель и трек указаны как «Исполнитель» и «Пример музыки» соответственно.
Рисунок 5. Пример виджета музыкального приложения.

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

При планировании виджета ориентируйтесь на один из базовых типов и добавляйте элементы других типов по мере необходимости.

Интеграция виджетов с Google Assistant

Любой тип виджета может быть отображен Google Assistant в ответ на голосовые команды пользователя. Вы можете настроить свои виджеты для выполнения действий приложения , что позволит пользователям получать быстрые ответы и интерактивные приложения на поверхностях Assistant, таких как Android и Android Auto . Для получения более подробной информации о выполнении виджетов для Assistant см. раздел Интеграция действий приложения с виджетами Android .

Ограничения виджета

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

Жесты

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

Единственными жестами, доступными для виджетов, являются касание и вертикальное смахивание .

Элементы

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

Руководство по проектированию

Содержание виджета

Виджеты — отличный способ привлечь пользователя к вашему приложению, «рекламируя» новый и интересный контент, доступный в вашем приложении.

Как и тизеры на первой странице газеты, виджеты объединяют и концентрируют информацию приложения и обеспечивают связь с более богатой информацией в приложении. Можно сказать, что виджет — это информационный «закусочный» вариант, а приложение — «еда». Убедитесь, что ваше приложение показывает больше подробностей об элементе информации, чем то, что отображает виджет.

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

Хорошими кандидатами для навигационных ссылок на виджетах являются:

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

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

Изменение размера виджета

Стандартный виджет Google Clock
Рисунок 6. Стандартный виджет Google Clock.

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

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

Возможность изменять размер виджетов имеет важные преимущества:

  • Они могут точно настроить объем информации, которую они хотят видеть на каждом виджете.
  • Они могут эффективнее влиять на расположение виджетов и ярлыков на своих домашних панелях.

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

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

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

Пример виджета погоды в самом маленьком размере сетки 3x2, в котором указаны название местоположения (Токио), температура (14°) и символ, указывающий на частично облачную погоду
Рисунок 7. Пример виджета погоды в сетке 3x2 «маленького» размера.


Пример погодного виджета в размере 5x2 «среднего», включая весь пользовательский интерфейс из размера сетки 3x2 плюс метку «в основном облачно» и прогнозируемую температуру с 16:00 до 19:00
Рисунок 8. Пример виджета погоды в сетке 5x2 «среднего» размера.


Пример виджета погоды в размере 5x4 «большой», включая весь пользовательский интерфейс из размеров сетки 3x2 и 5x2 плюс прогноз погоды со вторника по пятницу
Рисунок 9. Пример виджета погоды в сетке 5x4 «большого» размера.

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

Соображения по компоновке

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

  • Планирование стратегии изменения размера виджета с использованием «диапазонов размеров», а не переменных размеров сетки, дает наиболее надежные результаты.
  • Количество, размер и интервал между ячейками могут значительно различаться от устройства к устройству. Поэтому очень важно, чтобы ваш виджет был гибким и мог вмещать больше или меньше пространства, чем предполагается.
  • Когда пользователь изменяет размер виджета, система отвечает диапазоном размеров dp, в котором ваш виджет может перерисоваться.
  • Начиная с Android 12, вы можете предоставить более точные атрибуты размера и более гибкие макеты. Это включает в себя:

Конфигурация виджета пользователями

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

Контрольный список дизайна виджета

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