Начало работы с плиткой

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

классный 

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

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

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

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

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

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

Котлин 

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

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

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

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

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

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

классный 

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

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

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

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

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

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

Котлин 

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

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

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

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

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

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

Ключевые понятия

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

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

Создать плитку

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

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

Плитка «Привет, мир».
Рисунок 1. Плитка «Hello World».

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

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

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

Макет

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

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

  2. Создайте свой UI в рамках области действия: Все компоненты UI для заданного макета Tile должны быть определены в лямбде одного вызова 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(text = "Action".layoutString) }
    )
}

Слоты

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

Материал 3 Выразительная Цветовая Система
Рисунок 3. Выразительная цветовая система Material 3.

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

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

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

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

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

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

Цвет

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

Токен компонента ButtonColors Роль ColorScheme
контейнерЦвет начальный
значокЦвет наОсновном
labelЦвет наОсновном
вторичныйLabelColor onPrimary (непрозрачность 0,8)

Вам может потребоваться отклониться от цветовых маркеров по умолчанию для определенных элементов пользовательского интерфейса. Например, вы можете захотеть, чтобы один 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.argb // Using a hex code for yellow
    )
    // ... other parameters
)

Типографика

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

Для создания стиля текста обычно используется метод 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)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

Ява 

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

Спаннэблс

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

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

Существует два типа детей- Span :

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

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

Котлин 

private fun mySpannable(): LayoutElement =
    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()

Ява 

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

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

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

Существует два способа предоставления изображений в методе onTileResourcesRequest() :

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

Котлин 

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

Ява 

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

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

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

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

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