Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Premiers pas avec les cartes

Tiles pour Wear OS version

Pour commencer à fournir des cartes à partir de votre application, incluez les dépendances suivantes dans le fichier build.gradle de votre application.

Groovy

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

Kotlin

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

Concepts clés

Les cartes ne sont pas créées de la même manière que les applications Android et utilisent des concepts différents :

Modèles de mise en page : définissent la disposition générale des éléments visuels sur l'écran. Pour ce faire, utilisez la fonction primaryLayout().
Éléments de mise en page : représentent un élément graphique individuel, tel qu'un bouton ou une fiche, ou plusieurs éléments de ce type regroupés à l'aide d'une colonne, d'un buttonGroup ou d'un élément similaire. Ils sont intégrés dans un modèle de mise en page.

Ressources : les objets ResourceBuilders.Resources se composent d'un mappage de paires clé-valeur des ressources Android (images) requises pour afficher une mise en page, et d'une version.
Chronologie : un objet TimelineBuilders.Timeline est une liste d'une ou de plusieurs instances d'un objet de mise en page. Vous pouvez fournir différents mécanismes et expressions pour indiquer quand le moteur de rendu doit passer d'un objet de mise en page à un autre, par exemple pour arrêter d'afficher une mise en page à un moment précis.
État : structure de données de type StateBuilders.State transmise entre la carte et l'application pour permettre aux deux composants de communiquer entre eux. Par exemple, si un utilisateur appuie sur un bouton de la carte, l'état contient l'ID du bouton. Vous pouvez également échanger des types de données à l'aide d'une carte.
Carte : objet TileBuilders.Tile représentant une carte, composé d'une chronologie, d'un ID de version des ressources, d'un intervalle d'actualisation et d'un état.
Protolayout : ce terme apparaît dans le nom de différentes classes liées aux cartes et fait référence à la bibliothèque Wear OS Protolayout, une bibliothèque graphique utilisée sur différentes surfaces Wear OS.

Créer une carte

Utiliser `Material3TileService` (recommandé)

Lorsque vous créez des cartes Material 3 (androidx.wear.tiles:tiles:1.6.0 et versions ultérieures), étendez toujours Material3TileService au lieu de la classe TileService de niveau inférieur. Material3TileService fournit une architecture Kotlin-first qui simplifie le développement de cartes :

Coroutines Kotlin intégrées : implémentez une seule fonction de suspension MaterialScope.tileResponse(requestParams: TileRequest): Tile au lieu d'utiliser ListenableFuture et de remplacer onTileRequest().
MaterialScope préconfiguré : tileResponse() s'exécute avec MaterialScope comme récepteur (configuré via des paramètres de constructeur tels que allowDynamicTheme et defaultColorScheme). Vous n'avez donc pas besoin d'encapsuler votre mise en page dans un appel materialScope() redondant.
Enregistrement des ressources en un seul appel : inclut ProtoLayoutScope pour enregistrer automatiquement les ressources d'image intégrées et renvoyer à la fois la mise en page et les ressources de la tuile dans un seul appel de binder système. Étant donné que Material3TileService gère automatiquement les ressources (final onTileResourcesRequest()), ne remplacez pas 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

Architecture `TileService` sous-jacente

Material3TileService s'appuie sur la classe de base TileService, que les autres exemples de ce guide utilisent pour illustrer des concepts de bas niveau.

Pour fournir une carte à partir de votre application, implémentez un service de type TileService et enregistrez-le dans votre fichier manifeste. À partir de là, le système demande les cartes nécessaires lors des appels à onTileRequest() et les ressources lors des appels à 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

Ajoutez ensuite un service à l'intérieur de la balise <application> de votre fichier 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

Le filtre d'intent et d'autorisation enregistre ce service en tant que fournisseur de cartes.

L'icône, le libellé, la description et la ressource d'aperçu sont présentés à l'utilisateur lorsqu'il configure des cartes sur son téléphone ou sa montre. Notez que la ressource d'aperçu est compatible avec tous les qualificateurs de ressources standards d'Android. Il est donc possible de modifier l'aperçu en fonction de facteurs tels que la taille de l'écran et la langue de l'appareil. Consultez la checklist de l'aperçu pour obtenir des recommandations supplémentaires.

