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

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

Версия Tiles для Wear OS

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

Ресурсы. Объекты 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)
                    }
                )
            )
        )
}Tile.kt

Базовая архитектура `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())
}
Tile.kt

Затем добавьте сервис в тег <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>AndroidManifest.xml

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

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

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

Карточка Wear OS, созданная с помощью Material 3, с текстом "Hello World". — **Рисунок 1.** "Hello World".

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

Создание интерфейса для карточек

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

Макет

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

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

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

Создавайте интерфейс в области видимости. Все компоненты интерфейса для макета карточки должны быть определены в лямбда-выражении одного вызова 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()
            )
        }
    )
}GetStarted.kt

Слоты

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

titleSlot – обычно для основного названия или заголовка.
mainSlot для основного контента.
bottomSlot, часто используется для действий или дополнительной информации. Здесь же появляется кнопка Edge.

Макет карточки с titleSlot, mainSlot и bottomSlot — **Рисунок 2.** titleSlot, mainSlot и bottomSlot.

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

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

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

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

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

Кнопки

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

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

Кнопки Edge

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

iconEdgeButton() – краевая кнопка с одним слотом для значка или другого небольшого круглого контента.
textEdgeButton() – кнопка на краю экрана с одним слотом для текста или другого длинного и широкого контента.

Подсказки

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

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

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

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

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

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

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

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

Система цветов Material 3 Expressive, в которой роли цветов организованы в группы, такие как основной, дополнительный, третичный, ошибка, поверхность и контур. — **Рисунок 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.
}GetStarted.kt

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

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

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

Цвет

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

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

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

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

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

Используйте вспомогательную функцию для стандартных цветов. Используйте вспомогательные функции, например filledTonalButtonColors(), чтобы применять стандартные стили кнопок для Material 3 Expressive. Эти функции создают предварительно настроенные экземпляры ButtonColors, которые сопоставляют распространенные стили, такие как заполненный, тональный или контурный, с соответствующими ролями из активной ColorScheme в MaterialScope. Это позволяет применять единообразные стили, не задавая вручную каждый цвет для распространенных типов кнопок.
```
textEdgeButton(
    colors = filledButtonColors(), // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)GetStarted.kt
```
Для карт используйте эквивалентное семейство функций filledCardColors().

Вы также можете изменить объект ButtonColors, возвращаемый вспомогательными функциями, с помощью метода copy(), если вам нужно изменить только один или два токена:
```
textEdgeButton(
    colors =
    filledButtonColors()
        .copy(
            containerColor = colorScheme.tertiary,
            labelColor = colorScheme.onTertiary
        ),
    // ... other parameters
)GetStarted.kt
```

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

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

Укажите фиксированные цвета (используйте с осторожностью). Обычно рекомендуется указывать цвета по их семантической роли (например, 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
)GetStarted.kt
```

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

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

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

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

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

Для более точного управления можно задать дополнительные настройки. В 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)
    ),
)GetStarted.kt

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

Форма и поля

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

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

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

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

Дуги

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

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

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

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

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

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

Например, можно настроить внешний вид и метаданные по умолчанию для 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()Tile.kt

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()Tile.kt

Работа с ресурсами

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

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

Укажите прорисовываемый ресурс с помощью setAndroidResourceByResId().
Укажите динамическое изображение в виде ByteArray с помощью setInlineResource().

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()
)Tile.kt

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

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

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

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

Как начать работу с плитками Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

классный

Котлин

классный

Котлин

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

Как создать карточку

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

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

Создание интерфейса для карточек

Макет

Слоты

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

Кнопки

Кнопки Edge

Подсказки

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

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

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

Цвет

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

Форма и поля

Дуги

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

Spannables

Работа с ресурсами

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

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

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

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