Been trying to find tutorials of Layout but I am unable to find any posts anywhere on it’s use. Any one have any links to get me started?
Please use my library, not OpenFL/Layout. Mine is easier to use, has more features, comes with actual documentation, and is extensible.
For instance, let’s take the (so-called) SimpleSWFLayout sample project. This sample places three objects onscreen, and then it adds code to scale each one.
Here’s the code for the header rectangle:
layout.addItem (new LayoutItem (clip.getChildByName ("Header"), TOP, STRETCH, true, false));
TOP makes it stick to the top. STRETCH makes it stretch to fill the width of the stage. true means there’s a minimum vertical size, except that it doesn’t because that only applies in combination with STRETCH. false means there’s no minimum horizontal size.
Does that seem unnecessarily complicated to you? It sure does to me. Here’s how you’d do the same thing with my library:
using layout.LayoutPreserver;
//...
var header = clip.getChildByName("Header");
header.stickToTop();
header.stickToLeftAndRight();
In case you’re wondering, “sticking to” an edge means always keeping the same distance from that edge. So stickToTop() means that the header will always stay near the top. But to stick to both the left and the right, it has to stretch, which is why this is equivalent to STRETCH in the Layout library.
But then I thought, that’s still too much work. If the header is already taking up most of the top of the screen, why can’t the computer figure out that it’s supposed to stay that way?
var header = clip.getChildByName("Header");
LayoutPreserver.preserve(header);
The preserve() function looks at header, sees that it’s close to the top and very wide, and then calls the appropriate functions. (That is, it calls stickToTop() and stickToLeftAndRight(), the same ones as before.)
Finally, I added a convenience function to loop through an object’s children. This saves a lot of code, and the outcome is the same.
Anyway, to answer your question, it depends on how you want to make your layouts. Would you prefer to design them in Flash/Animate, or do you want to use mostly code?
1 Like
Thanks! definitely going with this. I don’t have time to decipher the other library and your’s actually has documentation! Big plus! Thanks again.
Let me know how it works!
Hi guys,
For what it is worth, the layout library uses a single layout, designed around an original size (for example, 800 x 600). You can add LayoutItem instances based on each object you wish to have affected by the layout.
You can use alignment such as TOP, LEFT, RIGHT, CENTER or STRETCH
By default objects are assumed to be “rigid”, meaning they must take up (at minimum) their original size. This becomes relevant when determining the smallest layout possible. An 800x600 layout may be able to squish down (say) to 400x300, but after it reaches its minimum size, it no longer squishes the layout, and crops instead.
When you wish to resize the layout, you can call layout.resize with the new size. This may be based upon a screen resize event (and given the whole stage size) or it could be any other dimension based upon the design of your project.
There is a lot of “auto” work done to determine margins and alignment for layout objects, but these can be changed manually if desired.
There is also support for a LayoutGroup which can contain multiple child items.
This was used in production for years, and is on haxelib as a resource for supporting fluid layout.
Thanks 
Right, but my point is that my library does almost all of that with a single line of code.
The only thing missing is “rigidity,” which I’ve never understood the point of. Though if you think it’s important, it should only take a couple hours to add.
Edit: Done! In fact it took just a bit less than an hour. Note that rigidity is disabled by default, but enabling it is easy:
var header = clip.getChildByName("Header");
LayoutPreserver.preserve(header, true);
Hey… Old thread but… your layout lib looks very nice. Can you only layout to relative to stage?
Or its it possible to do nested layouts, layout within Sprites, Rects etc?
You can absolutely do nested layouts!
var layout0:Layout = new Layout(new Area());
var layout1:Layout = new Layout(new Area());
//Place layout0 within the default (stage-size) layout.
layout0.bounds.simpleWidth(500);
layout0.bounds.fillHeight();
layout0.bounds.alignRight();
//Place an object in layout0.
object0.alignTopCenter(layout0, 10);
//Place layout1 within layout0.
layout1.bounds.fillAreaBelow(object0, layout0);
layout1.bounds.fillPercentWidth(0.5, layout0);
layout1.bounds.centerX(layout0);
//Place an object in layout1.
object1.center(layout1);
It’s harder to place objects inside other objects, but there are a few functions for that: alignWith(), centerXOn(), centerYOn(), matchWidth(), and matchHeight().
These don’t give you as much control, so your best bet is to make a new Layout, then use alignWith(), matchWidth(), and matchHeight() to make it exactly match your chosen object. Then you can use all the usual functions, instead of just those five.
Also, yes, you can use both Sprites and Rectangles. In fact, you can use anything defined here, and if something isn’t defined there, you can add it by extending ResizableImpl.
It’s hard to use, because cannot setup autocomplete in IDE 
- Is it possible to specify paddings?
- How to align relatively to stage?
If you are using FlashDevelop press F4 to goto declarations :
Here is some documentation straight from the class LayoutCreator then just choose the type such as OpenFl press F4 and you will find everything you need.
using layout.LayoutCreator.ForOpenFL;
/**
* To use this as a static extension, you need to specify what you're using it for:
*
* using layout.LayoutCreator.ForOpenFL; //compatible with DisplayObjects, but not Rectangles
* using layout.LayoutCreator.ForRectangles; //compatible with OpenFL's Rectangles
* using layout.LayoutCreator.ForHaxeUI; //compatible with HaxeUI's IDisplayObjects
* using layout.LayoutCreator.ForFlixel; //compatible with FlxSprites
* using layout.LayoutCreator.ForHaxePunk; //compatible with HaxePunk's entities
*
* Once you've picked one or more of the above, without any further setup, you can
* call layout functions as if they were instance methods:
*
* object0.simpleWidth(30);
* object0.simpleHeight(40);
* object0.alignBottomRight();
*
* object1.simpleScale();
* object1.center();
*
* object2.fillWidth();
* object2.simpleHeight();
* object2.below(object1);
*
* Remember: set width and height before setting an object's position. Your
* instructions will be run in order, and position often depends on dimensions.
*
* @author Joseph Cloutier
*/
Hi. No, I am using Intellij IDEA with Haxe Toolkit plugin. Looks like it cannot handle such cases 
And yes, I can see methods, if I pree f4 on LayoutCreator
Just paste this under your import statements and it will work with your display objects.
a simple example :
var bg:Shape = createShape(0, 0, 1920, 1080, 0xFFFFFF, 1);
addChild(bg);
//This will tell the Layout the exact size of your current screen
Layout.setStageBaseDimensions(Std.int(bg.width), Std.int(bg.height));
bg.preserve();
var header:Sprite = new Sprite();
addChild(header);
header.simpleScale();
header.centerX();
var content:Sprite = new Sprite();
addChild(content);
content.below(header);
content.simpleScale();
content.centerX();
var footer:Sprite = new Sprite();
addChild(footer);
footer.below(content);
footer.simpleScale();
footer.centerX();
i hope this will clear your confusion .