10. Haciéndolo responsivo

Lo que vas a aprender: hacer que la app se adapte a cualquier pantalla sin un píxel fijo. Prerrequisitos: Persistiendo datos.

Ejemplo completo (copiar, pegar y ejecutar)

App adaptativa: onReposition() cambia la disposición por orientación (2 columnas en landscape, 1 en portrait) sin recrear estado, usando Relative/Gap y Screen. Compila tal cual.

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   private final Component painel = new Component();
   private final Component listaBox = new Component();
   private final Component detalheBox = new Component();

   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      listaBox.setLayout(new VerticalLayout());
      listaBox.add(LAY_AUTO, new Label("Lista"));

      detalheBox.setLayout(new VerticalLayout());
      detalheBox.add(LAY_AUTO, new Label("Detalhe"));

      boolean largo = Screen.minSize >= 600;   // breakpoint: lado menor (estable al girar)
      add(LAY_AUTO, new Label(largo ? "Tablet/desktop" : "Telefone"));

      add(LAY_FILL, painel);
      onReposition();                           // disposición inicial
   }

   @Override
   protected void onReposition() throws Exception
   {
      painel.removeAll();
      if (Screen.isLandscape) {                 // 2 columnas: lista | detalle
         painel.setLayout(new HorizontalLayout());
         painel.add(0.4f, listaBox);
         painel.add(0.6f, detalheBox);
      } else {                                  // 1 columna
         painel.setLayout(new VerticalLayout());
         painel.add(LAY_FILL, listaBox);
      }
      painel.setValidLayout(false);
   }
}

Los fragmentos siguientes muestran solo el núcleo (lo que va dentro de onShow()). Para ejecutar, colócalos en el esqueleto MainWindow de arriba.

Las herramientas

Relative.ofFont(1.5f);                     // escala con la fuente/DPI
Relative.ofScreen(0.8f, ScreenSize.MIN);   // fracción del lado MENOR (se adapta a portrait/landscape)
Gap.ofFont(0.5f);                          // espaciado que escala
add(LAY_FILL, comp);                       // un área elástica por eje

Breakpoint con Screen.minSize

Usa el menor lado — estable cuando el dispositivo gira:

boolean largo = Screen.minSize >= 600;   // tablet/desktop

Cambiar la disposición por orientación — onReposition()

Cuando la estructura debe cambiar (1 columna en portrait, 2 en landscape), sobrescribe onReposition() (llamado en el resize) — sin recrear estado:

@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                    // 2 columnas: lista | detalle
      painel.setLayout(new HorizontalLayout());
      painel.add(0.4f, listaBox);
      painel.add(0.6f, detalheBox);
   } else {                                      // 1 columna
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, listaBox);
   }
}

Construyes en este paso

La app se vuelve adaptativa — teléfono en portrait, tablet/desktop en landscape — sin píxel fijo.

Recapitulando

Relative/Gap/LAY_FILL = responsivo automático; Screen.minSize = breakpoint; onReposition() cambia la disposición preservando el estado.

Próximos pasos

→ Probando tu app

Ver también

• Responsividad (best-practices) · Concepto: Layout y el modelo Relative