# Layouts

> Los seis layouts, add(LAY_AUTO/LAY_FILL/fracción) y la técnica de anidar layouts para pantallas reales.

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

# 4. Layouts

> **Lo que vas a aprender:** cómo CrossFly posiciona, y la técnica de **anidar layouts** para montar
> pantallas reales. **Prerrequisitos:** [Pensando en componentes](/docs/learn/thinking-in-components).

## Ejemplo completo (copiar, pegar y ejecutar)
La estructura definitiva de la pantalla de lista, **anidando layouts**: header en `HorizontalLayout` (altura
auto), contenido elástico con `LAY_FILL` y pie auto — todo en un `VerticalLayout`. Compila tal cual.
```java
package com.exemplo;

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

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, altura natural (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícono
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // el título absorbe el ancho
      add(LAY_AUTO, header);

      // contenido: el "elástico" — absorbe la altura restante
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // pie: altura natural
      add(LAY_AUTO, new Button("Adicionar"));
   }
}
```
> Los fragmentos de abajo muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` de arriba.

## Los seis layouts
| Layout | Para |
|---|---|
| `VerticalLayout` / `HorizontalLayout` | apilar ↓ / lado a lado → |
| `GridLayout` | grilla por fracción (anchos, luego componentes) |
| `RelativeLayout` | anclar un componente a otro |
| `EvenlySpacedLayout` | espaciar por igual |
| `RandomLayout` | posición libre (overlays) |

## `add(tamaño, comp)` — los tres casos
```java
add(LAY_AUTO, comp);   //  0f → tamaño natural del contenido
add(LAY_FILL, comp);   // -1f → llena el espacio restante (el "elástico")
add(0.3f, comp);       // >0  → 30% de la dimensión del contenedor
```

## La técnica clave: anidar layouts
Las pantallas reales se montan **componiendo** containers con layouts diferentes. Header en `HorizontalLayout`
(auto), contenido en `LAY_FILL`, todo en un `VerticalLayout`:
```java
setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // ícono
header.add(LAY_FILL, new Label("Minhas tarefas"));         // el título absorbe el ancho
add(LAY_AUTO, header);                                      // header: altura natural

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // lista: absorbe la altura
```

## Construyes en este paso
La **estructura definitiva** de la pantalla de lista: **header** (auto) + **lista** (`LAY_FILL`) + pie.

## Recapitulando
`add(0f|-1f|fracción, comp)`; un `LAY_FILL` por eje es el elástico; **anida layouts** para pantallas reales.

## Próximos pasos
→ [Estilos y temas](/docs/learn/styling-and-themes)

## Ver también
- [Layouts (ui)](/docs/ui/layouts) · Concepto: [Layout y el modelo Relative](/docs/concepts/the-layout-and-relative-model)