Как начать работу с плитками

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

классный 

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.6.2"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.4.2"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.4.2"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.4.2"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.2"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.6.2"
}

Котлин 

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.6.2")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.4.2")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.4.2")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.4.2")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.2")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.6.2")
}
,

классный 

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.6.2"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.4.2"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.4.2"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.4.2"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.6.2"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.6.2"
}

Котлин 

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.6.2")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.4.2")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.4.2")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.4.2")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.6.2")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.6.2")
}

Основные понятия

Плитки создаются не так, как приложения Android, и используют другие концепции:

  • Шаблоны макетов определяют общее расположение визуальных элементов на экране. Для этого используется функция primaryLayout().
  • Элементы макета. Отдельные графические элементы, например кнопки или карточки, или несколько таких элементов, сгруппированных с помощью столбца, группы кнопок или аналогичного элемента. Они встроены в шаблон макета.
  • Ресурсы. Объекты ResourceBuilders.Resources состоят из карты пар "ключ-значение" ресурсов Android (изображений), необходимых для отрисовки макета, и версии.
  • Хронология. Объект TimelineBuilders.Timeline представляет собой список одного или нескольких экземпляров объекта макета. Вы можете указать различные механизмы и выражения, чтобы определить, когда отрисовщик должен переключаться с одного объекта макета на другой, например чтобы остановить показ макета в определенное время.
  • Состояние. Структура данных типа StateBuilders.State, которая передается между виджетом и приложением, чтобы они могли взаимодействовать друг с другом. Например, если на плитке нажать кнопку, в состоянии будет указан ее идентификатор. Вы также можете обмениваться типами данных с помощью карты.
  • Фрагмент. Объект TileBuilders.Tile, представляющий фрагмент и состоящий из временной шкалы, идентификатора версии ресурсов, интервала актуальности и состояния.
  • Protolayout. Этот термин используется в названиях различных классов, связанных с виджетами, и относится к библиотеке Wear OS Protolayout – графической библиотеке, которая используется на разных платформах Wear OS.

Как создать плитку

Использовать Material3TileService (рекомендуется)

При создании элементов Material 3 (androidx.wear.tiles:tiles:1.6.0 и выше) всегда используйте класс Material3TileService, а не класс более низкого уровня TileService. Material3TileService – это архитектура, в которой приоритет отдается Kotlin и которая упрощает разработку карточек:

  • Встроенные сопрограммы Kotlin. Реализуйте одну приостанавливающую функцию MaterialScope.tileResponse(requestParams: TileRequest): Tile вместо того, чтобы использовать ListenableFuture и переопределять onTileRequest().
  • Предварительно настроенный MaterialScope. tileResponse() работает с MaterialScope в качестве получателя (настраивается с помощью параметров конструктора, таких как allowDynamicTheme и defaultColorScheme), поэтому вам не нужно оборачивать макет в избыточный вызов materialScope().
  • Регистрация ресурсов за один вызов. Включает ProtoLayoutScope для автоматической регистрации встроенных ресурсов изображений и возврата макета плитки и ресурсов за один вызов системного связующего элемента. Поскольку Material3TileService автоматически обрабатывает ресурсы (final onTileResourcesRequest()), не переопределяйте onTileResourcesRequest().
class MyTileService : Material3TileService() {

    override suspend fun MaterialScope.tileResponse(requestParams: TileRequest): Tile =
        tile(
            timeline =
            Timeline.fromLayoutElement(
                primaryLayout(
                    mainSlot = {
                        text("Hello, World!".layoutString, typography = BODY_LARGE)
                    }
                )
            )
        )
}

Базовая архитектура TileService

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

Чтобы добавить в приложение плитку, реализуйте сервис типа TileService и зарегистрируйте его в манифесте. На основе этого система запрашивает необходимые тайлы во время вызовов onTileRequest() и ресурсы во время вызовов onTileResourcesRequest().

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        materialScope(this, requestParams.deviceConfiguration) {
                            primaryLayout(
                                mainSlot = {
                                    text("Hello, World!".layoutString, typography = BODY_LARGE)
                                }
                            )
                        }
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(Resources.Builder().setVersion(RESOURCES_VERSION).build())
}

