JavaFX GridPane fixed columns and rows


Question

I want to get my GridPane to fix the column width and row height. I want to display a Image in every Cell, and get the image resized to the height of the cell, the width should be resized and stay in the same ratio (its never the case, that the image gets wider then the cell).

After a ton of fiddling I made it so that the 3 columns and 10 rows are getting equaled and resized to the parent size. I cannot provide a working example, but here is the relevant code:

public class JavaFXTest extends Application {

    private static final int screenWidth = 1920 / 2;
    private static final int screenHeight = 1080 / 2;

    private static final Color backgroundColor = Color.BLACK;
    private static final Color cellBackgroundColor = Color.DARKGRAY;

    private static final Color textColor = Color.WHITE;

    private static final Font standartFont = Font.font("Arial", FontWeight.NORMAL, 18);

    private static final int columnCount = 3;
    private static final int rowCount = 10;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws JSONException, FileNotFoundException, IOException {
        primaryStage.setTitle("Drawing Operations Test");

        primaryStage.initStyle(StageStyle.UNDECORATED);

        primaryStage.setX(0);
        primaryStage.setY(0);
        primaryStage.setWidth(screenWidth);
        primaryStage.setHeight(screenHeight);

        primaryStage.addEventFilter(KeyEvent.KEY_PRESSED, new EventHandler<KeyEvent>() {
            public void handle(KeyEvent event) {
                if (event.getCode() == KeyCode.C) {
                    Platform.exit();
                }
            }
        });

        Group root = new Group();
        root.setCursor(Cursor.NONE);

        GridPane grid = new GridPane();

        grid.setHgap(10);
        grid.setVgap(10);
        grid.setPadding(new Insets(10, 10, 10, 10));
        grid.prefWidthProperty().bind(primaryStage.widthProperty());
        grid.prefHeightProperty().bind(primaryStage.heightProperty());

        grid.setBackground(new Background(new BackgroundFill(backgroundColor, null, null)));

        ColumnConstraints cc = new ColumnConstraints();
        cc.setFillWidth(true);
        cc.setHgrow(Priority.ALWAYS);

        for (int i = 0; i < columnCount; i++) {
            grid.getColumnConstraints().add(cc);
        }

        RowConstraints rc = new RowConstraints();
        rc.setFillHeight(true);
        rc.setVgrow(Priority.ALWAYS);

        for (int i = 0; i < rowCount; i++) {
            grid.getRowConstraints().add(rc);
        }

        JSONArray arr = new JSONArray(Util.StreamToString(new FileInputStream(new File("countries.json"))));

        int counter = 0;

        for (int i = 0; i < columnCount; i++) {
            for (int j = 0; j < rowCount; j++) {
                HBox box = new HBox();
                box.setBackground(new Background(new BackgroundFill(cellBackgroundColor, null, null)));

                JSONObject curr = arr.getJSONObject(counter);
                String code = curr.getString("code");
                String name = curr.getString("name");

                File img = new File("flag_img/" + code.toUpperCase() + ".png");
                if (img.exists()) {
                    ImageView iv = new ImageView(new Image(new FileInputStream(img)));
                    iv.setPreserveRatio(true);
                    iv.setSmooth(true);
                    iv.setCache(true);
                    iv.fitHeightProperty().bind(box.heightProperty());
                    box.getChildren().add(iv);
                }

                Text text = new Text(name);
                text.setFont(standartFont);
                text.setFill(textColor);

                box.getChildren().add(text);

                grid.add(box, i, j);

                counter++;
            }
        }

        root.getChildren().add(grid);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();

    }
}

Here are two screenshots: The first shows the layout without the images: screenshot

The second is the exact same layout as above, just with the images screenshot

And maybe you can tell me, why the columns are not that equal with a HBox.

1
2
4/1/2014 5:34:06 PM

I solved the problem by calculating the widths and heights for the images and labels. It was really hard work to get it fit properly, but once its done it works really good

4
4/2/2014 6:05:47 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon