Jump to content
  • Advertisement
Abdou23

Help with creating a Layout Group

This topic is 371 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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

    function group.add( obj )
        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 this post


Link to post
Share on other sites
Advertisement

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.)

Share this post


Link to post
Share on other sites

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!