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

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

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

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

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

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

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

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

Виджеты коллекций

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

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

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

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

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

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

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

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

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

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

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

Интегрируйте виджеты с Google Assistant

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

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

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

Жесты

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

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

Элементы

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

Рекомендации по проектированию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

Рекомендации по планировке

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

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

Настройка виджета пользователями

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

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

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