Déployez votre application et ajoutez la carte au carrousel de cartes (il existe également un moyen plus convivial pour les développeurs de prévisualiser une carte, mais pour l'instant, faites-le manuellement).

Carte Wear OS créée avec Material 3, affichant le texte "Hello World". — **Figure 1.** "Hello World".

Pour obtenir un exemple complet, consultez l'exemple de code sur GitHub ou l'atelier de programmation.

Créer une UI pour les cartes

Les éléments d'interface utilisateur Material 3 Expressive sont créés à l'aide d'une approche structurée basée sur le modèle de compilateur avec sûreté de typage de Kotlin.

Mise en page

Pour en savoir plus sur les principes de conception permettant de créer des mises en page de cartes efficaces et responsives, consultez Mises en page courantes pour les cartes.

Pour créer votre mise en page, procédez comme suit :

Lancer un champ d'application Material Design : appelez la fonction materialScope() en fournissant les éléments context et deviceConfiguration requis. Vous pouvez inclure des paramètres facultatifs, tels que allowDynamicTheme et defaultColorScheme. allowDynamicTheme est défini sur true par défaut, et defaultColorScheme représente le ColorScheme utilisé lorsque les couleurs dynamiques ne sont pas disponibles (par exemple, lorsque l'utilisateur a désactivé la fonctionnalité), lorsqu'elles ne sont pas compatibles avec l'appareil ou lorsque allowDynamicTheme est défini sur false. Lorsque vous utilisez des API ImageResource telles que backgroundImage() dans un TileService personnalisé, appelez plutôt materialScopeWithResources().

Créez votre UI dans le champ d'application : tous les composants d'UI d'une mise en page de carte donnée doivent être définis dans le lambda d'un seul appel materialScope() de niveau supérieur. Ces fonctions de composant, telles que primaryLayout() et textEdgeButton(), sont des fonctions d'extension sur MaterialScope et ne sont disponibles que lorsqu'elles sont appelées sur ce champ d'application du récepteur.

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

Emplacements

Dans M3, la mise en page des cartes utilise une approche inspirée de Compose qui utilise trois emplacements distincts. De haut en bas, il s'agit des éléments suivants :

titleSlot, généralement pour un titre principal ou un en-tête.
mainSlot, pour le contenu principal.
bottomSlot, souvent utilisé pour des actions ou des informations supplémentaires. C'est également là qu'un bouton de bordure apparaît.

Mise en page des cartes montrant titleSlot, mainSlot et bottomSlot — **Figure 2** : titleSlot, mainSlot et bottomSlot.

Le contenu de chaque emplacement est le suivant :

titleSlot (facultatif) : généralement quelques mots générés par text().
mainSlot (obligatoire) : composants organisés en structures telles que des lignes, des colonnes et des groupes de boutons. Ces composants peuvent également être imbriqués de manière récursive les uns dans les autres. Par exemple, une colonne peut contenir des lignes.
bottomSlot (facultatif) : généralement rempli par un bouton collé au bord ou un libellé textuel.

Comme il n'est pas possible de faire défiler les cartes, il n'existe aucun composant permettant de paginer, de faire défiler ou de gérer de longues listes de contenu. Veillez à ce que le contenu reste visible lorsque la taille de la police augmente ou que le texte s'allonge en raison de la traduction.

Composants d'UI

La bibliothèque protolayout-material3 fournit un grand nombre de composants conçus conformément aux spécifications et aux recommandations d'interface utilisateur de Material 3 Expressive.

Boutons

Les boutons sont principalement orientés vers l'action. Ils servent à déclencher des actions spécifiques. Le contenu de chaque bouton, tel qu'une icône ou un texte court, identifie l'action.

textButton() : bouton avec un seul emplacement pour le contenu textuel (court)
iconButton() : bouton avec un seul emplacement pour représenter une icône
avatarButton() : bouton d'avatar en forme de pilule qui offre jusqu'à trois emplacements pour accueillir du contenu représentant un libellé et un libellé secondaire empilés verticalement, ainsi qu'une image (avatar) à côté.
imageButton() : bouton d'image cliquable qui ne propose pas d'emplacements supplémentaires, mais uniquement une image (par exemple, backgroundImage comme arrière-plan)
compactButton() : bouton compact qui propose jusqu'à deux emplacements pour accueillir du contenu empilé horizontalement représentant une icône et du texte à côté.
button() : bouton en forme de pilule qui propose jusqu'à trois emplacements pour le contenu représentant un libellé et un libellé secondaire empilés verticalement, ainsi qu'une icône à côté.