Затем добавьте сервис в тег <application> файла AndroidManifest.xml.

<service
    android:name=".snippets.m3.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>

Разрешение и фильтр интентов регистрируют этот сервис как поставщика плиток.

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

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

Плитка Wear OS, созданная с помощью Material 3, с текстом &quot;Hello World&quot;.
Рисунок 1. "Hello World".

Полный пример можно найти в образце кода на GitHub или в лабораторной работе.

Как создать интерфейс для элементов

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

Макет

Ознакомьтесь с основными принципами создания эффективных и адаптивных макетов плиток.

Чтобы создать макет, выполните следующие действия:

  1. Инициализируйте область Material Design. Вызовите функцию materialScope(), указав необходимые значения context и deviceConfiguration. Вы можете добавить необязательные параметры, например allowDynamicTheme и defaultColorScheme. По умолчанию allowDynamicTheme имеет значение true, а defaultColorScheme представляет собой ColorScheme, используемый, когда динамические цвета недоступны (например, если пользователь отключил эту функцию или она не поддерживается устройством, или если allowDynamicTheme имеет значение false).

  2. Создайте интерфейс в области действия. Все компоненты интерфейса для макета плитки должны быть определены в лямбда-выражении одного вызова materialScope() верхнего уровня. Эти функции компонентов, такие как primaryLayout() и textEdgeButton(), являются функциями расширения для MaterialScope и доступны только при вызове в области действия получателя.

    materialScope(
    context = context,
    deviceConfiguration =
    requestParams.deviceConfiguration, // requestParams is passed to onTileRequest
    defaultColorScheme = myFallbackColorScheme
) {
    // inside the MaterialScope, you can call functions like primaryLayout()
    primaryLayout(
        titleSlot = { text(text = "Title".layoutString) },
        mainSlot = { text(text = "Main Content".layoutString) },
        bottomSlot = {
            textEdgeButton(
                labelContent = { text("Action".layoutString) },
                onClick = clickable()
            )
        }
    )
}

Слоты

В M3 макет плиток использует подход, вдохновленный Compose, и состоит из трех отдельных слотов. Сверху вниз:

  1. Тег titleSlot обычно используется для основного заголовка.
  2. mainSlot – для основного контента.
  3. bottomSlot – часто используется для действий или дополнительной информации. Здесь также появляется кнопка "На краю экрана".
Макет элементов с полями titleSlot, mainSlot и bottomSlot
Рисунок 2. Слоты titleSlot, mainSlot и bottomSlot.

Содержимое каждого слота:

  • titleSlot (необязательно). Обычно это несколько слов, сгенерированных text().
  • mainSlot (обязательно). Компоненты, организованные в структуры, такие как строки, столбцы и группы кнопок. Эти компоненты могут быть вложены друг в друга, например столбец может содержать строки.
  • bottomSlot (необязательно). Обычно содержит кнопку, прижатую к краю, или текстовую метку.

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

Компоненты интерфейса

Библиотека protolayout-material3 содержит множество компонентов, разработанных в соответствии со спецификациями Material 3 Expressive и рекомендациями по созданию пользовательского интерфейса.

Кнопки

Кнопки в основном ориентированы на действия. Они служат для запуска определенных действий. Содержимое каждой кнопки, например значок или короткий текст, определяет действие.

  • textButton() – кнопка с одним слотом для короткого текста.
  • iconButton() – кнопка с одним слотом для значка.
  • avatarButton() – кнопка-аватар в форме таблетки, в которой можно разместить до трех элементов контента: ярлык и дополнительный ярлык, расположенные друг над другом, и изображение (аватар) рядом с ними.
  • imageButton() – интерактивная кнопка с изображением, которая не предлагает дополнительных мест размещения, а только изображение (например, backgroundImage в качестве фона).
  • compactButton() – компактная кнопка, в которой можно разместить до двух элементов контента, расположенных горизонтально друг над другом. Это может быть значок и текст рядом с ним.
  • button() – кнопка в форме таблетки, в которой можно разместить до трех элементов контента: вертикально расположенные основной и дополнительный ярлыки, а также значок рядом с ними.

