Layout Data

Some layouts have a related class that implements the ILayoutData interface. If such a class exists, it may be used to associate additional information with a specific child of a container that will affect the way that the layout positions, sizes, or otherwise transforms the child. An instance of this class should be passed to the layoutData property, which is available on all Feathers UI components.

VerticalLayoutData example

As an example, VerticalLayout has the VerticalLayoutData class, which provides special percentWidth and percentHeight properties. These properties make it possible to specify a child's width or height based on a percentage of the parent container's width or height, instead of using the standard width and height properties that require specific pixel values.

In the following example, a LayoutGroup container is using VerticalLayout. Two children are added, and they each specify VerticalLayoutData with the percentHeight property.

var container = new LayoutGroup();
container.layout = new VerticalLayout();
addChild(container);

var child1 = new Button();
child1.text = "One";
var layoutData1 = new VerticalLayoutData();
layoutData1.percentHeight = 25.0;
child1.layoutData = layoutData1;
container.addChild(child1);

var child2 = new Button();
child2.text = "Two";
var layoutData2 = new VerticalLayoutData();
layoutData2.percentHeight = 75.0;
child2.layoutData = layoutData2;
container.addChild(child2);

See VerticalLayout for more detailed information about this layout.

AnchorLayoutData example

Other layouts may have different ILayoutData implementations. For instance, AnchorLayout has the AnchorLayoutData class, which has its own special properties, like top, right, bottom, and left — to position children near the edges of the parent container.

In the following example, a LayoutGroup container is using AnchorLayout. A button is added as a child, and the button is positioned 10 pixels from the right edge of the container, and 20 pixels from the bottom edge.

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

var button = new Button();
button.text = "I'm a Button!";
var anchors = new AnchorLayoutData();
anchors.bottom = 20.0;
anchors.right = 10.0;
button.layoutData = anchors;
container.addChild(button);

See AnchorLayout for more detailed information about this layout.

Don't mix and match

A layout cannot use an ILayoutData implementation from a different layout. For instance, if a container is using VerticalLayout, its children cannot use AnchorLayoutData. VerticalLayout doesn't know anything about the properties available on AnchorLayoutData.

The built-in layouts will generally ignore ILayoutData that they don't recognize. However, that's not guaranteed for custom layouts. It's a good idea to assume that an exception could be thrown if a container has children that use the wrong ILayoutData type.