En esta guía, se describen las herramientas y ventanas principales incluidas en Watch Face Studio (WFS).
Figura 1: La pantalla principal de Watch Face Studio
Herramientas
WFS incluye las siguientes herramientas:
- Add Component: Abre una lista de componentes que puedes agregar a tu cara de reloj.
- Forward y Backward: Mueve un componente seleccionado hacia adelante o atrás.
- Group y Ungroup: Agrupa varios componentes para que puedan controlarse como uno solo o los desagrupa.
- Mask: Cubre todas o algunas de las otras capas según el contorno de la forma de la capa inferior.
- Build: Abre el diálogo de compilación.
- Run on Device: Abre un diálogo para obtener una vista previa de la cara de reloj en un dispositivo.
Componentes
Agrega todos los componentes que desees a la cara de reloj. También puedes usar una fuente de diseño personalizada para tus componentes. Por ejemplo, puedes mostrar datos de la frecuencia cardíaca o del recuento de pasos con un componente de texto, o agregar una imagen personalizada para iniciar una app en particular.
Tipos de componentes
Los componentes compatibles se describen en las siguientes secciones.
Lienzo de la cara de reloj
Establece un color de lienzo para la capa inferior de la cara de reloj:
Texto
Los campos de texto contienen texto normal de forma predeterminada. El texto normal es estático y no cambia. En la ventana Properties del campo de texto, puedes cambiar el campo de texto normal a texto de datos. El texto de datos cambia y se propaga en función de las etiquetas.
Para obtener más información, consulta Expresiones de etiqueta.
Selecciona la opción Apply Curved-Text para crear texto que se curva con la cara de reloj:
Si quieres determinar la curva de tu texto, configura el ancho (W) y la altura (H). Si cambias W y H, se modificará automáticamente la dimensión del componente de texto. Para determinar la posición de tu texto, selecciona uno de los ajustes predeterminados del rango. Si especificas Start y Angular distance, puedes crear otros rangos. Establece la dirección del texto en el sentido de las manecillas del reloj (CW) o en el sentido contrario (CCW).
Forma
Agrega varias formas, incluidos rectángulos y elipses.
Imagen
Importa imágenes personalizadas.
Animación
Importa secuencias de imágenes para animaciones, como se describe en los siguientes pasos.
- Crea una secuencia de animación con un programa de diseño, como Adobe Flash o Adobe Premiere.
- Haz clic en Add Component > Animation para agregar archivos de animación a tu cara de reloj.
- Selecciona una secuencia de imágenes de tu navegador de archivos y, luego, haz clic en Upload.
- Para editar la animación, cambia el orden de las imágenes, quítalas o agrégalas.
Establece el Trigger value para determinar el momento en el que quieras que se reproduzca la animación.
Establece el valor del activador en WatchFace on para iniciar la animación en cuanto se muestre la cara de reloj. Otras opciones incluyen Tap, Every Sec, Every Min y Every Hour. También puedes retrasar el inicio mediante la opción Delay e introducir una cantidad de segundos.
Las siguientes son otras opciones de animaciones:
- Auto replay: Repite inmediatamente la animación cuando se completa hasta que se produce una interrupción, por ejemplo, cuando se apaga la pantalla.
- Repeat delay: Establece un retraso entre las iteraciones de la animación repetida.
- Resume Playback: Determina si se puede reanudar la animación o comenzar desde el principio cuando se detiene la reproducción debido a una interrupción, como cuando se recibe una notificación o una llamada telefónica.
- Hide before playing: Determina si se ocultará la animación hasta que se active la reproducción.
- Hide after finished: Determina si se oculta la animación cuando se completa la reproducción.
Multimedia
Importa imágenes ya animadas, como archivos GIF, Lottie o WEBP.
Agrega una imagen multimedia, como se describe en los siguientes pasos:
- Haz clic en Add Component > Multimedia.
- Selecciona el archivo en tu navegador de archivos y, luego, haz clic en Upload.
- Configura el Trigger Value a la hora de inicio de la animación.
Ten en cuenta que el tamaño del archivo, la resolución y el número de fotogramas de la imagen multimedia pueden afectar el rendimiento del dispositivo y el consumo de batería. Las imágenes multimedia se cargan de forma asíncrona durante el funcionamiento y pueden tener un retraso cuando se reproducen, según las capacidades del reloj del usuario y varias de las características de la imagen.
Manecillas analógicas
Agrega manecillas analógicas de reloj para horas, minutos y segundos:
Abre el navegador de archivos y selecciona el archivo de imagen que deseas importar para cada manecilla.
Las manecillas del reloj analógico tienen una propiedad Rotation, que incluye las siguientes opciones:
- Sincronización con
- Zona horaria
- Rotación
- Valor
- Efecto de movimiento
La sincronización con tiene las siguientes opciones:
- Hora en día
- Minuto en hora
- Segundo en minuto
- Día del mes
- Mes del año
- Día de la semana
- Día del año
- Fase lunar
La opción Segundo en minuto solo funciona con el efecto de movimiento Sweep (Barrido). Este efecto se establece automáticamente cuando agregas el componente de la segunda manecilla.
Reloj digital
Las opciones del reloj digital incluyen Date y Time.
Cuando agregues la opción Date (Fecha), agrega un componente de texto con la etiqueta de fecha. La visualización predeterminada para las fechas es DAY_WEEK_S MON_S DAY_1_31_Z.
Cuando agregues la opción Time (Hora), agrega un componente de texto con una etiqueta de reloj digital. La pantalla predeterminada para la hora digital es HOUR_1_12_Z:MIN_Z:SEC_Z.
Barra de progreso
Agrega una barra de progreso a la cara de reloj para hacer el seguimiento de varias actividades. Las opciones para el componente de la barra de progreso incluyen una barra de progreso lineal y circular. Para determinar la posición de la barra de progreso, selecciona uno de los seis ajustes predeterminados de rango. Se pueden crear rangos adicionales si especificas Start y Angular distance. Configura la dirección de la barra de progreso en el sentido de las manecillas del reloj o en el sentido contrario.
Administración de componentes
Administra tus componentes con las herramientas de WFS. Puedes agregar, agrupar, desagrupar y ordenar componentes en tu cara de reloj, como se describe en la siguiente sección.
Agrega componentes
Agrega un componente con el botón +:
Cuando agregas un componente, se coloca en una posición predeterminada en el lienzo. El componente se selecciona automáticamente para que puedas modificarlo con facilidad.
Agrupa o desagrupa componentes
Un grupo es una combinación de uno o más componentes. Se pueden agrupar todos los componentes. Los grupos se pueden desagrupar.
Enmascara o desenmascara los componentes
Cuando usas un grupo de máscaras, la forma de la capa inferior determina el área visible del grupo de máscaras. Las capas superiores solo aparecen a través del contorno de la forma de la capa inferior.
Por ejemplo, si colocas una imagen triangular en la capa inferior y una imagen y una animación en las capas superiores, la imagen y la animación aparecerán solo a través del contorno triangular de la capa inferior.
Para crear el grupo de máscaras, haz lo siguiente:
- Selecciona las capas que deseas agrupar.
- Elige Mask en el área de teclas de acceso rápido o haz clic derecho en las capas y selecciona Mask.
Para liberar el grupo de máscaras en la ventana Layers, haz lo siguiente:
- Selecciona el grupo de máscaras.
- Selecciona Unmask en el área de teclas de acceso rápido o haz clic derecho en las capas y selecciona Unmask.
Ventana de vista previa
La ventana de vista previa es el área de trabajo principal cuando se diseña la cara de reloj.
Agrega todos los elementos de la cara de reloj al lienzo que se muestra en la ventana de vista previa. En el lienzo, arrastra los elementos a la posición, cámbiales el tamaño, organízalos y rótalos.
Ventana de capas
La ventana de capas incluye la lista de componentes y grupos que se muestra en la ventana de vista previa. De forma predeterminada, cada componente tiene su propia capa.
Dentro de la ventana de capas, están disponibles las siguientes acciones:
- Search: Busca capas por nombre.
- Show/Hide: Muestra capas o las oculta. Las capas ocultas no se reproducen en la ventana de vista previa.
- Theme color: Activa o desactiva los colores de un tema.
- Rename: Cambia el nombre de la capa; para ello, haz doble clic en el campo del nombre e introduce un nombre nuevo.
Si haces clic con el botón derecho en las capas, se muestran las siguientes opciones de menú:
- Lock/Unlock: Bloquea la capa para que no se mueva en el lienzo.
- Group/Ungroup: agrupa varios componentes para que puedan controlarse como un componente o desagrupar un grupo de componentes.
- Mask/Unmask: Cubre todas las otras capas, o algunas de ellas, según el contorno de la forma de la capa inferior o quita la capa de un grupo de máscaras.
- Intercambiar imagen: Mueve el archivo de imagen de una capa a otra. Solo se muestra para las imágenes.
- Layer color: Agrega una etiqueta de color a la capa para diferenciarlas.
Líneas condicionales
Las líneas condicionales te permiten mostrar y ocultar componentes en una cara de reloj y controlar su comportamiento. Usa líneas condicionales para cambiar la apariencia de la cara de reloj en respuesta a ciertas condiciones, como la hora, el recuento de pasos, la batería o el evento.
Cuando agregas un componente, la condición de tiempo se establece de forma predeterminada. Para ajustar estas condiciones, haz clic en el ícono de condición en la capa deseada. Si deseas establecer la repetición de tu condicional, haz clic con el botón derecho en el área del marco y selecciona Loop.
Ten en cuenta que las capas que no se muestran no reducen el rendimiento ni afectan la duración de la batería.
Puedes configurar la cara de reloj para que responda a la hora, al recuento de pasos, al estado de la batería o a un evento, como se describe en las siguientes secciones.
Hora
La cara de reloj puede cambiar dinámicamente según los intervalos de tiempo. Por ejemplo, la cara de reloj puede iluminarse durante el día y oscurecerse gradualmente después de un horario determinado. Puedes configurar el tiempo en horas, minutos o segundos.
Para agregar una condición de tiempo, sigue estos pasos:
- Crea capas.
- Establece períodos para controlar cuándo mostrar cada capa. Selecciona la barra de inicio y, luego, el intervalo de tiempo.
- Haz clic y arrastra desde la barra de inicio hasta la barra final.
- Repite los pasos 2 y 3 para definir los períodos de cada capa.
- Haz clic en Run para obtener una vista previa de los cambios.
Si deseas ver cómo cambian las caras de reloj según la configuración de 12 horas o de 24 horas, en función de la configuración elegida en el teléfono del usuario, sigue estos pasos:
- Agrega dos componentes de reloj digital: el primero para la versión de 12 horas y el segundo para la de 24 horas.
- Colócalos en la misma posición.
- Agrega condiciones de 12 y 24 horas a las líneas condicionales de los componentes.
- Establece los períodos para mostrar el primer componente de reloj digital de la capa de 12 horas en dicho formato y de la otra capa en el formato de 24 horas.
Control de tiempo
El control deslizante de tiempo te permite ver la cara de reloj en acción. Úsalo para obtener una vista previa de cómo cambia la cara de reloj durante el día. Arrastra el control deslizante a horas específicas o mira las animaciones de la cara de reloj con los botones para reproducir y avanzar.
Recuento de pasos
Puedes diseñar la cara de reloj para que cambie de manera dinámica según el recuento de pasos del usuario. Por ejemplo, puedes crear una cara de reloj que cambie según el porcentaje del objetivo de pasos diario que se alcanzó.
Batería
Puedes diseñar la cara de reloj para que cambie de manera dinámica según el porcentaje de batería disponible del reloj.
Evento
Puedes diseñar la cara de reloj para que cambie dinámicamente según el estado de tu dispositivo, como batería baja o notificaciones no leídas. Para ello, selecciona el evento deseado y la imagen o la animación que quieras mostrar cuando esté sucediendo.
Ventana Properties
Cada componente tiene un rango de propiedades modificables. Por ejemplo, puedes cambiar el color de los números del reloj digital o elegir si las manecillas indican horas, minutos o segundos.
Panel Action
El panel Action en la ventana Properties permite la interacción con tu cara de reloj. Por ejemplo, puedes permitir que el usuario presione un componente para cambiar imágenes, abrir diferentes apps o medir la frecuencia cardíaca.
Estilo
Usa la pestaña Style para cambiar el estilo de la capa seleccionada. Puedes agregar estilos para imágenes, imágenes multimedia, índices y componentes de manecillas. Puedes agregar hasta 30 colores del tema y 10 imágenes.
Usa el Customization Editor para aplicar estilos personalizados a los componentes.
En el diálogo Customization Editor, puedes personalizar el estilo de cada componente, capa y nombre. En este diálogo, también puedes reordenar o combinar estilos.
Puedes agregar hasta 30 colores de tema a la pestaña Style. Cada color de tema puede tener hasta tres variaciones de color.
Establece estos colores en la pestaña Layer o Properties. En la pestaña Layer, activa o desactiva el ícono Apply Theme Color hasta tres veces para elegir el color.
En la pestaña Properties, configura el color con el botón de selección Apply Theme Color.
Color
Aplica un color específico a tu componente o guarda un color de tema para la cara de reloj. Para las complicaciones, el tema de color inicial es la escala de grises.
Apariencia de la imagen
Utiliza los siguientes controles para modificar la apariencia de una imagen:
- Hue: Controla el tono del color.
- Saturate: Cambia el color de la imagen para que sea más o menos vibrante.
- Lightness: Hace que los colores de la imagen sean más claros.
Apariencia del texto
Usa la pestaña Text appearance para configurar la alineación del texto y el estilo de fuente. Para decorar el texto, selecciona Add Bitmap Font en Project Settings. Si deseas usar el tamaño de fuente predeterminado entre las fuentes del mapa de bits que se agregaron al proyecto, selecciona Apply Default Font Size.
Panel Run
Puedes ejecutar tu cara de reloj dentro de WFS desde el panel Run. Puedes ajustar la hora, la fecha, el nivel de batería del dispositivo, el recuento de pasos del usuario, la frecuencia cardíaca o los valores del giroscopio dentro de WFS para probar cómo se verá la cara de reloj según las diferentes circunstancias. También puedes ajustar otros estilos que se configuren en el Customization Editor, incluida la cantidad de notificaciones no leídas, las expresiones de etiquetas o las líneas condicionales. La vista previa Run se puede establecer como Active (Activa) o Always-on (Siempre encendida). Cuando se utiliza Always-on, WFS muestra el valor Current-On Pixel Ratio y el botón Analyze.
Utiliza Run on device para probar la cara de reloj en un dispositivo.
Para obtener más información, consulta Cómo probar una cara de reloj.