Layout management for display objects

11.08.2010

10:24

Layout management for display objects

I am working hard at the next update for www.kineticarm.com. So I didn't have much time for the blog in the last month, sorry for that.

At my latest custom project I had a complex GUI system and the whole Movie had to be resizeable. So a layout manager seemed to be a proper solution. I just wanted to have a system where I define positions and sizes of the GUI objects once and without having to care about it afterwards.

I builded a static Layoutmanager class where I register all objects and a helper class that allows me to define position and size of each object.

Values can be defined absolute and relative as in CSS and referenced to top left and bottom right border.

all values ending with "px" are absolute
all values ending width "%" are relative
all values starting width "-" are referenced to bottom/right border.
all values starting with "+" or without any sign are referenced to top/left border.

On top of that all properties can be referenced to the stage or other objects as well. So if layout gets really complex it's possible to build unvisible dummy objects to align other objects to it.Here are some Examples:

// Created an instance from an object from the lib.
// and adds it to the stage
var obj1:MovieClip = new Item();
addChild(obj1);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj1);
lit.scale = false // the size isn't touched
lit.x = "90%"; // X pos. is 90% of stage width
lit.y = "50%"; // Y pos. is 50% of stage height
Layouter.registerObject(lit); // registers the object to the layoutManager
// Created an instance from an object from the lib.
// and adds it to the stage
var obj2:MovieClip = new Item();
addChild(obj2);
// creates a layout object for the added Displayobject
// The constructor takes the display object
lit = new LayoutItem(obj2);
lit.reference = obj1; // values references to obj1
lit.scale = false // the size isn't touched
lit.x = "-100px"; // X pos. is 100 pixels left to obj1
lit.y = "0px"; // Y pos. is obj1.y
Layouter.registerObject(lit);

The only thing you need to do is to call the static method "arrange" of the LayoutManager everytime you want to rearrange all registered objects. This is mostly done in a function called at the stage's resize event.