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

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

классный 

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.5.0-alpha04"

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

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

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

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

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

Котлин

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

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

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

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

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

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

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

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

  • Шаблоны макетов: определяют общее расположение визуальных элементов на дисплее. Плитка использует либо шаблон макета EdgeContentLayout , который включает индикатор выполнения по краю дисплея, либо PrimaryLayout , который не отображает этот индикатор.
  • Элементы макета: представляют отдельный графический элемент, такой как Button или Chip , или несколько таких элементов, сгруппированных вместе с помощью Column , MultiButtonLayout , MultiSlotLayout или аналогичных. Они встроены в шаблон макета .
  • Ресурсы: объекты ResourceBuilders.Resources состоят из карты пар ключ-значение ресурсов Android (изображений), которые необходимы для визуализации макета, и версии .
  • Временная шкала: объект TimelineBuilders.Timeline представляет собой список одного или нескольких экземпляров объекта макета . Вы можете предоставить различные механизмы и выражения, чтобы указать, когда средство визуализации должно переключиться с одного объекта макета на другой, например, прекратить показ макета в определенное время.
  • State: структура данных типа StateBuilders.State , которая передается между плиткой и приложением, чтобы позволить двум компонентам взаимодействовать друг с другом. Например, если на плитке нажать кнопку, состояние сохранит идентификатор кнопки. Вы также можете обмениваться типами данных с помощью карты.
  • Tile: объект 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(
                        Text.Builder(this, "Hello World!")
                            .setTypography(Typography.TYPOGRAPHY_BODY1)
                            .setColor(argb(0xFFFFFFFF.toInt()))
                            .build()
                    )
                )
                .build()
        )

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

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

<service
    android:name=".snippets.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

Фильтр разрешений и намерений регистрирует эту службу в качестве поставщика плиток.

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

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

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

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

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

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

Основные элементы макета

Вместе с компонентами Material поддерживаются следующие визуальные элементы из библиотеки protolayout :

  • Text : отображает строку текста, при необходимости перенося ее.
  • Image : отображает изображение.
  • Spacer : обеспечивает заполнение между элементами или может выступать в качестве разделителя, когда вы устанавливаете цвет фона.

Компоненты материала

В дополнение к базовым элементам библиотека protolayout-material предоставляет компоненты, которые обеспечивают дизайн плитки в соответствии с рекомендациями пользовательского интерфейса Material Design.

  • Button : кликабельный круглый компонент, содержащий значок.

  • Chip : кликабельный компонент в форме стадиона, содержащий до двух строк текста и дополнительный значок.

  • CompactChip : кликабельный компонент в форме стадиона, предназначенный для хранения строки текста.

  • TitleChip : кликабельный компонент в форме стадиона, похожий на Chip , но с большей высотой для размещения текста заголовка.

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

Контейнеры макета

Наряду с макетами материалов поддерживаются следующие контейнеры:

  • Row : размещает дочерние элементы горизонтально, один за другим.
  • Column : размещает дочерние элементы вертикально, один за другим.
  • Box : накладывает дочерние элементы друг на друга.
  • Arc : размещает дочерние элементы по кругу.
  • Spannable : применяет определенные FontStyles к разделам текста вместе с чередованием текста и изображений. Для получения дополнительной информации см. Spannables .

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

Например, плитка с макетом-контейнером и двумя дочерними элементами макета может выглядеть так:

Котлин 

private fun myLayout(): LayoutElement =
    Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VERTICAL_ALIGN_BOTTOM)
        .addContent(Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build()

Ява 

private LayoutElement myLayout() {
    return new Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VALIGN_BOTTOM)
        .addContent(new Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(new Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build();
}

Макеты материалов

В дополнение к базовым макетам библиотека protolayout-material предоставляет несколько самостоятельных макетов, предназначенных для размещения элементов в определенных «слотах».

  • PrimaryLayout : размещает одно основное действие CompactChip внизу, а содержимое центрирует над ним.

  • MultiSlotLayout : позиционирует первичные и вторичные метки с дополнительным содержимым между ними и дополнительным CompactChip внизу.

  • MultiButtonLayout : позиционирует набор кнопок, расположенных в соответствии с рекомендациями по материалам.

  • EdgeContentLayout : размещает содержимое по краю экрана, например CircularProgressIndicator . При использовании этого макета к содержимому внутри него автоматически применяются соответствующие поля и отступы.

Дуги

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

  • ArcLine : отображает изогнутую линию вокруг дуги.
  • ArcText : отображает изогнутый текст в дуге.
  • 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 : отображает изображение вместе с текстом.

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

Котлин 

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()
);
}
{% дословно %} {% дословно %} {% дословно %} {% endverbatim %} ,

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

классный 

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.5.0-alpha04"

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

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

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

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

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

