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 y después implementando 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.

Cómo 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 tu 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 Cómo controlar gestos se muestra un ejemplo de una implementación como esta.

Cómo controlar gestos

Para proporcionar una experiencia coherente 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 selector de aplicaciones, 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 inmediatamente, el sistema reenví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 ocurrió 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.