Кнопки на боковой панели

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

  • iconEdgeButton() – кнопка на краю экрана, в которой можно разместить значок или другой небольшой круглый объект.
  • textEdgeButton() – кнопка на краю экрана, в которой можно разместить текст или другой контент, занимающий много места по ширине и длине.

Подсказки

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

  • titleCard() – заставка, на которой может быть от одного до трех текстовых полей.
  • appCard() – карточка приложения, в которой может быть до пяти текстовых полей.
  • textDataCard() – карточка с данными, в которой может быть до трех слотов, расположенных вертикально. Обычно в них размещается текст или числа.
  • iconDataCard() – карточка с данными, в которой может быть до трех слотов, расположенных вертикально. Обычно в них размещается текст или цифры, а также значок.
  • graphicDataCard() – карточка с графическими данными, в которой есть слот для графических данных, например индикатора прогресса, и до двух слотов, расположенных вертикально, обычно для текстовых описаний.

Индикаторы прогресса

  • circularProgressIndicator() – показывает прогресс в достижении цели с помощью радиального элемента.
  • segmentedCircularProgressIndicator() – показывает прогресс достижения цели с помощью радиального элемента с отдельными этапами.

Как сгруппировать элементы макета

  • buttonGroup() – макет компонента, который размещает дочерние элементы в горизонтальной последовательности.
  • primaryLayout() – полноэкранный макет, представляющий собой рекомендуемый стиль макета M3, который является адаптивным и обеспечивает размещение элементов с учетом рекомендуемых полей и отступов.

Как применить тему

В Material 3 Expressive цветовая система определяется 29 стандартными ролями цвета, организованными в шесть групп: основной, дополнительный, третичный, ошибка, поверхность и контур.

Система Material 3 Expressive Color System, в которой роли цветов организованы в группы, такие как основной, дополнительный, третичный, ошибка, поверхность и контур.
Рисунок 3. Система цветов Material 3 Expressive.

ColorScheme сопоставляет каждую из 29 ролей с определенным цветом. Поскольку этот элемент входит в состав MaterialScope, а компоненты должны создаваться внутри него, они автоматически получают цвета из схемы. При таком подходе все элементы интерфейса автоматически соответствуют стандартам Material Design.

Чтобы пользователи могли выбирать между цветовой схемой, заданной вами (например, в фирменных цветах), и системной цветовой схемой (на основе текущего циферблата или выбранной пользователем), инициализируйте MaterialScope следующим образом:

val myColorScheme =
    ColorScheme(
        primary = Color.rgb(0, 0, 255).argb, // Blue
        onPrimary = Color.rgb(255, 255, 255).argb, // White
        // 27 more
    )

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    defaultColorScheme = myColorScheme
) {
    // If the user selects "no theme" in settings, myColorScheme is used.
    // Otherwise, the system-provided theme is used.
}

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

Чтобы принудительно задать цветовую схему для мозаики, отключите поддержку динамического оформления, установив для параметра allowDynamicTheme значение false:

materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration,
    allowDynamicTheme = false,
    defaultColorScheme = myColorScheme
) {
    // myColorScheme is *always* used.
}

Цвет

Каждый отдельный компонент использует подмножество из 29 ролей цвета, определенных в ColorScheme. Например, для кнопок используется до четырех цветов, которые по умолчанию берутся из "основной" группы активной ColorScheme:

токен компонента ButtonColors; Роль ColorScheme
containerColor основной
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (непрозрачность 0,8)

Подробные рекомендации по использованию цвета в дизайне Wear OS приведены в руководстве по дизайну.

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

Вы можете настроить цвета компонентов несколькими способами:

  1. Используйте вспомогательную функцию для стандартных цветов. Используйте вспомогательные функции, например filledTonalButtonColors(), чтобы применить стандартные стили кнопок для Material 3 Expressive. Эти функции создают предварительно настроенные экземпляры ButtonColors, которые сопоставляют распространенные стили, такие как заливка, тональность или контур, с подходящими ролями из активной ColorScheme в MaterialScope. Это позволяет применять единые стили, не задавая вручную каждый цвет для стандартных типов кнопок.

    textEdgeButton(
    colors = filledButtonColors(), // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)

    Для карт используйте эквивалентное семейство функций filledCardColors().

    Вы также можете изменить объект ButtonColors, возвращенный вспомогательными функциями, с помощью метода copy(), если вам нужно изменить только один или два токена:

    textEdgeButton(
    colors =
    filledButtonColors()
        .copy(
            containerColor = colorScheme.tertiary,
            labelColor = colorScheme.onTertiary
        ),
    // ... other parameters
)

  2. Явно укажите роли для замены цвета. Создайте собственный объект ButtonColors и передайте его компоненту. Для карт используйте эквивалентный объект CardColors.

    textEdgeButton(
    colors =
    ButtonColors(
        // the materialScope makes colorScheme available
        containerColor = colorScheme.secondary,
        iconColor = colorScheme.secondaryDim,
        labelColor = colorScheme.onSecondary,
        secondaryLabelColor = colorScheme.onSecondary
    ),
    // ... other parameters
)

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

    textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.toInt().argb // Using a hex code for yellow
    ),
    // ... other parameters
)

Параметры текста

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

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

Чтобы создать стиль текста, обычно используется метод text() в сочетании с типографскими константами. Этот компонент позволяет использовать предопределенные роли типографики в Material 3 Expressive, что помогает вашему объявлению-плитке соответствовать установленным типографским рекомендациям по читабельности и иерархии. Библиотека предлагает набор из 18 констант семантической типографики, например BODY_MEDIUM. Эти константы также влияют на оси шрифта, отличные от размера.

text(
    text = "Hello, World!".layoutString,
    typography = BODY_MEDIUM,
)

Чтобы получить больше возможностей управления, задайте дополнительные настройки. На устройствах с Wear OS 6 и более поздних версий, скорее всего, используется переменный шрифт,который можно изменять по осям курсива, насыщенности, ширины и округления. Вы можете управлять этими осями с помощью параметра settings:

text(
    text = "Hello, World".layoutString,
    italic = true,

    // Use elements defined in androidx.wear.protolayout.LayoutElementBuilders.FontSetting
    settings =
    listOf(
        weight(500),
        width(100F),
        roundness(100)
    ),
)

Если вам нужно контролировать размер или межбуквенное расстояние (не рекомендуется), используйте basicText() вместо text() и создайте значение для свойства fontStyle с помощью fontStyle().

Форма и поля

Радиус скругления углов почти любого компонента можно изменить с помощью свойства shape. Значения берутся из свойства MaterialScope shapes:

textButton(
    height = expand(),
    width = expand(),
    shape = shapes.medium, // OR another value like shapes.full
    colors = filledVariantButtonColors(),
    labelContent = { text("Hello, World!".layoutString) },
)

Если после изменения формы компонента вы считаете, что вокруг него осталось слишком много или слишком мало места, настройте поля с помощью параметра margin команды primaryLayout():

primaryLayout(
    mainSlot = {
        textButton(
            shape = shapes.small,
            /* ... */
        )
    },
    // margin constants defined in androidx.wear.protolayout.material3.PrimaryLayoutMargins
    margins = MAX_PRIMARY_LAYOUT_MARGIN,
)

нет аналога в виде фрагментов.

Дуги

Поддерживаются следующие дочерние элементы контейнера Arc:

  • ArcLine – отрисовывает изогнутую линию вокруг дуги.
  • ArcText – позволяет отображать изогнутый текст в Arc.
  • ArcAdapter: отрисовывает базовый элемент макета в дуге, нарисованной по касательной к дуге.

