HorizontalLayout

Lays out child components side by side (one column per child), left to right. It is the horizontal counterpart of VerticalLayout — ideal for bars and rows of controls.

🟢 · Package: dev.crossfly.ui.layout · Extends: Layout

When to use

• Search/action bars: [icon] [field that stretches] [button].
• Any row of controls.

When NOT to use

• Stacking vertically → VerticalLayout.
• Need multiple columns with a per-row ratio → GridLayout.

add(...) — signature and semantics

public HorizontalLayout add(float largura, Component c)

Constructors

Full example (copy, paste and run)

package com.exemplo;

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

/** Runnable main screen. Point the launcher (classname) and run: 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("🔎"));               // natural width
      barra.add(LAY_FILL, new TextField("Buscar..."));     // stretches
      barra.add(LAY_AUTO, new Button("OK"));               // natural width

      add(LAY_AUTO, barra);                    // the bar takes up one row at the top
      add(LAY_FILL, new Component());          // rest of the screen (placeholder)
   }
}

The snippets below show only the core (what goes inside onShow()). To run them, place them in the MainWindow skeleton above.

Basic usage

Component barra = new Component();
barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
barra.add(LAY_AUTO, new ImageView(/* icon */));   // natural width
barra.add(LAY_FILL, new TextField("Buscar..."));    // stretches
barra.add(LAY_AUTO, new Button("OK"));              // natural width

How it arranges

┌────────┬───────────────────────────┬────────┐
│ ícone  │ campo (LAY_FILL, estica)   │ botão  │
│ (auto) │                           │ (auto) │
└────────┴───────────────────────────┴────────┘

Best practices

• 1 LAY_FILL element per row (the one that should stretch).
• Two “elastic” elements with a fixed ratio → fractions (0.5f/0.5f) or GridLayout.

Common mistakes

• Two LAY_FILL in the same row.
• Using pixels (add(120, x)) instead of fraction/auto — breaks responsiveness.

See also

• VerticalLayout · GridLayout · Responsiveness