Boutons Edge

Un bouton de bord est un bouton spécialisé, de pleine largeur, ancré au bas de l'écran rond d'une montre. Il représente l'action la plus importante à effectuer à partir de l'écran de la carte actuelle.

iconEdgeButton() : bouton de bordure qui propose un seul emplacement pour une icône ou un contenu similaire, rond et de petite taille.
textEdgeButton() : bouton de bordure qui propose un seul emplacement pour un texte ou un contenu de longueur et de largeur similaires.

Cartes

Les fiches sont principalement axées sur les informations. Ils affichent des collections de données structurées associées. Bien que vous puissiez créer des fiches interactives, elles affichent généralement un résumé des informations, sur lequel l'utilisateur peut ensuite appuyer pour afficher plus de détails ou effectuer une action associée.

titleCard() : carte de titre qui propose un à trois emplacements, généralement textuels
appCard() : fiche d'application offrant jusqu'à cinq emplacements, généralement textuels
textDataCard() : fiche de données qui propose jusqu'à trois emplacements empilés verticalement, généralement basés sur du texte ou des chiffres.
iconDataCard() : fiche de données qui propose jusqu'à trois emplacements empilés verticalement, généralement basés sur du texte ou des chiffres, avec une icône.
graphicDataCard() : fiche de données graphiques qui offre un emplacement pour les données graphiques, comme un indicateur de progression, et jusqu'à deux emplacements empilés verticalement, généralement pour les descriptions textuelles.

Indicateurs de progression

circularProgressIndicator() : indique la progression vers un objectif à l'aide d'un élément radial.
segmentedCircularProgressIndicator() : indique la progression vers un objectif à l'aide d'un élément radial avec des étapes distinctes.

Éléments de mise en page de groupe

buttonGroup() : mise en page de composant qui place ses enfants dans une séquence horizontale
primaryLayout() : mise en page plein écran qui représente un style de mise en page M3 suggéré, responsive et qui gère l'emplacement des éléments, ainsi que les marges et la marge intérieure recommandées.

Appliquer un thème

Dans Material 3 Expressive, le système de couleurs est défini par 29 rôles de couleur standards, organisés en six groupes : primaire, secondaire, tertiaire, erreur, surface et contour.

Le système de couleurs expressives Material 3, qui montre les rôles de couleur organisés en groupes tels que primaire, secondaire, tertiaire, erreur, surface et contour. — **Figure 3.** Le système de couleurs Material 3 Expressive.

Un ColorScheme associe chacun de ces 29 rôles à une couleur correspondante. Comme il fait partie de MaterialScope et que les composants doivent être créés dans ce thème, ils prennent automatiquement les couleurs du jeu de couleurs. Cette approche permet à tous les éléments d'interface utilisateur de respecter automatiquement les normes Material Design.

Pour permettre aux utilisateurs de choisir entre un jeu de couleurs que vous définissez (par exemple, un jeu de couleurs qui reflète les couleurs de votre marque) et un jeu de couleurs fourni par le système (soit dérivé du cadran actuel de l'utilisateur, soit choisi par l'utilisateur), initialisez le MaterialScope comme suit :

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

Si vous choisissez cette option, fournissez une icône de vignette monochrome afin qu'elle puisse être correctement teintée pour une visibilité optimale sur n'importe quel thème.

Pour forcer l'affichage de vos cartes dans le jeu de couleurs que vous fournissez, désactivez la prise en charge des thèmes dynamiques en définissant allowDynamicTheme sur false :

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

Couleur

Chaque composant utilise un sous-ensemble des 29 rôles de couleur définis par un ColorScheme. Par exemple, les boutons utilisent jusqu'à quatre couleurs, qui sont extraites par défaut du groupe "primary" du ColorScheme actif :

Jeton du composant `ButtonColors`	`ColorScheme` role
containerColor	principal
iconColor	onPrimary
labelColor	onPrimary
secondaryLabelColor	onPrimary (opacité : 0,8)

