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.
Here you can download the source code with some examples.
