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

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

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

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

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

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

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

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

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

Виджеты подборок

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

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

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

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

Виджет приложения Light list с переключателями "Спальня", "Кухня" и "Гостиная". Первые два переключателя выключены.
Рисунок 4. Пример виджета управления.

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

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

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

Музыкальное приложение с кнопками "Не нравится", "Назад", "Воспроизвести/Пауза", "Вперед" и "Нравится". Исполнитель и трек указаны как Artist и Example music соответственно.
Рисунок 5. Пример виджета музыкального приложения.

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

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

Как интегрировать виджеты с Google Ассистентом

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

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

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

Жесты

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

Для виджетов доступны только жесты касания и вертикального пролистывания.

Элементы

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

Рекомендации по дизайну

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

Контент виджета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Пример виджета погоды среднего размера (5 x 2), который включает все элементы интерфейса из виджета размером 3 x 2, а также надпись "Облачно" и прогноз температуры с 16:00 до 19:00.
Рисунок 8. Пример виджета погоды среднего размера в сетке 5 x 2.


Пример виджета погоды большого размера (5 x 4), который включает все элементы интерфейса из виджетов размером 3 x 2 и 5 x 2, а также прогноз погоды со вторника по пятницу.
Рисунок 9. Пример виджета погоды в сетке 5 x 4 (большой размер).

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

Рекомендации по выбору макета

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

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

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

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

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

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