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

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

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

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

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

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

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

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

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

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

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

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

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

Управляйте виджетами

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

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

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

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

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

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

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

Интегрируйте виджеты с Google Ассистентом.

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

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

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

Жесты

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

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

Элементы

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

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

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

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

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

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

В качестве навигационных ссылок в виджетах хорошо подойдут следующие кандидаты:

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

Вопросы компоновки

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

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

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

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

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

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