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.

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()

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

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.

Última actualización: Dec 11, 2024