JavaFX: Aligning all content in a FlowPane

Question

I'm working on something that stores a grid of tiles and I'm using a FlowPane so that the tiles can flexibly wrap around if the window is resized.

The problem I have is that there's usually a lot of excess space on the right hand side of the screen, and I would like to distribute it evenly on both sides. Setting the alignment to center kind of works, but it centers the contents in each row, and I want each row to start flush on the left hand side?

Visualization of what I'm talking about:

FlowPane alignment

Any idea what I need to do?

Hygrothermograph

Put the FlowPane inside a larger StackPane. – Elva

Add padding on the left and the right of the FlowPane? – Extemporaneous

Answer 1

You can adjust the borders to get a closer output.

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication95 extends Application
{

    @Override
    public void start(Stage primaryStage)
    {
        FlowPane flowPane = new FlowPane();

        List<Circle> circleContainer = new ArrayList();
        for(int i = 0; i < 5; i++)
        {
            Circle c1 = new Circle();
            c1.setRadius(50);
            c1.setFill(Color.BLUE);
            circleContainer.add(c1);
        }

        flowPane.getChildren().addAll(circleContainer);
//        flowPane.maxHeight(500);
//        flowPane.setMaxWidth(300);
        flowPane.setPadding(new Insets(30, 30, 30, 30));
        StackPane root = new StackPane();
        root.getChildren().add(flowPane);

        Scene scene = new Scene(root, 600, 400);


        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}

Elva

This still has the same problem though. If you resize the window there will be excess space along the right hand margin. – Hygrothermograph

Just updated code. I am not sure what you are asking now? – Elva

In a flow chart there should be extra space to the right up until that space can be filled by the first node on the next row. – Elva

Try this with your Insets -> new Insets(100, 0, 30, 30). I think that's as good as it gets. Zero for the right inset. – Elva

Thanks man. It's not perfect, but it works for me. I'm really not sure there's any way to do what I want with a flow pane, so this is close enough. – Hygrothermograph

Answer 2

You could use the workaround:

final FlowPane flowPane = new FlowPane() {
    {
        setAlignment(Pos.TOP_CENTER);
    }

    @Override
    protected void layoutChildren() {
        super.layoutChildren();

        final LinkedHashMap<Double, List<Node>> rows = new LinkedHashMap<>();
        getChildren().forEach(node -> {
            final double layoutY = node.getLayoutY();
            List<Node> row = rows.get(node.getLayoutY());
            if (row == null) {
                row = new ArrayList<>();
                rows.put(layoutY, row);
            }

            row.add(node);
        });
            
        final Object[] keys = rows.keySet().toArray();
        final List<Node> firstRow = rows.get(keys[0]);
        final List<Node> lastRow = rows.get(keys[keys.length - 1]);

        for (int i = 0; i < lastRow.size(); i++) {
            lastRow.get(i).setLayoutX(firstRow.get(i).getLayoutX());
        }
    }
};

Hugh