Interagir avec les cartes

Vous pouvez encore améliorer votre expérience en la rendant interactive. En ajoutant le modificateur Clickable à un élément de mise en page dans la carte, vous pouvez réagir lorsqu'un utilisateur appuie dessus.

Cette page répertorie plusieurs actions courantes que les utilisateurs effectuent dans les cartes interactives, ainsi que des conseils sur la mise en œuvre de ce comportement dans les cartes de votre appli.

Charger une nouvelle mise en page dans la carte

Utilisez LoadAction pour actualiser la mise en page de votre carte lorsque l'utilisateur appuie sur un élément interactif.

Dans l'extrait de code suivant, l'ID cliquable défini dans setId() est transmis à l'appel onTileRequest(). Vous pouvez ainsi afficher une mise en page différente en fonction de cet ID :

override fun onTileRequest(requestParams: TileRequest) = Futures.immediateFuture(
    Tile.Builder()
        .setResourcesVersion("1")
        .setTileTimeline(Timeline.fromLayoutElement(
            when(requestParams.currentState.lastClickableId) {
                "foo" -> myFooLayout()
                else -> myOtherLayout()
            }
        )).build()
)

Mettre à jour l'état dans la carte

Si un élément interactif de votre carte a plusieurs états possibles, utilisez un LoadAction pour afficher la nouvelle valeur de l'élément. Dans l'extrait de code suivant, la carte affiche la valeur mise à jour d'une case à cocher :

private fun checkboxChip(
    checkboxValue: Boolean,
    deviceParameters: DeviceParametersBuilders.DeviceParameters
): Chip =
    Chip.Builder(
            context,
            Clickable.Builder()
                .setOnClick(LoadAction.Builder()
                    .build()
                ).build(),
            deviceParameters
        ).setIconContent(if (checkboxValue) "check" else "checkoff")
        // Set checkbox labels and colors here.
        .build()

Demander l'actualisation du contenu de la carte

Pour demander la mise à jour de l'intégralité du contenu de la carte, utilisez LoadAction et mettez à jour l'état de la requête de la carte, comme indiqué dans l'extrait de code suivant.

Remarque :Pour éviter les clignotements et le redémarrage des animations, ne modifiez pas le mode de chargement de votre mise en page, sauf pour les parties dans lesquelles les expressions littérales ou dynamiques ont des valeurs mises à jour.

private fun tappableElement(): LayoutElement =
    Button.Builder(this, Clickable.Builder()
            .setId("foo")
            .setOnClick(LoadAction.Builder()
                .setRequestState(
                    StateBuilders.State.Builder()
                        /* Update state information here. */
                        .build()
                ).build()
            ).build())
        .setTextContent("Tap me!")
        .build()

Charger une activité à l'aide d'un lien profond

Pour charger une activité à l'aide d'un lien profond, associez un élément cliquable à un objet LoadAction :

private fun tappableElement(): LayoutElement =
    Text.Builder()
        .setText("Tap me!")
        .setModifiers(Modifiers.Builder()
            .setClickable(Clickable.Builder()
                .setId("foo")
                .setOnClick(LoadAction.Builder().build())
                .build()
            ).build()
        ).build()

Ensuite, dans votre méthode onTileRequest(), utilisez un objet TaskStackBuilder comme assistant :

override fun onTileRequest(requestParams: TileRequest): ListenableFuture<TileBuilders.Tile> {
    val lastClickableId = requestParams.currentState.lastClickableId
    if (lastClickableId == "foo") {
      TaskStackBuilder.create(this)
        .addNextIntentWithParentStack(Intent(
            Intent.ACTION_VIEW,
            "https://www.example.com/$lastClickableId".toUri(),
            context,
            MyWearOsAppActivity::class.java
        ))
        .startActivities()
    }
    // The user clicked somewhere else on the tile instead.
}

Charger une activité exportée

Pour charger une activité exportée par nom de classe et avec des extras d'intent, utilisez un LaunchAction.

Attention : Tenez compte de l'impact de LaunchAction sur la navigation dans votre appli. Compose pour Wear OS vous recommande d'utiliser une seule activité dans votre application.

private fun tappableElement(): LayoutElement =
    Text.Builder(this, "Tap me!")
        .setModifiers(Modifiers.Builder()
            .setClickable(Clickable.Builder()
                .setId("foo")
                .setOnClick(ActionBuilders.launchAction(
                    ComponentName("my.package.name", "MyActivity")
                )).build()
            ).build()
        ).build()

Dans l'activité qui a été lancée, vous pouvez récupérer l'ID utilisé pour la carte, comme indiqué dans l'exemple suivant :

class MyActivity : FragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val clickableId =
            intent.getStringExtra(TileService.EXTRA_CLICKABLE_ID)
        // clickableId will be "foo" when launched from the Tile
    }
}