Understanding Layouts and LayoutInputs

Creating a layout can be somewhat cumbersome at first, in this post I will try to explain how to create a common layout.

My experience is that FormLayouts and AnchorLayouts are the most useful of all types of layouts, the two act almost similar and the only difference is that the former always fills to the size of its parent, the latter sizes to the combined size of its children.
By applying a FormLayout to the outermost Panel or ColorFill in a UI, as the SDK recommends, you can take full control of positioning viewitems on the screen as children of this Panel or ColorFill.
To align these children, FormLayoutInputs should be applied to them, for example one like this:

<FormLayoutInput Top=”Parent,0,50″ Right=”Parent,1,-30″/>

This is what it actually means:

The right border of the viewitem is anchored at 100% of width of the parent, minus 30px. The first parameter of the Right-attribute is the reference for defining the anchor, the second parameter is the offset that should be applied as a fraction of the width of the parent, the third is an additional offset in pixels.

The same logic can be applied to the Top-attribute, except that the offsets relate to the height and the vertical position, so the top of the viewitem is anchored 50px below the top of the parent.

The reference can either be the Parent viewitem, the name of a sibling viewitem or Focus. The Focus-reference anchors a viewitem to whichever sibling that has input-focus.

Good luck!