# HorizontalLayout

> Coloca los hijos lado a lado, cada uno a la altura del contenedor.

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

# HorizontalLayout

Coloca los componentes hijos **lado a lado** (una columna por hijo), de izquierda a derecha. Es el
par horizontal de [VerticalLayout](/docs/ui/layouts/vertical-layout) — ideal para barras y filas de controles.

> 🟢 · **Paquete:** `dev.crossfly.ui.layout` · **Extiende:** `Layout`

## Cuándo usar
- Barras de búsqueda/acción: `[ícone] [campo que estica] [botão]`.
- Cualquier fila de controles.

## Cuándo NO usar
- Apilar verticalmente → [VerticalLayout](/docs/ui/layouts/vertical-layout).
- Necesitas varias columnas con proporción por fila → [GridLayout](/docs/ui/layouts/grid-layout).

## `add(...)` — firma y semántica
```java
public HorizontalLayout add(float largura, Component c)
```
| Valor | Significado |
|---|---|
| `LAY_AUTO` (`0f`) | **ancho natural** del componente |
| `LAY_FILL` (`-1f`) | **rellena el sobrante** (usa **una** columna FILL) |
| `> 0` (ex. `0.5f`) | **fracción del ancho del contenedor** |

## Constructores
| Constructor | Descripción |
|---|---|
| `new HorizontalLayout()` | elementos **centrados verticalmente** |
| `new HorizontalLayout(Position h, Position v)` | `v` = alineación vertical de cada columna |

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      setLayout(new VerticalLayout(Position.START, Position.START));

      Component barra = new Component();
      barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      barra.add(LAY_AUTO, new Label("🔎"));               // ancho natural
      barra.add(LAY_FILL, new TextField("Buscar..."));     // estira
      barra.add(LAY_AUTO, new Button("OK"));               // ancho natural

      add(LAY_AUTO, barra);                    // la barra ocupa una línea del tope
      add(LAY_FILL, new Component());          // resto de la pantalla (placeholder)
   }
}
```

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

## Uso básico
```java
Component barra = new Component();
barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
barra.add(LAY_AUTO, new ImageView(/* ícono */));   // ancho natural
barra.add(LAY_FILL, new TextField("Buscar..."));    // estira
barra.add(LAY_AUTO, new Button("OK"));              // ancho natural
```

## Cómo distribuye
```
┌────────┬───────────────────────────┬────────┐
│ ícone  │ campo (LAY_FILL, estica)   │ botão  │
│ (auto) │                           │ (auto) │
└────────┴───────────────────────────┴────────┘
```

## Buenas prácticas
- **1 elemento `LAY_FILL`** por fila (el que debe estirarse).
- Dos "elásticos" con proporción fija → fracciones (`0.5f`/`0.5f`) o [GridLayout](/docs/ui/layouts/grid-layout).

## Errores comunes
- Dos `LAY_FILL` en la misma fila.
- Usar píxeles (`add(120, x)`) en vez de fracción/auto — rompe la responsividad.

## Ver también
- [VerticalLayout](/docs/ui/layouts/vertical-layout) · [GridLayout](/docs/ui/layouts/grid-layout) · [Responsividad](/docs/ui/layouts/responsiveness)