Котлин

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

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

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

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

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

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

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

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

  • Шаблоны макетов. Определите общее расположение визуальных элементов на дисплее. Плитка использует либо шаблон макета EdgeContentLayout , который включает индикатор выполнения по краю дисплея, либо PrimaryLayout , который не отображает этот индикатор.
  • Элементы макета: представляют отдельный графический элемент, такой как Button или Chip , или несколько таких элементов, сгруппированных вместе с помощью Column , MultiButtonLayout , MultiSlotLayout или аналогичных. Они встроены в шаблон макета .
  • Ресурсы: объекты ResourceBuilders.Resources состоят из карты пар ключ-значение ресурсов Android (изображений), которые необходимы для визуализации макета, и версии .
  • Временная шкала: объект TimelineBuilders.Timeline представляет собой список одного или нескольких экземпляров объекта макета . Вы можете предоставить различные механизмы и выражения, чтобы указать, когда средство визуализации должно переключиться с одного объекта макета на другой, например, прекратить показ макета в определенное время.
  • State: структура данных типа StateBuilders.State , которая передается между плиткой и приложением, чтобы позволить двум компонентам взаимодействовать друг с другом. Например, если на плитке нажать кнопку, состояние сохранит идентификатор кнопки. Вы также можете обмениваться типами данных с помощью карты.
  • Tile: объект 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(
                        Text.Builder(this, "Hello World!")
                            .setTypography(Typography.TYPOGRAPHY_BODY1)
                            .setColor(argb(0xFFFFFFFF.toInt()))
                            .build()
                    )
                )
                .build()
        )

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

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

<service
    android:name=".snippets.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

Фильтр разрешений и намерений регистрирует эту службу в качестве поставщика плиток.

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

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

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

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

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

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

Основные элементы макета

Вместе с компонентами Material поддерживаются следующие визуальные элементы из библиотеки protolayout :

  • Text : отображает строку текста, при необходимости перенося ее.
  • Image : отображает изображение.
  • Spacer : обеспечивает отступы между элементами или может выступать в качестве разделителя, когда вы устанавливаете цвет фона.

Компоненты материала

В дополнение к базовым элементам библиотека protolayout-material предоставляет компоненты, которые обеспечивают дизайн плитки в соответствии с рекомендациями пользовательского интерфейса Material Design.

  • Button : кликабельный круглый компонент, содержащий значок.

  • Chip : кликабельный компонент в форме стадиона, содержащий до двух строк текста и дополнительный значок.

  • CompactChip : кликабельный компонент в форме стадиона, предназначенный для хранения строки текста.

  • TitleChip : кликабельный компонент в форме стадиона, похожий на Chip , но с большей высотой для размещения текста заголовка.

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

Контейнеры макета

Наряду с макетами материалов поддерживаются следующие контейнеры:

  • Row : размещает дочерние элементы горизонтально, один за другим.
  • Column : размещает дочерние элементы вертикально, один за другим.
  • Box : накладывает дочерние элементы друг на друга.
  • Arc : размещает дочерние элементы по кругу.
  • Spannable : применяет определенные FontStyles к разделам текста вместе с чередованием текста и изображений. Для получения дополнительной информации см. Spannables .

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

Например, плитка с макетом-контейнером и двумя дочерними элементами макета может выглядеть так:

Котлин 

private fun myLayout(): LayoutElement =
    Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VERTICAL_ALIGN_BOTTOM)
        .addContent(Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build()

Ява 

private LayoutElement myLayout() {
    return new Row.Builder()
        .setWidth(wrap())
        .setHeight(expand())
        .setVerticalAlignment(VALIGN_BOTTOM)
        .addContent(new Text.Builder()
            .setText("Hello world")
            .build()
        )
        .addContent(new Image.Builder()
            .setResourceId("image_id")
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .build()
        ).build();
}

Макеты материалов

В дополнение к базовым макетам библиотека protolayout-material предоставляет несколько самостоятельных макетов, предназначенных для размещения элементов в определенных «слотах».

  • PrimaryLayout : размещает одно основное действие CompactChip внизу, а содержимое центрирует над ним.

  • MultiSlotLayout : позиционирует первичные и вторичные метки с дополнительным содержимым между ними и дополнительным CompactChip внизу.

  • MultiButtonLayout : позиционирует набор кнопок, расположенных в соответствии с рекомендациями по материалам.

  • EdgeContentLayout : размещает содержимое по краю экрана, например CircularProgressIndicator . При использовании этого макета к содержимому внутри него автоматически применяются соответствующие поля и отступы.

Дуги

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

  • ArcLine : визуализирует изогнутую линию вокруг дуги.
  • ArcText : отображает изогнутый текст в дуге.
  • 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 : отображает изображение вместе с текстом.

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

Котлин 

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()
);
}
{% дословно %} {% дословно %} {% дословно %} {% дословно %}