# Help with creating a Layout Group

## Recommended Posts

If you are familiar with "Layout Group"  in Unity or "stack view" in IOS then you understand what I want to achieve, if not, then it's basically a group that arranges its objects horizontally for example side by side based on their number and with. It also edits each object's width based on it.

Here is the code I have:

function horizontalLayout( offset,x,y )
local group = display.newGroup( )
group.children = {}

function group.sort(  )
local newOffset = x
for i=1, #group.children do
local child = group.children[i]
child.x = newOffset
child.y = y
newOffset = newOffset + child.width + offset
end
end

group:insert( obj )
group.children[#group.children+1] = obj
group.sort()
end

return group
end

This works as it should. The only problem is that it positions the objects from the starting point onwards, while a proper Layout Group should sort the objects based on their collective width extending in both directions.
Example: If the starting x position = 150 and there are 2 objects in the group, then the first one should be positioned at (150 - object.width/2 - offset) and the second object should be the opposite. If there are 3 objects then the second object would be at exactly 150( I think), the first object on its left and the third object on its right.
The problem is that I'm unable to come up with the equation that achieves's this kind of sorting.

I hope that I have described everything as clearly as possible.

PS: I'm using Corona sdk and Lua

##### Share on other sites

Sounds like you want to centre the contents... in which case, the only difference from the normal algorithm would be to offset everything by half the width of the container. Or did I misunderstand you?

##### Share on other sites
1 hour ago, Kylotan said:

Sounds like you want to centre the contents... in which case, the only difference from the normal algorithm would be to offset everything by half the width of the container. Or did I misunderstand you?

I think so yes. But, how to add (group.width/2) to the equation?

##### Share on other sites
31 minutes ago, Abdou23 said:

I think so yes. But, how to add (group.width/2) to the equation?

IMO the simplest way is to determine the total required width first and then compute the starting position from this, then reposition all children, like so:

1) iterate the list of children and sum up their respective width; if necessary then count the children in this step

2) add N-1 times the gap width to the above sum, where N is the count of children

3) compute available width (of the container) minus the sum computed above (so you get the remaining space), and divide the result by 2 (so you evenly divide up the remaining space for the left and the right side); let's name the result as pos

4) iterate the children again; for each turn, set the position of the current child to pos, then add the width of the child plus the width of a gap to pos

Of course, if too many children are in the group, the result of 3) will become negative. If this situation may occur in your use case, then you need to think about how to handle that (e.g. clipping, line breaking, whatever...).

##### Share on other sites

It depends how you're handling the coordinates, e.g. in local or global space, etc. Normally the layout box grows to fit the children and you can't put children outside of the layout box, so it's more about positioning of the layout group itself than it is about positioning the children. With that in mind, you'd look at it one step up the hierarchy - given the layout group knows its own size (based on its contents), and it knows the space it needs to fit into, where should its edges be? (Hint: for left-align, all the spare space goes on the right, for right-align, the space goes on the right, and for centre-align, the space needs dividing equally.)

## Create an account

Register a new account

1. 1
Rutin
24
2. 2
3. 3
JoeJ
18
4. 4
5. 5

• 38
• 23
• 13
• 13
• 17
• ### Forum Statistics

• Total Topics
631708
• Total Posts
3001839
×