JavaFX: GridPane Overview

The

GridPaneclass creates a JavaFX layout pane which places controls based on a column and row position. The grid contained in this layout is not predefined. It creates columns and rows as each control is added. This allows the grid to be completely flexible in its design.

Nodes can be placed in each cell of the grid and can span multiple cells either vertically or horizontally. By default the rows and columns will be sized to fit their content - that is the widest child node defines the column width and the tallest child node the row height.

Import Statement

import javafx.scene.layout.GridPane;

Constructors

The

GridPaneclass has one constructor which does not accept any arguments:

GridPane playerGrid = new GridPane();

Useful Methods

Child nodes are added to the

GridPaneusing the add method specifying the node to be added with the column and row index:

//Place the Text control in column 1, row 8
Text rank4 = new Text("4");
playerGrid.add(rank4, 0,7);

Note: The column and row index starts at 0. So the first cell positioned at column 1, row 1 has an index of 0, 0.

Child nodes can also span multiple columns or rows. This can be specified in the

addmethod by adding the number of columns and rows to span to the end of the arguments passed:

//Here the Text control is spanning 4 columns and 1 row
Text title = new Text("Top Scorers in English Premier League");
playerGrid.add(title, 0,0,4,1);

Child nodes contained within the

GridPanecan have their alignment along the horizontal or vertical axis by using the

setHalignmentand

setValignmentmethods:

GridPane.setHalignment(goals4, HPos.CENTER);

Note: The

VPosenum contains four constant values to define the vertical position:

BASELINE,

BOTTOM,

CENTERand

TOP. The

HPosenum only contains three values for the horizontal position:

CENTER,

LEFTand

RIGHT. 

The padding of child nodes can also be set by using the

setPaddingmethod. This method takes the child node being set and

Insetsobject defining the padding:

//set the padding for all the cells in the GridPane
playerGrid.setPadding(new Insets(0, 10, 0, 10));

The spacing between the columns and rows can be defined by using the

setHgapand

setVgapmethods:

playerGrid.setHgap(10);
playerGrid.setVgap(10);

The

setGridLinesVisiblemethod can be very useful in seeing where the grid lines are being drawn:

playerGrid.setGridLinesVisible(true);

Usage Tips

If two nodes are set to be displayed in the same cell then they will overlap in the JavaFX scene.

Columns and rows can be set to a preferred width and height through the use of

RowConstraintsand

ColumnConstraints. These are separate classes that can be used to control the size. Once defined they are added to the

GridPaneby using the

getRowConstraints().addAlland

getColumnConstraints().addAllmethods.

GridPaneobjects can be styled using JavaFX CSS. All the CSS properties defined under

Regioncan be used.

To see the

GridPanelayout in action have a look at the GridPane Example Program. It shows how to place

Textcontrols in a table format by defining uniform rows and columns.