Responsividade: uma UI para todas as telas

No CrossFly, responsividade não é um recurso à parte — é consequência de medir por relações. Se você seguir os princípios abaixo, a tela se readapta a tamanho, densidade (DPI), escala de fonte e orientação sem media queries e sem recalcular à mão. Esta página é o recorte orientado a tarefa do Capítulo 36; o “porquê” está em Layout e o modelo Relative.

Os 5 princípios

1. Nunca posicione em pixels fixos. Use frações, Relative e LAY_FILL/LAY_AUTO.
2. Deixe o layout medir. LAY_AUTO/Relative.AUTO/RelSize.AUTOSIZE reportam o tamanho natural.
3. Espaçamento também escala. ingap/outgap via Gap.ofFont(...), nunca pixels.
4. Uma área elástica por eixo. Marque um componente com LAY_FILL para absorver a sobra.
5. Resize é automático — se você fez o acima. Só setBounds manual exige código.

A caixa de ferramentas

Breakpoints com Screen.minSize

Use o menor lado (Screen.minSize), não width — ele é estável quando o aparelho gira:

boolean tablet = Screen.minSize >= 600;   // decide 1 vs 2 colunas, por exemplo

Quando (raramente) mudar o arranjo: onReposition()

Se o layout deve mudar de estrutura por orientação, sobrescreva Window.onReposition():

@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                     // 2 colunas
      painel.setLayout(new HorizontalLayout());
      painel.add(0.5f, lista); painel.add(0.5f, detalhe);
   } else {                                       // 1 coluna
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, lista); painel.add(LAY_AUTO, detalhe);
   }
}

Checklist de responsividade

• Zero ofPixels/setBounds fixos (salvo exceção justificada).
• Exatamente um LAY_FILL por eixo elástico.
• Espaçamentos com Gap.ofFont/ofScreen.
• Quadrados/ícones com ofScreen(v, ScreenSize.MIN).
• Breakpoints com Screen.minSize.

Anti-padrões

Veja também

• Fonte canônica: Capítulo 36 · Conceito: Layout e Relative
• Layouts · Responsividade (ui)