Curso de JavaFX | Layouts 1

Curso de JavaFX
Layouts

Curso de JavaFX | Layouts 2

En esta lección aprenderás a estructurar tu interfaz gráfica usando diferentes layouts en JavaFX. Los layouts son contenedores que organizan los elementos visuales (botones, etiquetas, campos de texto, etc.) de tu aplicación. Exploraremos los principales tipos de layouts y cómo añadir elementos a ellos. ¡Manos a la obra!

StackPane

El StackPane permite superponer los objetos uno encima de otro. Es útil para escenarios donde los elementos deben estar centrados o superpuestos.

StackPane root = new StackPane();
Curso de JavaFX | Layouts 3

En el ejemplo de la imagen, el botón se encuentra centrado en el contenedor StackPane. Este layout distribuye automáticamente los elementos en capas.

GridPane

El GridPane organiza los elementos en una cuadrícula de filas y columnas. Es ideal para interfaces más estructuradas.

GridPane root = new GridPane();

// El primer parámetro es el objeto que estamos añadiendo a la regilla
// El segundo parámetro es la columna que ocupará dicho objeto
// El tercer parámetro es la fila que ocupará dicho objeto			
root.add(btn1, 1, 0);

Detalles:

  • add(Node, col, row): Añade un nodo a la posición deseada.
  • Para ajustar el tamaño de las celdas:
GridPane.setVgrow(btn2, Priority.ALWAYS);
GridPane.setHgrow(btn1, Priority.ALWAYS);
btn.setMaxWidth(Double.MAX_VALUE);			btn.setMaxHeight(Double.MAX_VALUE);

Esto asegura que las celdas ocupen todo el espacio disponible.

VBox

El VBox distribuye los elementos de forma vertical. Es útil para apilar componentes en una columna.

Curso de JavaFX | Layouts 4

Si quieres que los elementos ocupen todo el espacio disponible:

VBox.setVgrow(btn1, Priority.ALWAYS);

btn1.setMaxHeight(Double.MAX_VALUE);

HBox

El HBox organiza los elementos de forma horizontal. Es perfecto para menús o distribuciones lineales.

HBox root = new HBox();
Curso de JavaFX | Layouts 5

Para que el componente ocupe el 100% del layout que lo envuelve:

HBox.setHgrow(btn1, Priority.ALWAYS);

btn1.setMaxWidth(Double.MAX_VALUE);

Priority.Always hace que el layout se extienda siempre que sea posible al máximo tamaño.

Añadir elementos a un layout

Añadir varios elementos a un layout es sencillo. Puedes pasarlos como parámetros al constructor o añadirlos manualmente:

HBox root = new HBox(btn, btn2);
root.getChildren().add(btn);

Ejercicio layout

Crea un layout con dos botones que ocupen el 100% del ancho disponible. Usa un HBox y aplica las configuraciones aprendidas:

Curso de JavaFX | Layouts 6
Descargar Ejercicio Layout

Resultado esperado: Los dos botones se distribuyen horizontalmente y ocupan la misma proporción del espacio disponible.

Resumen

  • Los layouts te permiten organizar elementos en tu interfaz.
  • StackPane es ideal para superposiciones, VBox y HBox para distribuciones lineales, y GridPane para estructuras en cuadrícula.
  • Puedes controlar el tamaño y crecimiento de los elementos para adaptarlos a diferentes resoluciones.

En la próxima lección, aprenderás a aplicar estilos en línea y personalizar el diseño visual de tu aplicación. ¡Continúa avanzando! 🚀