Cómo crear caras de reloj interactivas

Un usuario puede interactuar con tu cara de reloj de diferentes maneras. Por ejemplo, un usuario podría presionar la cara de reloj para saber cuál es la canción que se está reproduciendo en el momento o para ver la agenda del día. Wear OS by Google permite que las caras de reloj acepten un gesto de toque único en un punto determinado, siempre que no haya otro elemento de la IU que también responda a ese gesto.

En esta lección, aprenderás a implementar una cara de reloj interactiva construyendo primero un estilo de cara de reloj e implementando, posteriormente, el control gestual.

Nota: Antes de comenzar a trabajar en el desarrollo de tu cara de reloj interactiva, asegúrate de leer la sección sobre Caras de reloj interactivas.

Controlar eventos de toque

Cuando creas un estilo de cara de reloj interactivo, lo primero que tu app debe hacer es indicarle al sistema que la cara de reloj recibe eventos de toque. En el siguiente ejemplo, se muestra la manera de hacerlo:

Kotlin

setWatchFaceStyle(WatchFaceStyle.Builder(service)
        .setAcceptsTapEvents(true)
        // other style customizations
        .build())

Java

setWatchFaceStyle(new WatchFaceStyle.Builder(service)
        .setAcceptsTapEvents(true)
        // other style customizations
        .build());

Cuando detecta un toque en la cara de reloj, el sistema activa el método WatchFaceService.Engine.onTapCommand(). Anula este método en la implementación de WatchFaceService.Engine para iniciar la acción que quieras realizar, como mostrar un conteo de pasos detallado o cambiar el tema de la cara de reloj. En el fragmento de código de Controlar gestos se muestra un ejemplo de una implementación como esta.

Controlar gestos

Para proporcionar una experiencia uniforme al usuario, el sistema reserva gestos como los de arrastre y presión prolongada para elementos de la IU del sistema. Por lo tanto, el sistema no envía eventos de toque sin procesar a la cara de reloj. En su lugar, envía comandos específicos al método onTapCommand().

El sistema envía el primer comando, TAP_TYPE_TOUCH, cuando el usuario toca inicialmente la pantalla. Este evento te permite proporcionar al usuario comentarios visuales cuando presiona la pantalla. Tu app no debe iniciar una IU cuando se activa este evento. El inicio de una IU no permite que los eventos de arrastre abran el lanzador de la app, el panel de configuración y el flujo de notificaciones.

Antes de enviar el siguiente comando, el sistema evalúa si el contacto es un toque único, que es el único gesto permitido. Si el usuario levanta el dedo inmediatamente, el sistema determina que se realizó un solo toque y envía un evento TAP_TYPE_TAP. Si el usuario no levanta el dedo de inmediato, el sistema envía un evento TAP_TYPE_TOUCH_CANCEL. Una vez que el usuario active un evento TAP_TYPE_TOUCH_CANCEL, no podrá activar un evento TAP_TYPE_TAP hasta que ocurra un nuevo contacto con la pantalla.

En el siguiente ejemplo, se muestra la forma de implementar eventos de toque en una cara de reloj:

Kotlin

override fun onTapCommand(@TapType tapType: Int, x: Int, y: Int, eventTime: Long) {
    when (tapType) {
        WatchFaceService.TAP_TYPE_TAP -> {
            hideTapHighlight()
            if (withinTapRegion(x, y)) {
                // Implement the tap action
                // (e.g. show detailed step count)
                onWatchFaceTap()
            }
        }

        WatchFaceService.TAP_TYPE_TOUCH ->
            if (withinTapRegion(x, y)) {
                // Provide visual feedback of touch event
                startTapHighlight(x, y, eventTime)
            }

        WatchFaceService.TAP_TYPE_TOUCH_CANCEL -> hideTapHighlight()

        else -> super.onTapCommand(tapType, x, y, eventTime)
    }
}

Java

@Override
public void onTapCommand(
       @TapType int tapType, int x, int y, long eventTime) {
    switch (tapType) {
        case WatchFaceService.TAP_TYPE_TAP:
            hideTapHighlight();
            if (withinTapRegion(x, y)) {
                // Implement the tap action
                // (e.g. show detailed step count)
                onWatchFaceTap();
            }
            break;

        case WatchFaceService.TAP_TYPE_TOUCH:
            if (withinTapRegion(x, y)) {
                // Provide visual feedback of touch event
                startTapHighlight(x, y, eventTime);
            }
            break;

        case WatchFaceService.TAP_TYPE_TOUCH_CANCEL:
            hideTapHighlight();
            break;

        default:
            super.onTapCommand(tapType, x, y, eventTime);
            break;
    }
}

En este ejemplo, la app determina el tipo de evento que ha ocurrido y responde en consecuencia. Si el evento representa el contacto inicial del dedo del usuario, la app muestra un comentario visual. Si el evento representa el levantamiento inmediato del dedo después del contacto, realiza la acción que el usuario presionó. Si el evento representa el contacto prolongado del dedo, la app no realiza acciones.