Responsividad: una UI para todas las pantallas

En CrossFly, la responsividad no es una función aparte — es consecuencia de medir por relaciones. Si sigues los principios de abajo, la pantalla se readapta a tamaño, densidad (DPI), escala de fuente y orientación sin media queries y sin recalcular a mano. Esta página es el recorte orientado a tarea del Capítulo 36; el “porqué” está en Layout y el modelo Relative.

Los 5 principios

1. Nunca posiciones en píxeles fijos. Usa fracciones, Relative y LAY_FILL/LAY_AUTO.
2. Deja que el layout mida. LAY_AUTO/Relative.AUTO/RelSize.AUTOSIZE reportan el tamaño natural.
3. El espaciado también escala. ingap/outgap vía Gap.ofFont(...), nunca píxeles.
4. Un área elástica por eje. Marca un componente con LAY_FILL para absorber el sobrante.
5. El resize es automático — si hiciste lo anterior. Solo el setBounds manual exige código.

La caja de herramientas

Breakpoints con Screen.minSize

Usa el lado menor (Screen.minSize), no width — es estable cuando el dispositivo gira:

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

Cuándo (raramente) cambiar el arreglo: onReposition()

Si el layout debe cambiar de estructura por orientación, sobrescribe Window.onReposition():

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

Checklist de responsividad

• Cero ofPixels/setBounds fijos (salvo excepción justificada).
• Exactamente un LAY_FILL por eje elástico.
• Espaciados con Gap.ofFont/ofScreen.
• Cuadrados/íconos con ofScreen(v, ScreenSize.MIN).
• Breakpoints con Screen.minSize.

Anti-patrones

Ver también

• Fuente canónica: Capítulo 36 · Concepto: Layout y Relative
• Layouts · Responsividad (ui)