How To create a SCROLLING LIST in UNITY using LAYOUT GROUPS UI Tutorial

using the built-in unity layout groups i'm going to show you how to make a scrolling list like this that's contained within the confines of your image and you can set this up in just a few minutes i mean it's not that exciting but this is really useful stuff that you'll use in all your projects alright so we have this empty unity project i'm doing a 2d project but if you're on 3d no worries you can just select this 2d button at the top pretty much all ui elements are considered 2d so it's okay to work in that and first thing we want to do is go to our hierarchy and right click and create a new canvas in unity your ui elements won't display without a canvas just like painting you need something to paint on this is where we're going to paint our ui elements i'm going to leave render mode as green space overlay and for ui scale mode i'll change that to scale with screen size and i'll change the resolution to by 1920x1080 for hd let's right click on this canvas and go to ui and create a panel you'll notice it fills the entire canvas by default so using this rec tool or you can also use the hotkey t i'm just going to drag the panel in it doesn't have to be perfect i'm just kind of making a list background for now all right so that's good enough for me it just gives us a little bit of an area to work within i'm going to call this scrollable list and before we start adding any components there's two things i'm going to do i'm going to right click on this and go to ui and select button text mesh pro you can also use the regular button text mesh pro just gives you better text options though and then i'll import text most pros essentials and i'll select this button and again using the rect tool i'm just going to drag it up a little bit so my approach to it is i like to set up the buttons beforehand you can have the layout group which we'll eventually use in a second here uh determine the width and size of your buttons but i like to have a little more control over it so i set it up beforehand so i'll just have it coming in a little bit from the edges so we have our list and we have our button nothing else is on them let's right click on our list one more time and go to ui and this time we'll pick an image which is just this white box doesn't matter what it looks like this is going to be what i call the grid content and why we set it up this way is so that we can scroll later on easily so first thing we want to put on this grid content is the content size fitter so you can go to add component and type content and content size fitter there's two options horizontal fit and vertical fit and for vertical fit we want to set this to preferred because we just spent that time to set up this nice button and i'm also going to change the anchor of this grid content so i'm going to click on this box i'm going to hold alt and i'll select this top right one to stretch it going back to our button i'm going to add component and type in layout element and there's a couple options here basically there's going to be a group right and the group's going to have a bunch of settings but this layout element says this is going to be a part of that group and you can specify individual settings here so i'm going to for all the buttons toggle preferred height so that we keep the height we set up before and i'll also toggle flexible width because i want it to match the width of whatever this grid element is going to have and with that we can pretty much just drop our button down onto the grid content on our grid content we can add our grouping now that i just mentioned and the reason i wait till the end to add the group is because when you start trying to change the size of the elements in your group it can kind of be a pain so if you do it at the end you can configure it first and then just create a group anyway so i'll add a component on our grid again and this time we'll type in vertical layout group and you'll see it kind of shifts around it's okay the vertical layout group has a bunch of options here like padding and spacing and a couple check boxes we want to uncheck the child force expand because we want the child to have its existing setup that we did before and i'm going to change the child alignment from upper left to upper center just so it's nice and centered cool so what happens now is you can select your button and press ctrl d to duplicate and you can actually do this multiple times and you'll notice that it starts to fill up obviously but it's kind of generating these buttons from the center outward whereas i would like this to generate from the top down in order to do that let's change the anchor point of our grid content so i'm going to click on this and hold alt and you'll see the icons change and i'll click the top center one and so you'll notice the button moves up but we're still not done because if we keep going now it's just doing the same thing but higher up make sure on grid content and your rec transform component the pivot has the y value set to one that's very important because now when you start duplicating buttons you'll notice they go from top down which is great this is starting to come together but there definitely is not a lot of room in between these so we can go back to our grid content and under vertical layout group you can kind of play around with the spacing here so you can actually click to the left of the field and then hold and you can kind of drag and you'll see it starts increasing the value you can go left and right to increase and decrease but i'll just give a little bit of spacing that looks a little better and i'll actually change the background color of this just to like half opacity so it kind of looks a little more distinguished last thing you can kind of do with this vertical layout group is change the padding so you'll notice it's very tight at the top here so at the top we could add i'm not sure maybe like 20 and i'll do the same thing at the bottom 20. now when we play the game we have a vertical list of buttons and we could program each one of these buttons with a non-click function but it's definitely expanding off the screen so we want to be able to snap that and then be able to scroll between it which is our next task so on the parent to the grid content the scrollable list which is our highest level object we can add a new component of a mask and you'll immediately tell that it starts to cut it off now we can then add one more component called a scroll rect and this is what's going to enable us to be able to scroll through this list so this is where it's important you'll notice the first field it requires is a content rec transform this is why i set it up with the grid content object being a child we can just take grid content and drag that in and so now when we play we can actually click in the list and drag through and we can also scroll pretty slowly but you'll notice if we click and drag to the sides it's going all over the place like horizontally and we want to restrict that because we just want to be able to go up and down this is as easy as going into our scroll rect and unchecking horizontal i'll also change the movement type to clamped so it's a little more uniform and we'll change scroll sensitivity to something like 50. scroll sensitivity is for your mouse wheel scrolling so now we can click and even if i go left and right it's only moving up and down and i can scroll with the mouse wheel but as is it's kind of hard to tell where you're at in relation to the entire list so we should add some sort of scroll bar to help indicate that outside of our scrollable list because of the mask let's right click on our canvas and go to ui and select scroll bar i'll drag it to the side and if you scroll down there should be a scroll bar component there's a direction property we want to change it from left to right to bottom to top which might seem counterintuitive but the directions are actually what's counter-intuitive and then using our rec tools that we've been using this whole time i'm just gonna drag this out to be the length of the list and i'll make it a little wide just so we can see what's happening but that's pretty much it then you can just click on your scrollable list and drag in the scroll bar into your vertical scroll bar and that's it now as you scroll the scroll bar will update and you can also grab this handle and move up and down yeah it's pretty easy thank you unity and while this is just using your basic unity assets you can definitely spice this up by implementing this with your own ui designs and i was going to show you how to set up a horizontal group but it's basically the same exact thing just using the horizontal functions and slight tweaks so i challenge you to give that a try yourself thank you very much guys for watching i hope this helped you out you should now be able to scroll down to your list it only takes like a few minutes to set up oh my god i'm sorry guys i forgot i forgot i put my youtube subscribe button in this list i don't want you to get the wrong idea i'm not a big self-promoting guy oh man and there's also this like the video button that's a shame i forgot i put that in there too and the join the discord button and comment on my video button

Channel: BMo

Views: 19,304

Keywords: bmo, unity, unity ui, unity layout group, unity layout groups, user interface, design, scroll, vertical, horizontal, unity2d, unity3d, beginner, how to, tutorial, canvas, scrollbar, beginner tutorial, lesson, learn, c#, user experience, ui/ux, ui, ux, hud, overlay, menu, scrolling, scrollable, unity scrolling ui

Id: zbUVWnq9j20

Length: 7min 57sec (477 seconds)

Published: Sun Aug 16 2020