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.
As an example,
VerticalLayout has the
VerticalLayoutData class, which provides special
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
height properties that require specific pixel values.
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);
VerticalLayoutfor more detailed information about this layout.
Other layouts may have different
ILayoutData implementations. For instance,
AnchorLayout has the
AnchorLayoutData class, which has its own special properties, like
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);
AnchorLayoutfor 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
VerticalLayout doesn't know anything about the properties available on
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