# Deixando responsivo

> Relative, Gap, LAY_FILL, Screen.minSize como breakpoint e onReposition() para trocar o arranjo.

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

# 10. Deixando responsivo

> **O que você vai aprender:** fazer o app se adaptar a qualquer tela **sem um pixel fixo**.
> **Pré-requisitos:** [Persistindo dados](/docs/learn/persisting-data).

## Exemplo completo (copiar, colar e rodar)
App adaptativo: `onReposition()` troca o **arranjo** por orientação (2 colunas em landscape, 1 em
portrait) sem recriar estado, usando `Relative`/`Gap` e `Screen`. Compila como está.
```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: menor lado (estável ao girar)
      add(LAY_AUTO, new Label(largo ? "Tablet/desktop" : "Telefone"));

      add(LAY_FILL, painel);
      onReposition();                           // arranjo inicial
   }

   @Override
   protected void onReposition() throws Exception
   {
      painel.removeAll();
      if (Screen.isLandscape) {                 // 2 colunas: lista | detalhe
         painel.setLayout(new HorizontalLayout());
         painel.add(0.4f, listaBox);
         painel.add(0.6f, detalheBox);
      } else {                                  // 1 coluna
         painel.setLayout(new VerticalLayout());
         painel.add(LAY_FILL, listaBox);
      }
      painel.setValidLayout(false);
   }
}
```
> Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima.

## As ferramentas
```java
Relative.ofFont(1.5f);                     // escala com a fonte/DPI
Relative.ofScreen(0.8f, ScreenSize.MIN);   // fração do MENOR lado (adapta portrait/landscape)
Gap.ofFont(0.5f);                          // espaçamento que escala
add(LAY_FILL, comp);                       // uma área elástica por eixo
```

## Breakpoint com `Screen.minSize`
Use o **menor lado** — estável quando o aparelho gira:
```java
boolean largo = Screen.minSize >= 600;   // tablet/desktop
```

## Trocar o arranjo por orientação — `onReposition()`
Quando a **estrutura** deve mudar (1 coluna em portrait, 2 em landscape), sobrescreva `onReposition()`
(chamado no resize) — **sem recriar estado**:
```java
@Override protected void onReposition() throws Exception {
   painel.removeAll();
   if (Screen.isLandscape) {                    // 2 colunas: lista | detalhe
      painel.setLayout(new HorizontalLayout());
      painel.add(0.4f, listaBox);
      painel.add(0.6f, detalheBox);
   } else {                                      // 1 coluna
      painel.setLayout(new VerticalLayout());
      painel.add(LAY_FILL, listaBox);
   }
}
```

## Constrói neste passo
O app vira **adaptativo** — telefone em portrait, tablet/desktop em landscape — sem pixel fixo.

## Recapitulando
`Relative`/`Gap`/`LAY_FILL` = responsivo automático; `Screen.minSize` = breakpoint; `onReposition()`
troca o **arranjo** preservando o estado.

## Próximos passos
→ [Testando seu app](/docs/learn/testing-your-app)

## Veja também
- [Responsividade (best-practices)](/docs/best-practices/responsividade) · Conceito: [Layout e o modelo Relative](/docs/concepts/the-layout-and-relative-model)