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.
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
.
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
}
}
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Créer votre première carte dans Wear OS
- Migrer vers les espaces de noms ProtoLayout
- Afficher des informations dynamiques dans des cartes