Cómo interactuar con tarjetas

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.

Nota: El sistema crea automáticamente un área en la que se puede hacer clic de 48 dp x 48 dp alrededor de cada elemento interactivo en tu tarjeta. Mantén estos elementos lo suficientemente lejos para que las áreas en las que se pueda hacer clic no se superpongan. Componentes de Material ya siguen esta guía.

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.

Nota: Para evitar parpadeos y animaciones reiniciadas, no cambies la forma en que se carga tu diseño, excepto las partes en las que las expresiones literales o dinámicas tienen valores actualizados.

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.

Precaución: Ten en cuenta cómo LaunchAction afecta la navegación de la app. Compose para Wear OS recomienda usar una sola actividad en tu app.

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