TilePane Layout in JavaFX

In JavaFX, the TilePane is a layout component that arranges its child nodes in uniformly sized tiles, either horizontally or vertically. We can control the number of rows or columns, the gap between tiles, the alignment of the pane and the preferred size of each tile. The class named TilePane of the package javafx.scene.layout represents the TilePane. To create a TilePane, we can use any of the below constructors −

• TilePane() − It constructs a new horizontal TilePane layout.

• TilePane(double hGap, double vGap) − It creates a new horizontal TilePane layout with the specified hGap and vGap.

• TilePane(double hGap, double vGap, Node childNodes) − Constructs a horizontal TilePane layout with the specified hGap, vGap and nodes.

• TilePane(Orientation orientation) − It creates a new TilePane layout with the specified orientation. It can be either HORIZONTAL or VERTICAL.

This class provides eleven properties, which are as follows −

Example

The following program is an example of the tile pane layout. In this, we are creating a tile pane which holds 7 buttons. By default, its orientation will be horizontal. Save this code in a file with the name TilePaneExample.java.

import javafx.application.Application; 
import javafx.geometry.Orientation; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.TilePane; 
import javafx.stage.Stage;

public class TilePaneExample extends Application { 
   @Override 
   public void start(Stage stage) {    
      //Creating an array of Buttons 
      Button[] buttons = new Button[] { 
         new Button("SunDay"), 
         new Button("MonDay"), 
         new Button("TuesDay"), 
         new Button("WednesDay"), 
         new Button("ThursDay"), 
         new Button("FriDay"), 
         new Button("SaturDay")  
      };   
      //Creating a Tile Pane 
      TilePane tilePane = new TilePane();   
       
      //Setting the alignment for the Tile Pane 
      tilePane.setTileAlignment(Pos.CENTER_LEFT); 
       
      //Setting the preferred columns for the Tile Pane 
      tilePane.setPrefRows(4);  
      
      //Adding the array of buttons to the pane 
      tilePane.getChildren().addAll(buttons);
	  
      //Creating a scene object 
      Scene scene = new Scene(tilePane, 400, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Tile Pane Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls TilePaneExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls TilePaneExample

Output

On executing, the above program generates a JavaFX window as shown below.

Setting the Orientation of TilePane to Vertical

To set the orientation of TilePane in JavaFX, we use either a built-in method named setOrientation() or by using its parameterized constructor which accepts orientation as a parameter value. The below JavaFX code illustrates how to set the orientation of the TilePane to vertical. Save this JavaFX code in a file with the name JavafxTilepane.

Example

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class JavafxTilepane extends Application {
   @Override
   public void start(Stage stage) {
      // Creating a TilePane with vertical orientation
      TilePane tileP = new TilePane(Orientation.VERTICAL);
      // Setting the preferred number of rows to three
      tileP.setPrefRows(3);

      // Setting the hGap and vGap between tiles
      tileP.setHgap(10);
      tileP.setVgap(10);
      // Setting the alignment of the pane and the tiles
      tileP.setAlignment(Pos.CENTER);
      tileP.setTileAlignment(Pos.CENTER);
      // To add 10 buttons to the pane
      for (int i = 1; i <= 10; i++) {
         Button button = new Button("Button " + i);
         tileP.getChildren().add(button);
      }
      // Create a scene and stage
      Scene scene = new Scene(tileP, 400, 300);
      stage.setTitle("TilePane in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String[] args) {
      launch(args);
   }
}

To compile and execute the saved Java file from the command prompt, use the following commands −

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTilepane.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxTilepane

Output

When we execute the above code, it will generate the following output −