How to use Layout Groups in Unity

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

Channel: Tarodev

Views: 1,877

Keywords: Tarodev, layout group, layout groups, horizontal layout group, vertical layout group, gris layout group, layout element, unity, unity3d, tutorial, gui, ui, unity layout group, unity tutorial, unity ui tutorial, unity layout groups, unity ui layout group, unity gui, unity ui grid

Id: ouXCjFcfNfA

Length: 11min 2sec (662 seconds)

Published: Tue Feb 16 2021