# Haciéndolo responsivo

> Relative, Gap, LAY_FILL, Screen.minSize como breakpoint y onReposition() para cambiar la disposición.

Source: https://crossfly.dev/es/docs/learn/making-it-responsive — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 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](/docs/learn/persisting-data).

## 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.
```java
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
```java
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:
```java
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**:
```java
@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](/docs/learn/testing-your-app)

## Ver también
- [Responsividad (best-practices)](/docs/best-practices/responsividade) · Concepto: [Layout y el modelo Relative](/docs/concepts/the-layout-and-relative-model)