Using the AnchorPane Layout in JavaFX - dummies

Using the AnchorPane Layout in JavaFX

By Doug Lowe

An anchor pane in JavaFX is similar to a border pane in that it lets you position nodes relative to one of the edges of the pane. However, here are several key differences:

  • In a border pane, the layout area is divided into five distinct areas: top, right, bottom, left, and center. An anchor pane does not divide the layout into distinct areas. Instead, every node in the layout can be tied — or anchored — to one or more of the four edges of the layout area. When a node is anchored to an edge, the anchor pane will position the node as close as possible to that edge after allowing for other nodes.

  • A node can be anchored to more than one edge. For example, a node can be anchored to the top and right edges, which will place the node in the top-right corner of the layout.

  • If a node is anchored to opposite edges (top and bottom or left and right), the node will be pulled toward both edges of the layout. This results in the node being stretched as the size of the layout increases.

  • More than one node can be anchored to each edge. In that case, the nodes will overlap as they would in a stack pane.

The following table shows the constructors and methods of the AnchorPane class, which you use to create an anchor pane.

Constructor Description
AnchorPane() Creates an empty anchor pane.
AnchorPane(Node… children) Creates an anchor pane with the specified child nodes.
Method Description
ObservableList<Node>
getChildren()
Returns the collection of all child nodes that have been added
to the anchor pane. The collection is returned as an ObservableList type, which includes the methods
add and addAll,
which lets you add one or more nodes to the list.
static void setTopAnchor(Node node, Double
value)
Anchors the specified node to the top edge. Value
indicates the offset from the edge.
static void setRightAnchor(Node node, Double
value)
Anchors the specified node to the right edge. Value
indicates the offset from the edge.
static void setBottomAnchor(Node node,
Double value)
Anchors the specified node to the bottom edge. Value
indicates the offset from the edge.
static void setLeftAnchor(Node node, Double
value)
Anchors the specified node to the left edge. Value
indicates the offset from the edge.
void setMinHeight(double value) Sets the minimum height of the anchor pane.
void setMaxHeight(double value) Sets the maximum height of the anchor pane.
void setPrefHeight(double value) Sets the preferred height of the anchor pane.
void setMinWidth(double value) Sets the minimum width of the anchor pane.
void setMaxWidth(double value) Sets the maximum width of the anchor pane.
void setPrefWidth(double value) Sets the preferred width of the anchor pane.
void setPadding(Insets value) Sets the padding around the inside edges of the stack
pane.

To create an anchor pane, call the AnchorPane constructor and pass the nodes you want to add. For example:

Rectangle r1 = new Rectangle(400,200);
r1.setFill(Color.LIGHTGRAY);
Rectangle r2 = new Rectangle(200,400);
r2.setFill(Color.DARKGRAY);
AnchorPane anchor = new AnchorPane(r1, r2);

Here, a pair of rectangles, one 400×200, the other 200×400, is created. One is filled light gray, the other dark gray. Then, an anchor pane is created and the two rectangles are added.

You then use the setTopAnchor, setRightAnchor, setBottomAnchor, and setLeftAnchor methods to anchor the nodes to the edges of the anchor pane. Each of these methods accepts two parameters: the node you want to anchor and an offset value that lets you anchor the node a certain distance from the edge.

For example, to anchor rectangle r1 to the top and left edges and rectangle r2 to the top and right edges, use these lines:

anchor.setTopAnchor(r1, 0.0);
anchor.setLeftAnchor(r1, 0.0);
anchor.setTopAnchor(r2, 0.0);
anchor.setRightAnchor(r2, 0.0);

The following shows how this anchor pane will appear when displayed in a scene.

Two rectangles displayed in an anchor pane.
Two rectangles displayed in an anchor pane.

The window in the top part of Figure 1 shows how this pane appears when it is initially displayed. Here, you can see how the light gray rectangle is anchored to the top-left corner of the layout, and the dark gray rectangle is anchored to the top-right corner.

The anchor pane is initially sized so that its contents fit snugly. As a result, the dark gray rectangle overlaps the light gray rectangle. The window in the bottom part of the figure shows how the layout appears when the user stretches the window, allowing the anchor layout pane to grow. As the anchor pane gets wider, the light gray rectangle stays put in the top-left corner of the layout, while the dark gray rectangle follows the top-right corner of the pane. Thus, the rectangles separate.