Pierwsze kroki z kafelkami

Aby zacząć udostępniać kafelki z aplikacji, dodaj te zależności do pliku build.gradle aplikacji.

Odlotowe

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

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

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

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

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

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

Kotlin

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

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

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

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

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

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

Kluczowych pojęć

Kafelki nie są tworzone w taki sam sposób jak aplikacje na Androida i korzystają z innych koncepcji:

  • Szablony układu: określają ogólne rozmieszczenie elementów wizualnych na ekranie. Do tego służy funkcja primaryLayout().
  • Elementy układu: reprezentują pojedynczy element graficzny, np. przycisk lub kartę, albo kilka takich elementów zgrupowanych za pomocą kolumny, grupy przycisków lub podobnego elementu. Są one umieszczane w szablonie układu.
  • Zasoby: obiekty ResourceBuilders.Resources składają się z mapy par klucz-wartość zasobów Androida (obrazów), które są wymagane do renderowania układu, oraz wersji.
  • Harmonogram: obiekt TimelineBuilders.Timeline to lista co najmniej 1 wystąpienia obiektu układu. Możesz stosować różne mechanizmy i wyrażenia, aby wskazać, kiedy renderowanie powinno przejść z jednego obiektu układu na inny, np. aby w określonym momencie przestać wyświetlać dany układ.
  • Stan: struktura danych typu StateBuilders.State, która jest przekazywana między kafelkiem a aplikacją, aby umożliwić obu komponentom komunikowanie się ze sobą. Jeśli np. użytkownik kliknie przycisk na kafelku, stan będzie zawierać identyfikator tego przycisku. Typy danych możesz też wymieniać za pomocą mapy.
  • Płytka: obiekt TileBuilders.Tile reprezentujący płytkę, który składa się z osi czasu, identyfikatora wersji zasobów, interwału świeżości i stanu.
  • Protolayout: ten termin pojawia się w nazwach różnych klas związanych z kafelkami i odnosi się do biblioteki Protolayout na Wear OS, czyli biblioteki graficznej używanej na różnych platformach Wear OS.

Tworzenie kafelka

Aby udostępnić kafelek z aplikacji, zaimplementuj usługę typu TileService i zarejestruj ją w pliku manifestu. W tym celu system wysyła żądania niezbędnych płytek podczas wywołania onTileRequest() i zasobów podczas wywołania 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

Następnie dodaj usługę w tagu <application> pliku 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

Filtr uprawnień i zamiarów rejestruje tę usługę jako dostawcę kafelka.

Ikona, etykieta, opis i zasob do podglądu są wyświetlane użytkownikowi podczas konfigurowania kart na telefonie lub zegarku. Pamiętaj, że zasób podglądu obsługuje wszystkie standardowe atrybuty zasobu w Androidzie, więc możesz zmieniać podgląd w zależności od czynników takich jak rozmiar ekranu i język urządzenia. Więcej rekomendacji znajdziesz na liście kontrolnej podglądu.

Wprowadź aplikację i dodaj kartę do karuzeli kart (jest też bardziej przyjazny dla deweloperów sposób wyświetlania podglądu karty, ale na razie wykonaj to ręcznie).

Płytka „Hello World”.
Rysunek 1. Płytka „Hello World”.

Pełny przykład znajdziesz w przykładowym kodzie na GitHubie lub w laboratorium kodu.

Tworzenie interfejsu dla płytek

Elementy interfejsu użytkownika Material 3 Expressive są tworzone za pomocą ustrukturyzowanego podejścia opartego na wzorze kreatora z zabezpieczeniem typu w języku Kotlin.

Układ

Wskazówki dotyczące zasad projektowania skutecznych i responsywnych układów kart znajdziesz we wskazówkach Typowe układy kart.

Aby utworzyć układ:

  1. Rozpocznij zakres Material Design: wywołaj funkcję materialScope(), podając wymagane parametry context i deviceConfiguration. Możesz uwzględnić parametry opcjonalne, takie jak allowDynamicTheme i defaultColorScheme. Wartość allowDynamicTheme to domyślnie true, a wartość defaultColorScheme to ColorScheme, która jest używana, gdy kolory dynamiczne są niedostępne (np. gdy użytkownik wyłączył tę funkcję lub gdy nie jest ona obsługiwana przez urządzenie albo gdy allowDynamicTheme to false).

  2. Tworzenie interfejsu użytkownika w ramach zakresu: wszystkie komponenty interfejsu użytkownika dla danego układu kafelka muszą być zdefiniowane w ramach lambda w pojedynczym wywołaniu poziomu najwyższego materialScope(). Te funkcje komponentu, takie jak primaryLayout() i textEdgeButton(), są funkcjami rozszerzonymi funkcji MaterialScope i są dostępne tylko wtedy, gdy są wywoływane w ramach tego zakresu odbiornika.

    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) }
    )
}