Pour obtenir des instructions détaillées sur l'application de couleurs à vos conceptions Wear OS, consultez le guide de conception des couleurs.

Vous devrez peut-être vous écarter des jetons de couleur par défaut pour certains éléments d'interface utilisateur. Par exemple, vous pouvez souhaiter qu'un textEdgeButton utilise des couleurs du groupe "secondaire" ou "tertiaire" au lieu de "principal" pour se démarquer et offrir un meilleur contraste.

Vous pouvez personnaliser les couleurs des composants de plusieurs façons :

Utilisez une fonction d'assistance pour les couleurs prédéfinies. Utilisez des fonctions d'assistance telles que filledTonalButtonColors() pour appliquer les styles de boutons standards pour Material 3 Expressive. Ces fonctions créent des instances ButtonColors préconfigurées qui mappent des styles courants tels que "filled", "tonal" ou "outlined" aux rôles appropriés à partir du ColorScheme actif dans le MaterialScope. Cela vous permet d'appliquer des styles cohérents sans définir manuellement chaque couleur pour les types de boutons courants.
```
textEdgeButton(
    colors = filledButtonColors(), // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)GetStarted.kt
```
Pour les cartes, utilisez la famille de fonctions filledCardColors() équivalente.

Vous pouvez également modifier l'objet ButtonColors renvoyé par les fonctions d'assistance à l'aide de leur méthode copy() si vous n'avez besoin de modifier qu'un ou deux jetons :
```
textEdgeButton(
    colors =
    filledButtonColors()
        .copy(
            containerColor = colorScheme.tertiary,
            labelColor = colorScheme.onTertiary
        ),
    // ... other parameters
)GetStarted.kt
```

Fournissez explicitement des rôles de couleur de remplacement. Créez votre propre objet ButtonColors et transmettez-le au composant. Pour les fiches, utilisez l'objet CardColors équivalent.

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

Spécifiez des couleurs fixes (à utiliser avec précaution). Bien qu'il soit généralement recommandé de spécifier les couleurs en fonction de leur rôle sémantique (par exemple, colorScheme.primary), vous pouvez également fournir des valeurs de couleur directes. Cette approche doit être utilisée avec parcimonie, car elle peut entraîner des incohérences avec le thème global, en particulier si le thème change de manière dynamique.
```
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
```

Typographie

Pour en savoir plus sur l'utilisation efficace de la typographie dans vos conceptions, consultez le guide de conception de la typographie.

Pour assurer une cohérence visuelle sur la plate-forme Wear OS et optimiser les performances, tout le texte des cartes est affiché à l'aide d'une police fournie par le système. En d'autres termes, les cartes ne sont pas compatibles avec les polices personnalisées. Sur Wear OS 6 et versions ultérieures, il s'agit d'une police spécifique à l'OEM. Dans la plupart des cas, il s'agit d'une police variable, qui offre une expérience plus expressive et un contrôle plus précis.

Pour créer un style de texte, vous utilisez généralement la méthode text() combinée à des constantes typographiques. Ce composant vous permet d'utiliser des rôles de typographie prédéfinis dans Material 3 Expressive, ce qui aide votre carte à respecter les bonnes pratiques typographiques établies en matière de lisibilité et de hiérarchie. La bibliothèque propose un ensemble de 18 constantes de typographie sémantique, telles que BODY_MEDIUM. Ces constantes affectent également les axes de police autres que la taille.

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

Pour renforcer le contrôle, vous pouvez fournir des paramètres supplémentaires. Sur Wear OS 6 et versions ultérieures, une police variable est susceptible d'être utilisée. Vous pouvez la modifier selon les axes italique, épaisseur, largeur et arrondi. Vous pouvez contrôler ces axes à l'aide du paramètre 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

Enfin, si vous devez contrôler la taille ou l'espacement des lettres (non recommandé), utilisez basicText() au lieu de text() et construisez une valeur pour la propriété fontStyle à l'aide de fontStyle().

Forme et marges

Vous pouvez modifier le rayon d'angle de presque tous les composants à l'aide de leur propriété shape. Les valeurs proviennent de la propriété shapes de MaterialScope :

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

Après avoir modifié la forme d'un composant, si vous pensez qu'il laisse trop ou pas assez d'espace autour du bord de l'écran, ajustez les marges à l'aide du paramètre margin de primaryLayout() :

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

