Puedes mejorar mucho más tu experiencia con las tarjetas si las haces interactivas. Si agregas el modificador Clickable
a un elemento de diseño dentro de la tarjeta, puedes reaccionar cuando un usuario presiona ese elemento de diseño.
En esta página, se enumeran varias acciones comunes que los usuarios realizan en las tarjetas interactivas, junto con orientación sobre cómo implementar este comportamiento en las tarjetas de tu app.
Cómo cargar un nuevo diseño de tarjeta
Usa LoadAction
para actualizar el diseño de la tarjeta cuando el usuario presione un elemento interactivo.
En el siguiente fragmento de código, el ID en el que se puede hacer clic establecido en setId()
se pasa a la llamada onTileRequest()
, para que puedas renderizar un diseño diferente según este ID:
override fun onTileRequest(requestParams: TileRequest) = Futures.immediateFuture(
Tile.Builder()
.setResourcesVersion("1")
.setTileTimeline(Timeline.fromLayoutElement(
when(requestParams.currentState.lastClickableId) {
"foo" -> myFooLayout()
else -> myOtherLayout()
}
)).build()
)
Cómo actualizar el estado de la tarjeta
Si un elemento interactivo de la tarjeta tiene varios estados posibles, usa una LoadAction
para mostrar el nuevo valor del elemento. En el siguiente fragmento de código, la tarjeta muestra el valor actualizado de una casilla de verificación:
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()
Cómo solicitar una actualización del contenido de la tarjeta
Para solicitar una actualización de todo el contenido de la tarjeta, usa LoadAction
y actualiza el estado de la solicitud de la tarjeta, como se muestra en el siguiente fragmento de código.
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()
Cómo cargar una actividad usando un vínculo directo
Para cargar una actividad usando un vínculo directo, asocia un elemento en el que se pueda hacer clic con un objeto 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()
Luego, en el método onTileRequest()
, usa un objeto TaskStackBuilder
como auxiliar:
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.
}
Cómo cargar una actividad exportada
Para cargar una actividad exportada por nombre de clase y con extras de intent, usa una 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()
Dentro de la actividad que se inició, puedes recuperar el ID que se usó para la tarjeta, como se muestra en el siguiente ejemplo:
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
}
}
Recomendaciones para ti
Cómo crear tu primera tarjeta en Wear OS
En este codelab, aprenderás a crear tu propia tarjeta para Wear OS. Usarás Tiles Material Components, una biblioteca que facilita la compilación de una IU que cumple con los lineamientos de Material Design, y obtendrás una vista previa de tus tarjetas en Android Studio a medida que avanzas en el desarrollo.