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.

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.

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

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:

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

Ver también

Layouts (ui) · Concepto: Layout y el modelo Relative