How to: Dynamic Scroll View in Unity

today i'm going to show you how to make a dynamically loaded scroll view in unity so in the inspector we can right click and create a ui scroll view and this will be our item scroll view it depends on what direction you want to scroll in in this case i want to scroll horizontally and not vertically so i'm going to make the width of this game object rather large in this case i'm going to put the width to 1920 so it can match the dimensions of a screen additionally under the canvas i like to put under canvas scaler scale with screen size and put in the resolution of a computer which is 1920 by 1080 so what this does is that if we increase the size of the canvas the ui will scale accordingly with the width and height so back into the scroll view since i want to scroll only horizontally i'm going to disable this vertical scroll capability and additionally i don't like how the scroll bars look on the sides i think it's not clean so what you can do is actually delete the horizontal scroll bar here you can press it press delete and also the vertical scroll bar press delete on that and then you can go under the scroll view game object you can expand it you can select the scroll bar horizontal and scroll bar vertical and disable both of them so that they aren't shown in the game view if it's not letting you deselect it it's because you haven't removed it from this scroll rect unity won't let you disable the game object if it's being used by another game object and so before we add game objects to our scroll view i'm also going to pivot and center it to the middle here so that it's aligned with our scene although it depends on your use case now let's expand scroll view and then expand viewport you'll see that there's this content game object here this is where we want to put our items that are going to be in our scroll view in my case i already have a prefab that i'm going to drag and drop under this content and these images are actually from kenny's asset which i will link down below if we press play you'll see that we can kind of scroll through this but there's only one item and it's being cut off so let's fix that first to center this item we can go to content undirect transform we can pivot it to the center so shift alt click the middle and now it's pivoted at the center and then under the viewport game object make sure all the values on rect transform right here are put to zero so that our items can be centered within our scroll view additionally you can make the scroll view a little higher just so it doesn't cut off the images alright so now i'm going to click my item prefab the spaceship and press ctrl d multiple times to spawn multiple of these items but you'll see that there's only one of these items being shown on the screen and that's because they're being overlapped with one another so what we have to do is put them one next to each other so that you can scroll past them as so but doing this manually would take a long time and if we want to load these images dynamically that isn't viable so if we go to our content game object what we can do is add a horizontal layout group that lays out your child game objects horizontally as you can see if you go to the horizontal layout group and press child alignment you can put middle center and it'll align it back to the center additionally you can add spacing between your game objects so let's say you want a little bit more spacing and you can also add a left and right padding if you don't want your game objects to be cut off by the scroll view so let's say we want a padding 50 to the left and 50 to the right you'll see the padding is added if we click play you'll see that now we have our game objects here which is super cool however if you start to add in a ton of game objects you'll see that they start to overlap one another so let's add in some more spacing here if you click play you won't actually be able to scroll to those new items and that's because the width of this content wrecked transform does not change depending on the size of its children so we want the size of this rec transform to change depending on the size of the layout group and for that we can add in a content size fitter into the content game object and so this will resize direct transform accordingly to our horizontal layout group and now for these both we want to put these to preferred size and what preferred size will do it will drive the width or height based on the preferred width of the layout element so it'll take the width of our layout group and size our rect transform for this content game object according to the size of the horizontal layout group or vertical layout group if you're doing vertical so there's also a vertical layout group if you're doing this for vertical scroll bars so if you click play you'll see that now we can scroll through all of our game objects awesome and as we add more you'll see the spacing is kept intact but we can still scroll through all of them if you'd like you can add a little bit more padding to the sides so it just does not cut off completely but you'll see that if we press play the scroll view starts at the center what if you want to start at the beginning of your list well in that case for the content you'd just set the anchor preset to the left middle so if you press shift and alt left middle it'll now start at the beginning of the list instead of the center of the list you'll see we're at the beginning and now we can scroll all the way to the end also if you want to make this elastic a little smoother under the scroll view scroll rect component you can increase the elasticity maybe to 0.2 and you'll see that now it's smoother when you scroll so what if you wanted to spawn different items dynamically in this scroll view well all you need to do is make sure you just spawn these items under this content transform so that it's a child of the content so to show you how to do that i can just delete all of these existing game objects and so we're going to want to make a script that basically dynamically loads these values into our scroll view so we can right click and create a script called dynamic scroll view and you can delete these two functions along with system.collections and we're going to want to import using unityengine.ui we're going to want a reference to where we want to spawn our items which is the contentgameobject transform so private transform scroll view content content then you want a reference to the prefab that you want to spawn so private game object prefab in my case this is my prefab my prefab is this image which is a glass panel and then a child of it is another image which is the spaceship and so i want to change the spaceship dynamically so in this case i'll take a serialized field so it appears in the inspector a private list of sprites i'm going to call this spaceships then in the start function we can loop over all these spaceships for each sprite spaceship in spaceships we can instantiate that game object game object new spaceship equals instantiate your prefab and then we want to put it under the scroll view content and now we can change the image of that prefab now you can change it here directly however i'd rather make a new script right-click c-sharp script and call this scroll view item and so this will be attached to our prefab i'm going to remove this functions and remove the system.collections both of them we're going to need the unity engine dot ui namespace and the using unity engine dot event systems namespace so here i'm going to have a serialized field which has a reference to the child image then i'm going to have a function public void change image so this is going to be called from our dynamic scroll view to change the image associated with our object so we're going to take in a sprite called image or you can call it sprite and then you can do child image dot sprite equals image so back into the dynamic scroll view now you can do new spaceships dot try get component and then you can pass in the scroll view item so this tries to get a scroll view item component attached to this game object and if it is successful it will output the component attached to this game object so then we can do out scroll view item and then the variable name so we can just call this item and we can put this within an if statement so if we can get the scroll view item component from this game object which we are assuming it already has it but it's nice always to do some extra checks then we can do dot change image and then we can pass in our image space ship so if we go back to unity and back to our scene then you can put this script anywhere i'll just put it under content we can add in the dynamic scroll view pass in the content transform into scroll view content then you can pass in your prefab into your dynamic scroll view script here and then we need to pass in our images so under assets i have a folder called images which i've imported all of the images here for these images make sure they are sprite texture type and then for the glass i put 100 pixels per unit and the ships i put 32 pixels per unit since the ships are 32 by 32 so what i like to do is right click on the inspector lock it so it doesn't move click the first spaceship scroll down press shift click the last one and then drag them onto the list here and it'll populate the elements now make sure to unlock the inspector go to your prefabs spaceship and then make sure that your prefab has this item component scroll view item component and then you can just drag and drop your ship into the child image here and if you click play now it'll load in all the different kind of images and you can scroll through them pretty cool and just quick little thing i wanted to mention if you want to be able to click on these items and have them do something that's why we added the unity engine event systems we can add in an interface called i pointer click handler you also have down enter exit move in this case we want to do something when we click on it so once you put this interface we need to implement the function on pointer click which in vs code you can click it press ctrl dot at the same time and put implement interface i'm just going to remove this throw new and put debug.log clicked item all right so basically now whenever you click an item it will tell you that you've clicked an item clicked item see if we click outside nothing happens now if we click on each one it keeps putting the console awesome so i hope you enjoyed this video and found it useful if you did make sure to subscribe and like and click that bell notification icon and i want to thank all my patrons for the support they make this kind of content possible if you're interested the link is in the description i offer source code early access to video exclusive content and more and with that i'd like to thank my new patrons in the enthusiastic tier we have louise anandevia vanessa maxime anna mato not so otto gurugang ice clue bobby g christine andau samuel peter eric deca dev lee and christopher thank you so much for your support and thank you to all those who gave annual supports as well in the dedicated tier we have pet punkin thank you so much for your support it is really appreciated and in the loyalties we have mark thank you so much for your support everyone i really appreciate it once again link is in the description thanks so much for watching and i'll see you next time [Music] you

Channel: samyam

Views: 30,411

Keywords: unity dynamic scroll view, dynamic scroll view, scroll view, scrollview, horizontal layout group, vertical layout group, unity content fitter, dynamic scroll unity, dynamic scroll, runtime scrollview, runtime scroll view, dynamic scrollview, horizontal scrollview, Dynamic scroll list unity, dynamic scroll tutorial, Dynamic scroll view unity, unity dynamic scroll tutorial, unity scroll view, scrollrect, ui scroll view unity, unity scrolling, how to make a scrollview in unity

Id: 1phTiu_qtik

Length: 12min 41sec (761 seconds)

Published: Thu Jul 21 2022