Automaty

W M3 układ kafelków wykorzystuje podejście inspirowane Compose, które korzysta z 3 odrębnych miejsc. Od góry do dołu:

  1. titleSlot, zwykle dla głównego tytułu lub nagłówka.
  2. mainSlot – dla treści głównych.
  3. bottomSlot, często używane do wykonywania czynności lub wyświetlania informacji dodatkowych. Tutaj też pojawia się przycisk krawędzi.
Układ kafelków z titleSlot, mainSlot i bottomSlot
Rysunek 2. Boksy titleSlot, mainSlot i bottomSlot.

Treść każdego boksu:

  • titleSlot (opcjonalnie): zwykle kilka słów wygenerowanych przez text().
  • mainSlot (obowiązkowo): komponenty uporządkowane w struktury takie jak wiersze, kolumny i grupy przycisków. Te komponenty mogą być też zagnieżdżone w sposób rekurencyjny, np. kolumna może zawierać wiersze.
  • bottomSlot (opcjonalnie): zwykle wypełnione przyciskiem dopasowanym do krawędzi lub etykietą tekstową.

Ponieważ kafelków nie można przewijać, nie ma komponentów do przewijania stron ani obsługi długich list treści. Zadbaj o to, aby treści były widoczne, gdy rozmiar czcionki zwiększy się lub tekst stanie się dłuższy z powodu tłumaczenia.

Komponenty interfejsu

Biblioteka protolayout-material3 zawiera wiele komponentów zaprojektowanych zgodnie ze specyfikacją Material 3 Expressive i zaleceniami dotyczącymi interfejsu użytkownika.

Przyciski

  • textButton(): przycisk z jednym miejscem na krótki tekst.
  • iconButton(): przycisk z 1 miejscem na ikonę.
  • avatarButton(): przycisk awatara w kształcie pigułki, który zawiera do 3 miejsc na zawartość reprezentującą etykietę ułożoną pionowo i etykietę pomocniczą oraz obraz (awatar) obok
  • imageButton(): klikalny przycisk z obrazem, który nie oferuje dodatkowych slotów, tylko obraz (np. backgroundImage jako tło).
  • compactButton(): kompaktowy przycisk, który oferuje do 2 miejsc na ułożone poziomo treści reprezentujące ikonę i tekst obok niej.
  • button(): przycisk w kształcie pigułki, który zawiera maksymalnie 3 miejsca na zawartość reprezentującą etykietę ułożoną pionowo i etykietę pomocniczą oraz ikonę obok

Przyciski krawędziowe

  • iconEdgeButton(): przycisk krawędziowy z jednym gniazdem na ikonę lub podobny okrągły, mały element
  • textEdgeButton(): przycisk krawędziowy z jednym gniazdem na tekst lub podobnej długości i szerokości treści.

karty;

  • titleCard(): karta tytułowa, która zawiera 1–3 miejsca na tekst.
  • appCard(): karta aplikacji, która zawiera do 5 miejsc, zwykle tekstowych.
  • textDataCard(): karta danych, która zawiera do 3 ułożonych pionowo slotów, zwykle tekstowych lub liczbowych.
  • iconDataCard(): karta danych, która zawiera do 3 umieszczonych pionowo slotów, zwykle z tekstem lub cyframi, z ikoną
  • graphicDataCard(): karta danych graficznych, która zawiera miejsce na dane graficzne, takie jak wskaźnik postępu, oraz maksymalnie 2 poziomo ułożone miejsca, zwykle na opisy tekstowe.

Wskaźniki postępu

Grupowanie elementów układu

  • buttonGroup(): układ komponentu, który umieszcza swoje elementy w układ poziomy
  • primaryLayout(): układ pełnoekranowy, który reprezentuje sugerowany styl układu M3, który jest elastyczny i zajmuje się umieszczaniem elementów, wraz z zalecanymi marginesami i odstępami

Motywy

W Material 3 Expressive system kolorów jest zdefiniowany przez 29 standardowych ról kolorów, podzielonych na 6 grup: podstawowych, dodatkowych, trzeciorzędnych, błędów, powierzchni i konturów.

System wyrazistych kolorów Material 3
Rysunek 3. System wyrazistych kolorów Material 3.

ColorScheme przypisuje każdemu z tych 29 ról odpowiedni kolor, a ponieważ jest ono częścią MaterialScope i w jego ramach muszą być tworzone komponenty, automatycznie przyjmują one kolory z schematu. Dzięki temu wszystkie elementy interfejsu użytkownika automatycznie będą zgodne ze standardami Material Design.