Подробную информацию можно найти в справочной документации по каждому типу элементов.

Клавиши-модификаторы

К каждому доступному элементу макета можно применить модификаторы. Модификаторы используются в следующих целях:

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

Например, мы можем изменить внешний вид и метаданные объекта Image по умолчанию, как показано в следующем примере кода:

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(
            Modifiers.Builder()
                .setBackground(Background.Builder().setColor(argb(0xFFFF0000.toInt())).build())
                .setPadding(ModifiersBuilders.Padding.Builder().setStart(dp(12f)).build())
                .setSemantics(Semantics.Builder().setContentDescription("Image description").build())
                .build()
        )
        .build()

Spannables

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

Контейнер Spannable заполнен дочерними элементами Span. Другие дочерние элементы или вложенные экземпляры Spannable не допускаются.

Существует два типа дочерних элементов Span:

  • SpanText – отрисовывает текст с определенным стилем.
  • SpanImage – встраивает изображение в текст.

Например, вы можете выделить курсивом слово "world" в заголовке "Hello world" и вставить изображение между словами, как показано в следующем примере кода:

private fun mySpannable(): LayoutElement =
    LayoutElementBuilders.Spannable.Builder()
        .addSpan(SpanText.Builder().setText("Hello ").build())
        .addSpan(SpanImage.Builder().setWidth(dp(24f)).setHeight(dp(24f)).setResourceId("image_id").build())
        .addSpan(
            SpanText.Builder()
                .setText("world")
                .setFontStyle(FontStyle.Builder().setItalic(true).build())
                .build()
        )
        .build()

Как работать с ресурсами

Карточки не имеют доступа к ресурсам приложения. Это означает, что вы не можете передать идентификатор изображения Android элементу макета Image и ожидать, что он будет разрешен. Вместо этого переопределите метод onTileResourcesRequest() и укажите все ресурсы вручную.

В методе onTileResourcesRequest() можно указать изображения двумя способами:

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
    Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping(
            "image_from_resource",
            ResourceBuilders.ImageResource.Builder()
                .setAndroidResourceByResId(
                    ResourceBuilders.AndroidImageResourceByResId.Builder()
                        .setResourceId(R.drawable.ic_walk)
                        .build()
                ).build()
        )
        .addIdToImageMapping(
            "image_inline",
            ResourceBuilders.ImageResource.Builder()
                .setInlineResource(
                    ResourceBuilders.InlineImageResource.Builder()
                        .setData(imageAsByteArray)
                        .setWidthPx(48)
                        .setHeightPx(48)
                        .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                        .build()
                ).build()
        ).build()
)

Чек-лист для изображений предпросмотра карточек

Система показывает изображение, на которое ссылается манифест приложения Android, в редакторе карусели при добавлении новой карточки. Этот редактор доступен как на устройствах Wear OS, так и в сопутствующем приложении на телефоне.

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

  • Соответствует последним изменениям в дизайне. Предварительный просмотр должен точно отражать текущий дизайн вашего значка.
  • Использует рекомендуемые параметры. Чтобы обеспечить высокое качество изображения и удобство для пользователей, рекомендуем использовать изображения размером 400 x 400 пикселей.
  • Использует статическую цветовую тему. Используйте статическую цветовую тему, а не динамическую.
  • Включает значок приложения. Убедитесь, что вверху изображения предварительного просмотра показывается значок вашего приложения.
  • Показывает состояние загрузки или входа в аккаунт. В предпросмотре должен быть показан полностью рабочий вариант приложения в состоянии "загружено" или "выполнен вход". Не допускается пустой или заменяющий контент.
  • Используйте правила разрешения ресурсов для настройки (необязательно). Чтобы изображения предпросмотра соответствовали размеру экрана, языку или региональным настройкам устройства, используйте правила разрешения ресурсов Android. Это особенно полезно, если внешний вид элемента различается на разных устройствах.