Was ist das GridPane Layout?
Sicherlich ist das GridPane-Layout eines der mächtigsten Layout-Manager in JavaFX. GridPane erstellt für die Nodes eine Gitterstruktur aus Spalten und Zeilen. In dieses Raster können wir dann unseren Content super flexibel einbauen.
Aufbau des GridPane Layouts
Ein GridPane bestehend aus 9 Zellen mit je drei Spalten (columns) und drei Zeilen (rows) lässt sich grafisch so veranschaulichen:
Wie du siehst, haben die einzelnen Zellen einzigartige "Adressen" im Gitter - und genau diesen Zellen können wir mit der Methode add() unsere Nodes hinzufügen. Dabei steht die Zahl vor dem Komma für die Spalte und die Zahl nach dem Komma für die Zeile.
Nodes hinzufügen
Erstellen wir zunächst ein Grid-Pane Objekt und anschließend neun Buttons (diese wollen wir gleich beispielhaft dem GridPane hinzufügen):
GridPane grid = new GridPane();
Button a1 = new Button("A1");
Button a2 = new Button("A2");
Button a3 = new Button("A3");
Button b1 = new Button("B1");
Button b2 = new Button("B2");
Button b3 = new Button("B3");
Button c1 = new Button("C1");
Button c2 = new Button("C2");
Button c3 = new Button("C3");Im nächsten Schritt fügen wir die Buttons unserem GridPane Layout hinzu. Dazu verwenden wir die Methode add(), mit der man dem GridPane sowohl das Node als auch den Zeilen- und Spaltenindex übergibt:
grid.add(a1, 0, 0); // Zeile 0, Spalte 0
grid.add(a2, 1, 0); // Zeile 0, Spalte 1
grid.add(a3, 2, 0); // Zeile 0, Spalte 2
grid.add(b1, 0, 1); // Zeile 1, Spalte 0
grid.add(b2, 1, 1); // usw.
grid.add(b3, 2, 1);
grid.add(c1, 0, 2);
grid.add(c2, 1, 2);
grid.add(c3, 2, 2);Im Ergebnis sieht das dann so aus:
Ein bisschen Styling
Vgap und Hgap
Um zwischen den einzelnen Nodes Platz zu schaffen, kannst du die Methoden setVgap() und setHgap() auf dem Grid anwenden. Gib als Argumente die Pixelzahl in Klammern an, um die vertikalen und horizontalen Abstände zu vergrößern:
grid.setVgap(15); // Abstände vertikal
grid.setHgap(15); // Abstände horizontal
padding
Um den Abstand der gesamten GridPane zu den Ränern zu vergrößern, kannst du ganz einfach die Methode setPadding() verwenden:
grid.setPadding(new Insets(20, 20, 20, 20)); // 20 Pixel Abstand nach oben, rechts, unten, linksSo langsam wird unser GridPane richtig schön 🥰
Gitternetz-Linien
Wenn wir jetzt auch noch die Gitternetz-Linien des GridPanes darstellen wollen, nutzen wir die setGridLinesVisible() Methode und übergeben ihr den Wert true:
grid.setGridLinesVisible(true);
Zum Testen komplexer GridPanes sind die Gitternetz-Linien super praktisch. In der Regel fallen sie bei getaner Arbeit aber wieder weg.
Colspan und Rowspan
Genauso wie bei HTML-Tabellen gibt es auch bei unserem JavaFX GridPane die Möglichkeit, Zellen über mehrere Spalten (colspan) und Zeilen (rowspan) hinweg auszudehnen.
Dafür gibt es eine zweite überladene add() Methode, die zwei zusätzliche Parameter verlangt:
add(Node child, int columnIndex, int rowIndex, int colspan, int rowspan)
Mit dem Parameter colspan lässt sich angeben, über wieviele Spalten, und mit rowspan über wieviele Zeilen sich eine Zelle erstrecken soll:
grid.add(a1, 0, 0);
grid.add(a2, 1, 0);
grid.add(a3, 2, 0);
grid.add(b1, 0, 1, 2, 2); // colspan: 2 rowspan: 2
grid.add(b3, 2, 1);
grid.add(c3, 2, 2);Unser Button-Node nimmt jetzt den Platz von vier Zellen ein (zwei vertikal und zwei horizontal).
Oftmals ist es sinnvoll, die Position des Nodes manuell festzulegen. Dafür gibt es die beiden GridPane-Methoden setValignment() und setHalignment(). Um etwa den Button der Referenz b1 vertikal und horizontal zu zentrieren, also in die Mitte zu packen, verwendest du die beiden Methoden so:
grid.setValignment(b1, VPos.CENTER);
grid.setHalignment(b1, HPos.CENTER);
Wenn deine Nodes im Grid spalten- oder zeilenübergreifend gesetzt sind, gibt es zur Positionieren insgesamt folgende Ausrichtungen:
- bei HPos: CENTER, BASELINE, BOTTOM, TOP
- beiVPos: CENTER, LEFT, RIGHT
Vollständiger Code
GridPane grid = new GridPane();
grid.setVgap(15);
grid.setHgap(15);
grid.setPadding(new Insets(20, 20, 20, 20));
Button a1 = new Button("A1");
Button a2 = new Button("A2");
Button a3 = new Button("A3");
Button b1 = new Button("B1");
Button b3 = new Button("B3");
Button c3 = new Button("C3");
grid.add(a1, 0, 0); // Zeile 0, Spalte 0
grid.add(a2, 1, 0); // Zeile 0, Spalte 1
grid.add(a3, 2, 0); // usw.
grid.add(b1, 0, 1, 2, 2); // colspan=2 rowspan=2
grid.add(b3, 2, 1);
grid.add(c3, 2, 2);
grid.setValignment(b1, VPos.CENTER);
grid.setHalignment(b1, HPos.CENTER);
Scene scene = new Scene(grid, 180, 160);
primaryStage.setScene(scene);
primaryStage.setTitle("GridPane");
primaryStage.show();
