Diseño de pantallas Garmin
Este skill hace que un diseño se vea bien en todas las pantallas redondas Garmin, desde una Forerunner MIP de 218 px hasta una fēnix AMOLED de 466 px. Una pantalla que se ve bien en un reloj es solo un primer borrador.
El comportamiento de Monkey C pertenece a garmin-app. La captura de pantallas pertenece a garmin-simulator.
Diseñar para nueve tamaños de pantalla, probar uno de cada uno
Las pantallas redondas Connect IQ vienen en 218, 240, 260, 280 (MIP, 64 colores) y 360, 390, 416, 454, 466 px (AMOLED). Antes de dar por terminada una pantalla, ejecútala en un reloj por cada tamaño con los valores más largos que pueda mostrar (screens.md).
Posicionar usando alturas medidas, no píxeles fijos
Las fuentes AMOLED son más altas que las fuentes MIP al mismo tamaño nominal. Posiciona con fracciones del espacio y dc.getFontHeight(), y centra con TEXT_JUSTIFY_VCENTER en fuentes cuya altura de línea esté ajustada a los glifos.
Usa tus propias fuentes de mapa de bits para números importantes
Las fuentes del sistema difieren según el reloj y muchas pantallas pequeñas no tienen fuentes vectoriales. Genera un BMFont .fnt + .png por cada tamaño de pantalla con solo los caracteres que dibujes, almacena la cobertura de glifos tanto en el canal de color como en el canal alfa (de lo contrario, no se antialiasing en el reloj), y ajusta la altura de línea a los glifos (fonts.md).
Mantén los acentos fuera de las fuentes que centras
Una fuente cuyo conjunto de caracteres incluya É o À reserva espacio por encima de las mayúsculas, por lo que VCENTER coloca las mayúsculas demasiado abajo. Una pastilla de zona mostraba "Z4" descentrado hasta que recibió su propia fuente con solo Z, dígitos y -.
Verifica que cada dígito se lea como tal
Algunos tipos de letra dibujan el 1 como un trazo simple, por lo que "Z1" se lee "ZI" y "101" se lee "IOI" a simple vista. Observa 1, 7, 0 y O en grande antes de elegir un tipo de letra. Si alguno falla, elige otro tipo o redibuja ese glifo en tu propio generador de fuentes.
Cada etiqueta debe caber en su espacio en todos los idiomas
Mide el ancho en píxeles de cada etiqueta en cada idioma con respecto al espacio donde se colocará. Las etiquetas traducidas son más largas (las francesas se desbordaban); mide, no asumas. Elimina la unidad, luego abrevia, nunca permitas que dos etiquetas se toquen (screens.md).
Elige los colores MIP tú mismo
Las pantallas MIP muestran 64 colores, solo valores de canal 00/55/AA/FF. El compilador redondea mal (un marrón se volvió verde oliva). Mantén paletas separadas para AMOLED, MIP y fondos blancos, y elige cada color MIP a ojo de entre los 64 (colors.md).
Dibuja arcos con drawArc
Los arcos construidos con polígonos se ven dibujados a mano en un reloj real. dc.drawArc es suave. Un arco desde un ángulo hasta sí mismo dibuja un círculo completo: protege contra arcos de longitud cero.
Un marcador en movimiento no debe cubrir lo que señala
Una aguja o mapa de bits dibujado sobre texto lo borra. Ajusta el tamaño de los marcadores con respecto al texto que los rodea en cada tamaño de pantalla; una aguja lo suficientemente larga para leerse en 390 px tocaba el icono del corazón en zonas bajas.
Dibuja iconos una vez, en grande
Dibuja el icono del lanzador a 1024 px, redúcelo con LANCZOS a cada tamaño launcherIcon según el compiler.json del dispositivo, y guarda uno por carpeta resources-round-WxH/drawables/. Usa la paleta de 64 colores para los tamaños MIP.