Aby umożliwić użytkownikom wybór między zdefiniowanym przez Ciebie schematem kolorów (np. odzwierciedlającym kolory Twojej marki) a tym, który jest dostarczany przez system (wyprowadzonym z obecnej tarczy zegarka użytkownika lub wybranym przez niego), zainicjuj MaterialScope w ten sposób:

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.
}

Aby wymusić wyświetlanie kafelków w określonym schemacie kolorów, wyłącz obsługę motywów dynamicznych, ustawiając wartość allowDynamicTheme na false:

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

Kolor

Każdy pojedynczy komponent używa podzbioru 29 ról kolorów zdefiniowanych przez ColorScheme. Na przykład przyciski mogą używać maksymalnie 4 kolory, które domyślnie są pobierane z grupy „primary” aktywnego ColorScheme:

Token komponentu ButtonColors ColorScheme rola
containerColor główny
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (nieprzezroczystość 0,8)

Szczegółowe wskazówki dotyczące stosowania kolorów w projektach na Wear OS znajdziesz w przewodniku po projektowaniu z użyciem kolorów.

W przypadku niektórych elementów interfejsu użytkownika może być konieczne odstępstwo od domyślnych tokenów kolorów. Możesz na przykład użyć w jednym textEdgeButton kolorów z grupy „drugorzędnej” lub „trzeciorzędnej” zamiast z grupy „pierwotnej”, aby wyróżnić ten element i uzyskać lepszy kontrast.

Kolory komponentów możesz dostosować na kilka sposobów:

  1. Użyj funkcji pomocniczej do zdefiniowanych kolorów. Aby zastosować standardowe style przycisków w Material 3 Expressive, użyj funkcji pomocniczych, takich jak filledTonalButtonColors(). Te funkcje tworzą wstępnie skonfigurowane instancje ButtonColors, które mapują typowe style, takie jak wypełnione, tonalne lub obrysowane, na odpowiednie role w aktywnej ColorScheme w ramach MaterialScope. Dzięki temu możesz stosować spójne style bez ręcznego definiowania poszczególnych kolorów w przypadku typowych typów przycisków.

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

    W przypadku kart użyj odpowiednich funkcji z rodziny filledCardColors().

    Jeśli chcesz zmienić tylko 1 lub 2 tokeny, możesz zmodyfikować obiekt ButtonColors zwracany przez funkcje pomocnicze, używając metody copy():

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

  2. Wyraźnie określ role kolorów zastępczych. Utwórz własny obiekt ButtonColors i przekaż go do komponentu. W przypadku kart użyj obiektu CardColors.

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

  3. Określ stałe kolory (używaj z zastrzeżeniem). Ogólnie zaleca się określanie kolorów według ich roli semantycznej (np. colorScheme.primary), możesz też podać bezpośrednie wartości kolorów. Z tego podejścia należy korzystać oszczędnie, ponieważ może ono prowadzić do niespójności w całości motywu, zwłaszcza jeśli zmienia się on dynamicznie.

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

Typografia

Więcej informacji o skutecznym stosowaniu typografii w projektach znajdziesz w przewodniku po typografii.

Aby zapewnić spójność wizualną na platformie Wear OS i zoptymalizować wydajność, cały tekst na kafelkach jest renderowany przy użyciu czcionki dostarczonej przez system. Oznacza to, że kafelki nie obsługują niestandardowych czcionek. W Wear OS 6 lub nowszym jest to czcionka producenta OEM. W większości przypadków będzie to czcionka zmienna, która zapewni bardziej wyraziste wyświetlanie i większą kontrolę.

Aby utworzyć styl tekstu, zwykle używasz metody text() w połączeniu z konstantami typograficznymi. Ten komponent umożliwia korzystanie z wstępnie zdefiniowanych ról typograficznych w Material 3 Expressive, co pomaga zapewnić kafelkowi zgodność ze sprawdzonymi metodami typograficznymi dotyczącymi czytelności i hierarchii. Biblioteka zawiera zestaw 18 semantycznych stałych typograficznych, takich jak BODY_MEDIUM. Te stałe wpływają też na inne osie czcionki niż rozmiar.

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

Aby uzyskać większą kontrolę, możesz ustawić dodatkowe ustawienia. W Wear OS 6 i wyższych wersjach używana jest czcionka zmienna, którą można modyfikować wzdłuż osi kursywa, grubość, szerokość i zaokrąglenie. Możesz sterować tymi osiami za pomocą parametru 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)),
)

Jeśli chcesz kontrolować rozmiar lub odstęp między literami (niezalecane), zamiast funkcji text() użyj funkcji basicText(), a wartość właściwości fontStyle ułóż za pomocą funkcji fontStyle().

Kształt i marginesy