Arcs de cercle

Les conteneurs enfants Arc suivants sont acceptés :

ArcLine : affiche une ligne courbe autour de l'arc.
ArcText : affiche du texte incurvé dans l'arc.
ArcAdapter : affiche un élément de mise en page de base dans l'arc, tracé à une tangente par rapport à l'arc.

Pour en savoir plus, consultez la documentation de référence de chacun des types d'éléments.

Modificateurs

Des modificateurs peuvent éventuellement être appliqués à chaque élément de mise en page disponible. Utilisez ces modificateurs aux fins suivantes :

Modifier l'apparence visuelle de la mise en page. Par exemple, ajouter un arrière-plan, une bordure ou une marge intérieure à votre élément de mise en page.
Ajouter des métadonnées sur la mise en page. Par exemple, ajouter un modificateur de sémantique à votre élément de mise en page pour l'utiliser avec des lecteurs d'écran.
Ajouter des fonctionnalités. Par exemple, ajouter un modificateur cliquable à votre élément de mise en page pour rendre la carte interactive. Pour en savoir plus, consultez Interagir avec les cartes.

Nous pouvons, par exemple, personnaliser l'apparence et les métadonnées par défaut d'une Image, comme indiqué dans l'exemple de code suivant :

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

Un Spannable est un type de conteneur spécial qui dispose les éléments de la même manière que le texte. Cela s'avère utile lorsque vous souhaitez appliquer un style différent à une seule sous-chaîne d'un bloc de texte plus grand, ce qui n'est pas possible avec l'élément Text.

Un conteneur Spannable est rempli d'éléments enfants Span. Les autres éléments enfants, ou instances Spannable imbriquées, ne sont pas autorisés.

Il existe deux types d'éléments enfants Span :

SpanText : affiche le texte avec un style spécifique.
SpanImage : affiche une image en l'alignant sur le texte.

Par exemple, vous pouvez mettre en italique le mot "world" dans une carte "Hello world" et insérer une image entre les mots, comme indiqué dans l'exemple de code suivant :

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

Utiliser des ressources

Les cartes n'ont accès à aucune des ressources de votre application. Cela signifie que vous ne pouvez pas transmettre un ID d'image Android à un élément de mise en page Image et vous attendre à ce qu'il soit résolu. Au lieu de cela, remplacez la méthode onTileResourcesRequest() et fournissez des ressources manuellement.

Pour fournir des images au sein de la méthode onTileResourcesRequest(), vous pouvez procéder de deux façons :

Fournissez une ressource drawable à l'aide de setAndroidResourceByResId().
Fournissez une image dynamique en tant que ByteArray à l'aide de 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

Checklist pour l'image d'aperçu de la carte

Le système affiche l'image d'aperçu de la carte, référencée dans le fichier manifeste de l'application Android, dans l'éditeur de carrousel de cartes pour ajouter une carte. Cet éditeur s'affiche à la fois sur les appareils Wear OS et dans l'application associée de la montre sur les téléphones.

Pour aider les utilisateurs à tirer le meilleur parti de cette image d'aperçu, vérifiez les détails suivants concernant votre carte :

Reflète la dernière conception. L'aperçu doit représenter fidèlement la conception la plus récente de votre vignette.
Utilise les dimensions recommandées. Pour offrir la meilleure qualité d'affichage possible et une bonne expérience utilisateur, l'image d'aperçu doit avoir des dimensions de 400 x 400 px.
Utilise un thème de couleurs statique. Utilisez le thème de couleur statique de la tuile, et non un thème dynamique.
Inclut l'icône d'application. Vérifiez que l'icône de votre application s'affiche en haut de l'image d'aperçu.
Affiche l'état de chargement/connexion. L'aperçu doit afficher un état "chargé" ou "connecté" entièrement fonctionnel, en évitant tout contenu vide ou d'espace réservé.
Utilisez les règles de résolution des ressources pour la personnalisation (facultatif). Envisagez d'utiliser les règles de résolution des ressources d'Android pour fournir des aperçus correspondant à la taille d'affichage, à la langue ou aux paramètres régionaux de l'appareil. Cela est particulièrement utile si l'apparence de votre carte varie d'un appareil à l'autre.