Question about Advanced Layout

Help
#1

Hi,
How can I space serveral buttons across the screen from left to right with equal margins between each one and the left and right edge of the screen ?
Thanks
edit: umm maybe I should have posted this in the haxe forum ?

#2

Hi !

First of all, determine the stage width.
If set by the build, you already know that “width” in your .hxml.
If not (by example for HTML5 exported with “*”) you may read from openfl.Lib.stage.stageWidth the value of the stage at runtime.

With that width and the number of elements (dynamic or fixed), you may easily calculate, the remaining size between elements.

Then, you’ve just to set x property of each elements accordingly to the estimed between elements margins, and their own size.

1 Like
#3

Oh, hey, I totally missed this back when it was posted. Feel free to ping me, or open issues on GitHub.

Advanced Layout doesn’t include any built-in way to space objects equally, sorry.

Stephane’s solution should work, and if you wrap it in layout.addCallback(), it’ll run every time the stage size changes. (Also, maybe use layout.width instead of stage.stageWidth, just in case you ever decide to use nested layouts.)

It might be more convenient to call horizontalPercent() instead of setting ‘x’. You’d still have to do some math based on the total number of buttons and then loop through them all, but you wouldn’t need to call addCallback(). Also, my intuition says there’d end up being a bit too much space on the far left and right, and not quite enough space between buttons.

1 Like
#4

Thanks for getting back to me.
I ended up using fillAreaLeftOf and fillAreaRightOf for the buttons to invisible evenly spaced objects across the stage that way I could specify margins. not sure if it was the best way though but its what I came up with at the time.

#5

That sounds reasonable to me.

Little-known fact: Advanced Layout can operate on Rectangle objects. Rectangles are useful in all the same situations as invisible DisplayObjects but carry less overhead.

1 Like