Promień zaokrąglenia rogów możesz zmienić w przypadku prawie każdego komponentu za pomocą właściwości shape. Wartości pochodzą z właściwości MaterialScope shapes:

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

Jeśli po zmianie kształtu komponentu uważasz, że wokół krawędzi wyświetlacza jest za dużo lub za mało miejsca, dostosuj marginesy za pomocą parametru margin w primaryLayout():

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

Łuki

Obsługiwane są te elementy kontenera Arc:

  • ArcLine: powoduje wyświetlenie wygiętej linii wokół łuku.
  • ArcText: renderowanie wygiętego tekstu w elementach łukowych.
  • ArcAdapter: renderowanie podstawowego elementu układu na łuku, narysowanego wzdłuż łuku dotyczącego.

Więcej informacji znajdziesz w dokumentacji dotyczącej poszczególnych typów elementów.

Modyfikatory

Do każdego dostępnego elementu układu można opcjonalnie zastosować modyfikatory. Używaj tych modyfikatorów w tych celach:

  • Zmienianie wizualnego wyglądu układu. Możesz np. dodać tło, obramowanie lub wypełnienie do elementu układu.
  • Dodaj metadane dotyczące układu. Możesz na przykład dodać do elementu układu modyfikator semantyczny, aby był on obsługiwany przez czytniki ekranu.
  • Dodawanie funkcji. Możesz na przykład dodać do elementu układu modyfikator z możliwością kliknięcia, aby kafelek stał się interaktywny. Więcej informacji znajdziesz w artykule Interakcja z kartami.

Możemy na przykład dostosować domyślny wygląd i metadane Image, jak pokazano w tym przykładowym kodzie:

Kotlin

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()

Java

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();
}

Rozszerzenia

Spannable to specjalny typ kontenera, który rozmieszcza elementy w sposób podobny do tekstu. Jest to przydatne, gdy chcesz zastosować inny styl tylko do jednego podciągu w większym bloku tekstu. Nie jest to możliwe w przypadku elementu Text.

Kontenerek Spannable jest wypełniony elementami podrzędnymi Span. Inne podrzędne lub zagnieżdżone instancje Spannable są niedozwolone.

Istnieją 2 rodzaje elementów podrzędnych Span:

  • SpanText: renderuje tekst w określonym stylu.
  • SpanImage: renderuje obraz w tekście.

Możesz na przykład umieścić kursywę w słowie „world” na kafelku „Hello world” i wstawić między słowami obraz, jak w tym przykładzie kodu:

Kotlin

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()

Java

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();
}

Praca z zasobami

Płytki nie mają dostępu do żadnych zasobów aplikacji. Oznacza to, że nie możesz przekazać identyfikatora obrazu Androida do elementu układu Image i spodziewać się, że zostanie on rozwiązany. Zamiast tego zastąpij metodę onTileResourcesRequest() i dostarczaj zasoby ręcznie.

Obrazy można przesłać w ramach metody onTileResourcesRequest() na 2 sposoby:

Kotlin

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()
)

Java

@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()
);
}

Lista kontrolna obrazów podglądu kart

System wyświetla w edytorze karuzeli kafelków obraz podglądu kafelka, do którego odwołuje się plik manifestu aplikacji na Androida, w celu dodania nowego kafelka. Ten edytor jest dostępny zarówno na urządzeniach z Wear OS, jak i w aplikacji towarzyszącej na zegarku na telefonach.

Aby pomóc użytkownikom w pełni wykorzystać ten obraz podglądu, sprawdź te informacje o płytce:

  • Odzwierciedla najnowszy projekt. Podgląd powinien dokładnie odzwierciedlać najnowszy projekt kafelka.
  • Używa zalecanych wymiarów. Aby zapewnić najlepszą jakość wyświetlania i wygodę użytkowników, obraz podglądu powinien mieć wymiary 400 x 400 pikseli.
  • Używa stałego motywu kolorów. Użyj stałego motywu kolorów kafelka, a nie dynamicznego.
  • Zawiera ikonę aplikacji. Sprawdź, czy ikona aplikacji znajduje się u góry obrazu podglądu.
  • Pokazuje stan wczytania/zalogowania. Podgląd powinien wyświetlać w pełni funkcjonalny stan „załadowany” lub „zalogowany”, bez pustych treści ani treści zastępczych.
  • Użyj reguł rozwiązywania zasobów do personalizacji (opcjonalnie). Rozważ użycie reguł rozdzielczości zasobów w Androidzie, aby wyświetlać podgląd, który pasuje do ustawień rozmiaru wyświetlacza, języka lub lokalizacji urządzenia. Jest to szczególnie przydatne, jeśli wygląd kafelka różni się na różnych urządzeniach.