Design de tela Garmin
Este skill faz com que um design seja lido bem em todas as telas redondas Garmin, desde um Forerunner MIP de 218 px até um fēnix AMOLED de 466 px. Uma tela que parece correta em um relógio é apenas um primeiro rascunho.
O comportamento do Monkey C pertence a garmin-app. A captura de telas pertence a garmin-simulator.
Projete para nove tamanhos de tela, teste um de cada
As telas redondas do Connect IQ vêm em 218, 240, 260, 280 (MIP, 64 cores) e 360, 390, 416, 454, 466 px (AMOLED). Antes de considerar uma tela finalizada, execute-a em um relógio de cada tamanho com os maiores valores que ela pode exibir (screens.md).
Posicione com base em alturas medidas, não em pixels fixos
As fontes AMOLED são mais altas que as fontes MIP no mesmo tamanho nominal. Posicione com frações do slot e dc.getFontHeight(), e centralize com TEXT_JUSTIFY_VCENTER em fontes cuja altura de linha é ajustada aos glifos.
Use suas próprias fontes bitmap para números que importam
As fontes do sistema diferem por relógio e muitas telas pequenas não têm fontes vetoriais. Gere um .fnt + .png BMFont por tamanho de tela com apenas os caracteres que você desenha, armazene a cobertura de glifos no canal de cor E no canal alfa (senão nada fica antialiased no relógio) e ajuste a altura de linha aos glifos (fonts.md).
Mantenha acentos fora de fontes que você centraliza
Uma fonte cujo conjunto de caracteres inclui É ou À reserva espaço acima das maiúsculas, então VCENTER posiciona as maiúsculas muito baixo. Uma "pílula" de zona exibia "Z4" descentralizado até receber sua própria fonte com apenas Z, dígitos e -.
Verifique se cada dígito é lido como ele mesmo
Algumas tipografias desenham 1 como um traço simples, então "Z1" é lido como "ZI" e "101" como "IOI" rapidamente. Observe 1, 7, 0 e O em tamanho grande antes de escolher uma tipografia. Se uma falhar, escolha outra ou redesenhe aquele glifo em seu próprio gerador de fontes.
Cada rótulo cabe em seu slot em todos os idiomas
Meça a largura em pixels de cada rótulo em cada idioma em relação ao slot onde ele será inserido. Rótulos traduzidos ficam mais longos (os franceses transbordaram); meça, não assuma. Remova a unidade, depois abrevie, nunca deixe dois rótulos se tocarem (screens.md).
Escolha as cores MIP você mesmo
Telas MIP exibem 64 cores, valores de canal apenas 00/55/AA/FF. O compilador arredonda mal (um marrom virou verde-oliva). Mantenha paletas separadas para AMOLED, MIP e fundos brancos, e escolha cada cor MIP a olho dentre as 64 (colors.md).
Desenhe arcos com drawArc
Arcos construídos a partir de polígonos parecem desenhados à mão em um relógio real. dc.drawArc é suave. Um arco de um ângulo até ele mesmo desenha um círculo completo: proteja contra arcos de comprimento zero.
Um marcador em movimento não deve cobrir o que aponta
Uma agulha ou bitmap desenhado sobre texto apaga o texto. Dimensione os marcadores em relação ao texto ao redor em cada tamanho de tela; uma agulha longa o suficiente para ser lida em 390 px tocou o ícone de coração em zonas baixas.
Desenhe ícones uma vez, grandes
Desenhe o ícone do iniciador em 1024 px, reduza-o com LANCZOS para cada tamanho de launcherIcon do compiler.json do dispositivo e salve um por resources-round-WxH/drawables/. Use a paleta de 64 cores para tamanhos MIP.