Cómo abordar problemas con caras del reloj

Crear una cara de reloj personalizada para Wear OS by Google es muy diferente de crear notificaciones y actividades específicas para wearables. En esta clase, se muestra cómo resolver algunos problemas que pueden surgir al implementar las primeras caras de reloj.

Consulta los siguientes recursos relacionados:

Cómo detectar la forma de la pantalla

Algunos dispositivos Wear OS tienen pantallas cuadradas, mientras que otros tienen pantallas redondas. Los dispositivos con pantallas redondas pueden contener una inserción (o "mentón") en la parte inferior de la pantalla. La cara de reloj debe adaptarse a la forma particular de la pantalla y aprovecharla, como se describe en las pautas de diseño.

Wear OS permite que la cara de reloj determine la forma de la pantalla en el tiempo de ejecución. Para detectar si la pantalla es cuadrada o redonda, anula el método onApplyWindowInsets() en la clase CanvasWatchFaceService.Engine de la siguiente manera:

Kotlin

    private inner class Engine : CanvasWatchFaceService.Engine() {
        internal var mIsRound: Boolean = false
        internal var chinSize: Int = 0

        override fun onApplyWindowInsets(insets: WindowInsets) {
            super.onApplyWindowInsets(insets)
            mIsRound = insets.isRound
            chinSize = insets.systemWindowInsetBottom
        }
        ...
    }
    

Java

    private class Engine extends CanvasWatchFaceService.Engine {
        boolean mIsRound;
        int chinSize;

        @Override
        public void onApplyWindowInsets(WindowInsets insets) {
            super.onApplyWindowInsets(insets);
            mIsRound = insets.isRound();
            chinSize = insets.getSystemWindowInsetBottom();
        }
        ...
    }
    

Para adaptar tu diseño cuando dibujes la cara de reloj, consulta el valor de las variables de miembro mIsRound y mChinSize.

Cómo incorporar las tarjetas de vista previa

Nota: Las tarjetas de vista previa solo aparecen en apps de Wear 1.x.

Cuando los usuarios reciben una notificación, la tarjeta de notificación puede abarcar una parte considerable de la pantalla, según el estilo de la IU del sistema. La cara de reloj debe adaptarse a estas situaciones. Para ello, debe garantizar que los usuarios puedan igualmente saber la hora mientras la tarjeta de notificación está presente.

Las caras de reloj analógicas pueden realizar modificaciones cuando hay una tarjeta de notificación, como reducir la cara de reloj para que entre en la parte de la pantalla que no está cubierta por la tarjeta de vista previa que se muestra. Las caras de reloj digitales que muestran la hora en el área de la pantalla que no está cubierta por las tarjetas de vista previa no suelen requerir modificaciones. Para determinar el espacio libre encima de la tarjeta de vista previa a fin de adaptar la cara de reloj, usa el método WatchFaceService.Engine.getPeekCardPosition().

En el modo ambiente, las tarjetas de vista previa tienen un fondo transparente. Si la cara de reloj incluye detalles cerca de la tarjeta en modo ambiente, considera dibujar un rectángulo negro sobre ellos para asegurarte de que los usuarios puedan leer el contenido de la tarjeta.

Cómo configurar los indicadores del sistema

Para asegurarte de que los indicadores del sistema sigan siendo visibles, puedes configurar su posición en la pantalla y si necesitan protección de fondo cuando creas una instancia de WatchFaceStyle:

  • Para establecer la posición de la barra de estado, usa el método setStatusBarGravity().
  • Para establecer la posición de la palabra clave, usa el método setHotwordIndicatorGravity().
  • Para proteger la barra de estado y la palabra clave con un fondo gris semitransparente, usa el método setViewProtection(). Esto suele ser necesario si la cara de reloj tiene un fondo claro, ya que los indicadores del sistema son blancos.

Para obtener más información sobre los indicadores del sistema, consulta Cómo configurar la IU del sistema y lee las pautas de diseño.

Usa medidas relativas

Los dispositivos Wear OS de diferentes fabricantes tienen pantallas con una variedad de tamaños y resoluciones. La cara de reloj debe adaptarse a estas variaciones usando medidas relativas en lugar de valores absolutos de píxeles.

Cuando dibujas la cara de reloj, obtén el tamaño del lienzo con los métodos Canvas.getWidth() y Canvas.getHeight(), y establece las posiciones de los elementos gráficos usando valores que son una fracción del tamaño de pantalla detectado. Si cambias el tamaño de los elementos de la cara de reloj en respuesta a una tarjeta de vista previa, usa valores que sean una fracción del espacio restante encima de la tarjeta para volver a dibujar la cara de reloj.