Prévisualiser les cartes Wear OS dans Android Studio

À partir de la mise à jour groupée Android Studio Koala, vous pouvez afficher des instantanés de votre Cartes de l'application Wear OS. Ce panneau est particulièrement utile si l'apparence de votre carte des changements en réponse à des conditions, comme des contenus différents en fonction la taille d'affichage d'un appareil ou un événement sportif qui a atteint la mi-temps.

Panneau d'aperçu des cartes dans Android Studio

Ajouter des dépendances

Incluez les dépendances suivantes dans le fichier build.gradle.kts de votre application ou Fichier build.gradle:

dependencies {
    implementation("androidx.wear.tiles:tiles-tooling-preview:1.4.0")
    debugImplementation("androidx.wear.tiles:tiles-tooling:1.4.0")
    implementation("androidx.wear:wear-tooling-preview:1.0.0")
}

Configurer les aperçus de cartes

Afficher un aperçu de l'apparence de votre carte sur différents écrans Wear OS les tailles, ajoutez l'annotation @Preview et transmettez le paramètre device. Remarque que cette annotation @Preview provient d'un package différent de celui que vous utiliser pour les aperçus composables.

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
@Preview(device = WearDevices.LARGE_ROUND)
fun tilePreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

Remarque :Bien que l'annotation @Preview soit spécifique aux cartes Wear OS, d'autres des options telles que device, name, group, fontScale et locale fonctionnent pour les aperçus de cartes Wear OS et pour les aperçus de composants utilisez Compose sur Wear OS.

Ajouter et enregistrer des ressources

Si votre carte utilise des ressources Android, vous devrez les enregistrer dans le le paramètre onTileResourceRequest de TilePreviewData, comme indiqué dans les l'extrait de code suivant:

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithResources(context: Context) = TilePreviewData(
    onTileResourceRequest = { request ->
        Resources.Builder()
            .setVersion(myResourcesVersion)
            .addIdToImageMapping(
                    myImageId, getImageById(R.drawable.myDrawableImageId))
            .build()
    },
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)

fun getImageById(
    @DrawableRes id: Int,
): ImageResource =
    ImageResource.Builder()
        .setAndroidResourceByResId(
            AndroidImageResourceByResId.Builder()
                .setResourceId(id)
                .build(),
        )
        .build()

Afficher des valeurs spécifiques à partir des sources de données de la plate-forme

Si votre vignette utilise les données de la plateforme, comme la fréquence cardiaque, les calories, la distance et étapes, la vignette affiche les valeurs par défaut correspondantes.

Pour afficher une valeur spécifique, définissez le paramètre platformDataValues lors de la création de l'objet TilePreviewData, comme indiqué dans l'extrait de code suivant :

import androidx.wear.tiles.tooling.preview.Preview

@Preview(device = WearDevices.SMALL_ROUND)
fun previewWithPlatformOverride(context: Context) = TilePreviewData(
    platformDataValues = PlatformDataValues.of(
        PlatformHealthSources.Keys.HEART_RATE_BPM,
        DynamicDataBuilders.DynamicDataValue.fromFloat(160f)
    ),
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildMyTileLayout()
        ).build()
    }
)