How to use AnchorLayout with Feathers UI containers
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
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
GridView— consider using other layouts that are optimized for data containers by offering performance improvements like layout virtualization.
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);
container.layout = new AnchorLayout();
child.layoutData = new AnchorLayoutData();
toppositions the child's top edge relative to the parent container or another child.
rightpositions the child's right edge relative to the parent container or another child.
bottompositions the child's bottom edge relative to the parent container or another child.
leftpositions the child's left edge relative to the parent container or another child.
horizontalCenterpositions the child relative to the center of the parent container's x-axis.
verticalCenterpositions 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
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
AnchorLayoutData.center() to quickly center a child inside its parent container, both horizontally and vertically.
child.layoutData = AnchorLayoutData.center();
var layoutData = new AnchorLayoutData(); layoutData.horizontalCenter = 0.0; layoutData.verticalCenter = 0.0; child.layoutData = layoutData;
Fill the container
AnchorLayoutData.fill() to resize a child to fill the entire width and height of the parent container.
child.layoutData = AnchorLayoutData.fill();
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.