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

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

В этой документации представлены различные типы виджетов, которые вы можете создать, и принципы проектирования, которым необходимо следовать. Чтобы создать виджет приложения с помощью 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 отображают варианты конфигурации сразу после того, как пользователь перетаскивает виджет на главный экран.

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

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

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

В этой документации представлены различные типы виджетов, которые вы можете создать, и принципы проектирования, которым необходимо следовать. Чтобы создать виджет приложения с помощью 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 отображают варианты конфигурации сразу после того, как пользователь перетаскивает виджет на главный экран.

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

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

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

В этой документации представлены различные типы виджетов, которые вы можете создать, и принципы проектирования, которым необходимо следовать. Чтобы создать виджет приложения с помощью 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, вы можете предоставить более изысканные атрибуты размера и более гибкие макеты. Это включает в себя:

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

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

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

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

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

Эта документация вводит различные типы виджетов, которые вы можете создать, и принципы дизайна для следования. Чтобы построить виджет приложения, используя API -интерфейсы remove view и макеты XML, см. Создать простой виджет . Чтобы построить виджет, используя котлин и сочинять API -интерфейсы стиля, см. Getpack Glance .

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

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

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

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

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

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

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

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

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

Управляющие виджеты

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

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

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

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

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

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

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

Интегрировать виджеты с Google Assistant

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

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

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

Жесты

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

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

Элементы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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

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

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