Monster shadow

VIDEO

How to use Layout Groups in Unity

Description:
Layout Groups can be pretty tricky to understand. In this video I'll show you the basics on how to organize your user interfaces using the various tools provided by Unity. You'll learn about 'Horizontal Layout Group', 'Vertical Layout Group', 'Grid Layout Group' and 'Layout Element' I'll also show you how to setup a typical interface split (master/detail) for a sidebar and content.
ADD A COMMENT

GMS Produções Productions
GOD I FUCKING HATE THESE LAYOUT GROUPS. Been trying to make a expandable dialogue box work like it should since ages! Thank you so much for your tutorial, it helped me a lot!
Tarodev
I can feel your frustration lol
r0botics
Great video mate! Very intuitive
Roose Mwandira
Awesome video, really helped me !
Tarodev
Glad I could assist 😊
feomat
Very great tutorials! Although i already watched many tutorials over the last years, your videos are really on point and still have new informations. Thanks!
Tarodev
Glad I could teach you something new 😊
SEE ALL COMMENTS


Transcript:

today we'll learn about layout groups and how you can use them to organize
your ui and make them responsive across all aspect ratios so
first thing i'll show you is we've got these sprites here and they're all a bit
unorganized so i'm going to click on my parent of the sprites and i'm going to
attach a horizontal layout group now as you can see that
automatically sorts them in a horizontal line i'll go
through the features here first we'll start with child alignment
uh right now the alignment is pinned up against the
top left so for this scenario i would like it to
be in the middle center just so to ensure that
it's always going to be right in the middle of my parent no matter how
big or small i make it so
what we've got here are ways to manipulate the child objects
to best fit your needs now it can get a little bit complicated
uh but i'll let you know what they'll do so
control child size will allow you to basically the the child elements will
always squish down to ensure that they'll fit in the
container but if you'll notice they don't actually
expand to fit the container for that you'll
need to click on force child expand and then
they'll start i'll start going uh they'll fit
regardless of of how big now i only recommend doing this if
the elements in your in your group don't have a specific aspects ratio that
they need for example if if they're just square boxes or
if you're using them for like a health bar or something that will be fun
but for these they obviously they obviously can't be stretched so i'll
turn that off another thing that you can do is say i
don't want my snorlax here to be affected by
the parents layout group in terms of its of its size so what you could do is you
could go on a child component and you could add a layout element now
this basically gives you overrides and the first one is ignore layout group
so i can actually even though that it's still a child of
this horizontal layout group i can pull it out and it can become his own
unit so i'll turn that off now
here i can say in width and min height and we can set it to like that or
anything like that well who's chunky all right so now
when we change this he just ignores the the parent
and what it wants to do so that can be good for uh
numerous things i'll go through what these do
in the last section of this tutorial so in the same way that we've got this
horizontal layout grip we can oh and also the padding so we can
add extra padding on the left or the right
just to say that that could be handy if uh if
for example you've got a sidebar and you wanted a little bit of space up
the top or something um you could just you could add a little
bit of top padding like that so in the same way that we've got this
horizontal layout group we can remove that
and we can make it a vertical layout group and this will react in the exact
same way as you'd expect it's just uh on the on the on the y plane now
instead of the the x yeah we can control the size of
them and it didn't look too good that it uh yeah
just like that next i will show you a way to create a so for example you
want a ui where you've got a sidebar on the left
maybe an info bar on the right and then you've got your your main menu content
so it could be like selecting a world or or your options
pane or something where you've got like a master detail view
so let's do a um let's call this split and we'll make this the full canvas size
and then we'll add an image so let's call this left and let's give this a
nice color like that put this one middle
and color this one pink and this one can be right
and we'll color this one yellow so now on our split let's do a horizontal layer
grip and we'll control the sizes so that they
expand and now say we only want these side ones
to take up a little bit of space and we want this
middle one to always expand as much as it possibly can to fill the
remaining space so what we can do is we can add a
layout group on all of them layout element
and we'll say first on the middle one let's give it a priority
a higher priority than the side ones to always take precedence
and we'll say preferred width and we can just say we always want it to
take up about that much room okay and now that is actually all you
need already to handle that kind of thing
okay um alternatively well not alternatively in parallel
you can say all right i want this one here to take up more room than this one
you can give that a preferred width as well now the way to think about
min width preferred width and flexible width is min width is very rigid
so if you'll see here in preferred width i'm adding this and it's just
it's it's uh making everything else smaller
but it would actually make everything else smaller to infinity as you can see
whereas if i now said i want this right panel to
always have at least a min width of say this this left panel now
preferred width is is it's it's not going to override the min width
of this and in the same way if you give them
both a min width it can actually
push elements out of the array because there's now not enough room
to actually give these elements the min width
and then in the same way so min width is the strongest and then think of this one
as secondary one so basically all the
calculations for min width will go first and then afterwards if there's more
space available preferred width comes into play and then
finally after everything else is done there then
flexible width will come in so basically it's a three-tiered
approach to ensure that you've got like as much control
i've never even found myself needing flexible width just min width and
preferred width has been enough but you should be able to achieve
everything you want to achieve with those lastly i will show you how
the grid layout works so you empty call it grid
expand to fill the size and let's add a grid
layout group on this one so now i will add an image let's make it
cell and now we can just add these and it will
automatically arrange them in a grid and overflow them once it runs out of
room now the grid layout is quite flexible in
what you can do with it but what to note first is that the cells
are actually a set predetermined size by the grid
layout and as you can see here we can actually
expand them and it will it will disregard the aspect ratio of
the child so what you can do about this
is instead of having just the actual object that you want in the grids
displayed you could have a
an empty object so let's call it the sprite parents or this could be like the
inventory item or the the weapon or whatever
and then on the actual parent there you can add the the sprite
itself let's say cell here and then we'll make
another one of those and then this one can be
a jolteon guilty on so now
we just uh duplicate this and we say to our grid we want them to
take up more cell space it will only directly affect the parent
not the child of the parents so it will only affect the direct descendants
of the grid of the grid layout you can add additional spacing to them like that
if you want them more spread out on the x and y you can add padding to
the actual left right up bottom of the of the grid
and here you can change the way the the the amount of columns like right
now it's flexible so it will try to take as many columns and
and rows as it can in the space uh and then it will
overflow to the next ones but you can actually set a
specific column count so for example just two now uh three and
this is this is more of like a you're more in control so it takes less
control from the grid layout which would normally automatically overflow and it
runs out of space now you're saying that you wanted to have nine columns
so it's going to have nine columns regardless uh in the same way
uh the the row count so i want this to have nine rows so it's going to give you
nine rows okay and
in the same way as the horizontal and vertical layer group
we can change the alignment so let's say we want them all in the middle center
and we can say flexible count again and then what we have here is
a way to say do we want these grid items to be flowing horizontally
or vertically like do we want them to fill up the horizontal plane first and
then overflow or the vertical plane first and then
overflow so we can change that here so and i'll
show you here so right now we're filling up the vertical plane first
whereas if we change it to horizontal it's going to fill up the horizontal
plane first okay now that is just about everything i
wanted to show you about layout groups you should be able
to now uh play around with a little bit and make your own uis
it can be a little bit fiddly and sometimes you have to be a little bit
hacky with it but ultimately um i've found that i've
always been able to achieve what i wanted to achieve with the unity
ui system it just sometimes takes a while of just messing around with it
so if you learned anything give it a like subscribe and i'll see you next
time