Automatic layout positioning of children

Cocos Creator
#1

I have 2 items as children in a layout. Is it possible to automaticaly align them in the center so they will always be positioned like that (relative). Right now I can only specify it in pixels which is problematic if the screen resolution changes.

I attached the image of how I want the items to be alligned automaticaly. Right now I would have to specify the padding and spacing in pixels. I would want it to be able to compute that automaticaly.

Is that possible yet or must I program it in C++ myself?

I would also like to know if it’s possible to automatically expand layout sizes: for example if I have 3 layouts inside a parent layout: is it possible to set a “weight” (eg percent size) of each child so that they will fill the parent (so for example one layout takes 25% of the space, one takes 50% and the third takes 25% of space? Ascii: [ABBC], where A,B,C are the 3 layouts, where B has twice the width of A and C.

#2

Try setting empty layout’s paramareters:
Type = HORIZONTAL
Resize Mode = CHILDREN

then add 2 empty nodes to this empty layout - ‘left’ and ‘right’
then add your purple square nodes as children - one into ‘left’ node and one into ‘right’

http://clip2net.com/s/3ARWPiF

#3

Hi,

Did you find a solution to this? I was going to post the same question but I found this topic. I know it’s old but I’d like to revive it to see what the solution is.

Basically I want the same thing, automatic layout where I can set the size of a layout (ex: full height of a screen using widget component) and the layout can automatically spread the node children in it to span the height of the screen. I think this would allow to easily display a menu such as a list of buttons across the page.

Cheers & thanks!

#4

Why not use widget component on the children?

#5

Ya, that’s what I ended up doing.

But instead of setting the child nodes 25% from the top, 50% from the top (or centre), 75% from the top, I thought it would be nice if the layout parent node did that automatically and it could space out any number of nodes evenly. If we can do that then what would be a case where you would use the Layout component?

Should this be a feature request? @walzer @slackmoehrle

Thanks for the reply!

#6

This is how it works actually. Set the “type” to vertical or horizontal and it will space out the inside nodes evenly. Use resize mode: container.

1 Like
#7

Not sure this is what you wanted,

Screenshot_20170426-012137.png2560×1440 359 KB

But, check out the exmple project.
There we can find a lot of good usages…

Screenshot_20170426-012120.png2560×1440 402 KB

#8

@jrosich @StudioAMK Thanks for the replies.

I seem to have gotten it to work. It works fine when I use resize mode: container with spacing.
I was thinking that the layout component would add automatic spacing based the layout size and child node’s sizes if using resize mode: children and the layout size was bigger than the combined sizes of the children nodes then the automatic layout would spread the child nodes evenly within its size.

The way you suggested works just as fine. Thanks for all your help!

1 Like
#9

I’m glad it worked! :+1: