Канонические макеты виджетов

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

Текст

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

Только текст

Идеально подходит для заголовков, обновлений статуса, кратких описаний и других случаев, когда достаточно одной строки текста.

Текст и изображение

Добавьте изображение, чтобы сделать объявление более привлекательным. Подробнее о том, как адаптировать макет для экранов разных размеров, рассказывается в разделе Точки останова.

Панели инструментов

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

Панель поиска

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

Панель инструментов

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

Списки

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

Список с текстом и изображениями

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

Контрольный список

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

Список действий

Интуитивно понятное управление с помощью списков действий, в которых визуальные состояния "включено/выключено" позволяют сразу понять статус элемента.

Изображение на всю страницу

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

Сетка

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

Только изображение

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

Изображение и текст

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

Образцы кода

В таблице ниже показано, как каждый канонический макет реализован в Jetpack Glance в репозитории Android Platform Samples на GitHub.

Канонический макет Цифровые отпечатки Руководство
Макет списка действий
  • Обрабатывайте действия с элементами списка с помощью обратных вызовов действий Glance и обеспечьте правильное обновление состояния.
Проверка макета списка
  • Реализуйте переключение состояния флажка с помощью параметров действий или обратных вызовов, чтобы обновлять элементы коллекции.
  • Используйте обратные вызовы действий Glance, например `actionRunCallback`, `ActionCallback(actionParametersOf(...))` или `actionStartActivity(...)`, для параметров `onClick` виджета, чтобы обрабатывать события кликов, например нажатие на флажок.
Выразительная панель инструментов
  • Чтобы избежать ошибок при импорте `ColorProvider`, импортируйте `androidx.glance.unit.ColorProvider` и используйте `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Используйте `GlanceModifier.background(Color)` напрямую для сплошных цветов фона, а не `ColorProvider`.
Макет сетки изображений
  • Используйте сплошные цвета (`GlanceModifier.background`) или локальные объекты для рисования для элементов изображений, если не настроена или не запрошена библиотека загрузки изображений.
Макет списка с текстом на изображении
  • Примеры использования: новостные ленты, списки статей, истории тренировок, ленты сообщений и списки вертикальных значков.
  • Сбалансирована высота строк списка и обрезка текста при сочетании уменьшенных изображений с основным и дополнительным текстом.
Макет с длинным текстом
  • Если вы умножаете значения `Dp`, например `2 * padding`, импортируйте `androidx.compose.ui.unit.times`.
  • Соблюдайте правила размеров: используйте размеры из файла `dimens.xml` для отступов и масштабирования типографики.
Макет панели инструментов поиска
  • Чтобы избежать ошибок при импорте `ColorProvider`, импортируйте `androidx.glance.unit.ColorProvider` и используйте `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Используйте `GlanceModifier.background(Color)` напрямую для сплошных цветов фона, а не ColorProvider.
Макет изображения без полей / прокрутка с фиксацией
  • Чтобы включить прокрутку с фиксацией, задайте для LazyColumn значение `verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)`.
  • Если вы реализуете прокрутку с шагом, вам потребуется Glance 1.3.0-alpha02 или более поздней версии, SDK для компиляции 37 (Baklava) или более поздней версии и плагин Android Gradle (AGP) 9.1.0 или более поздней версии.
  • В классе поставщика виджетов задайте значение `override val sizeMode: SizeMode = SizeMode.Exact`.
Стандартная панель инструментов
  • Чтобы избежать ошибок при импорте `ColorProvider`, используйте `androidx.glance.color.ColorProvider(dayColor, nightColor)`.
  • Используйте `GlanceModifier.background(Color)` напрямую для сплошных цветов фона, а не `ColorProvider`.
Текст с изображением
  • Соблюдайте правила адаптивной разметки, чтобы размещать текст и изображения рядом или друг над другом в зависимости от доступных размеров виджета.