How to use AnchorLayout with Feathers UI containers

The AnchorLayout class may be used to anchor the a container's children relative to the edges of the parent container. AnchorLayout is often used for fluid layouts that can automatically adjust themselves when the parent container's width or height is resized.

This layout is designed to be used with basic containers like LayoutGroup and ScrollContainer, which are intended purely for visual layout and do not offer built-in capabilities for rendering data from a collection. If using a container that renders a collection of data — such as ListView, TreeView, or GridView — consider using other layouts that are optimized for data containers by offering performance improvements like layout virtualization.

Live preview of AnchorLayout

The Basics

Create a LayoutGroup container, and add one or more children.

var container = new LayoutGroup();
container.width = 300.0;
container.height = 300.0;
addChild(container);

var child = new Button();
child.text = "Anchored Button";
container.addChild(child);

Set the container's layout property to a new AnchorLayout instance.

container.layout = new AnchorLayout();

Then, set the button's layoutData property to an AnchorLayoutData instance.

child.layoutData = new AnchorLayoutData();

Anchors

To position a child in a container using AnchorLayout, a number of anchor properties are available on the AnchorLayoutData class.

  • top positions the child's top edge relative to the parent container or another child.
  • right positions the child's right edge relative to the parent container or another child.
  • bottom positions the child's bottom edge relative to the parent container or another child.
  • left positions the child's left edge relative to the parent container or another child.
  • horizontalCenter positions the child relative to the center of the parent container's x-axis.
  • verticalCenter positions the child relative to the center of the parent container's y-axis.

The following example positions a child 10.0 pixels from the top edge and 15.0 pixels from the left edge of the parent container.

var anchors = new AnchorLayoutData();
anchors.top = 10.0;
anchors.left = 15.0;
child.layoutData = anchors;

The example above is essentially no different than setting the child's x and y properties, but things get more interesting when other anchors come into play.

The next example positions the child from the bottom-right corner of the parent container instead.

var anchors = new AnchorLayoutData();
anchors.bottom = 20.0;
anchors.right = 10.0;
child.layoutData = anchors;

If the parent container resizes, the child will be repositioned so that it always remains 20.0 pixels from the bottom and 10.0 pixels from the right.

The next example anchors the child to both the left and right edges of the parent container.

var anchors = new AnchorLayoutData();
anchors.left = 15.0;
anchors.right = 15.0;
child.layoutData = anchors;

This sets both the x position and the width of the child. If the parent container's width changes, the width of the child will be automatically updated too.

The next example positions the child in the center the parent container, with equal space on both the left and right sides.

var anchors = new AnchorLayoutData();
anchors.horizontalCenter = 0.0;
child.layoutData = anchors;

Center an object

Call AnchorLayoutData.center() to quickly center a child inside its parent container, both horizontally and vertically.

child.layoutData = AnchorLayoutData.center();

This is equivalent to creating an AnchorLayoutData instance and setting the both horizontalCenter and verticalCenter properties to 0.0.

var layoutData = new AnchorLayoutData();
layoutData.horizontalCenter = 0.0;
layoutData.verticalCenter = 0.0;
child.layoutData = layoutData;

Fill the container

Call AnchorLayoutData.fill() to resize a child to fill the entire width and height of the parent container.

child.layoutData = AnchorLayoutData.fill();

This is equivalent to creating an AnchorLayoutData instance and setting the top, right, bottom, and left properties all to 0.0.

var layoutData = new AnchorLayoutData();
layoutData.top = 0.0;
layoutData.right = 0.0;
layoutData.bottom = 0.0;
layoutData.left = 0.0;
child.layoutData = layoutData;

To add some padding around the edges of the child, call AnchorLayoutData.fill() with a numeric value, representing the number of pixels between the parent container and its child.

child.layoutData = AnchorLayoutData.fill(10.0);

In the example above, the child fills the parent container, but leaves 10.0 pixels of space around the edges.