Unity Page Slider: A Canvas control for scrolling through pages of content

hey guys so in this video I want to share with you a page slider control that I've implemented in unity so I just shared this project on GitHub with a demo uh thing that you can try to see how it works and I'm just going to explain to you how to use this this control in your own projects so let me just show you okay so this is the project that I've shared on GitHub you have like this this demo folder with some few examples and the control that I'm talking about is this one so basically it's a scroll view that allows you to scroll through pages instead of being like a continue scroll you can just scroll from one page to the other as you can see right here Unity does not have this control I needed this for one of my projects so I developed this control and I'm now sharing with you guys for if you want to use it so you can see that I have the slider with three pages and this is a demo static so basically this is a demo where you have the slider already all built when the scene starts you can see that I have this page slider I have three pages inside I have this page dot indicator and the page dots indicator is basically the component that deals with this dots right here that you can see in the bottom and I don't know if you noticed but when you are using the slider the dots change color to indicate the one that is active okay at each month in each moment so now let me just show you how you can build the slider from scratch like this uh let me just create a new scene here oh I have I already have this one test okay I'm going to use this one so basically we would create a canvas now that we have a canvas and go to the page slider folder and you drag the page slider prefab into the canvas you can adjust the page slider to whatever layout you want like the size and the anchors and all that that you need now you have the page slider and in the page weather component you have the this add page button here in the in the edited section so if you press this you can see that I'm adding pages and we are not seeing anything because the pages are empty by default but you can see that now we have three pages and if I'm showing you guys it's just a if you want to build like a static slider you know like you have all the content when the game starts or when the app start you already have all the content and you want to have that slider there this is the way to do it so you can just build the slider in edit time so when you start the game the slider is all set up afterwards I'm going to show you how to build the slider at runtime so in this case like I was saying you already have all the content you can see that you have three pages and basically inside these Pages you can create now let me just like image okay and you can just set the content that you want and one thing to notice is that the structure in my slider in this page slider is you have a page slider the page slider has pages and the pages are page containers these are page containers so you don't need to worry about this component this is created automatically for you and then the page controller has a Content object which is which is the page view and this is the one that you want to deal with this is where you actually build your UI so when you create a net page when you do a net page it basically creates a page container with the page inside that you are actually going to use so in this case I'm just adding this image let me just show you okay I'm just going to duplicate this image set it here with a different color like a green one and this one I'm just going to set it here and with the blue color and now if we start the game you have a slider working so you can see that that's why that is already working now this is one way to create slider of course this works if you have like different pages if each one if each element of the slider is different you can do it like this but if each element is exactly the same you're going to have the same layout for example an image slider you can do it in a different way like the one that I showed you before you can just use a prefab when you are creating the pages so just remember to set clear here so it clears all the arrays and everything and let me use the the prefill that I'm using in the demos which is this slider page and but just let's just tell you that this weather page needs to have a page view all pages in the slide you need to have a page view and then you can add whatever component you want in the page view so here I'm just using the slider page I'm going to add the page so three pages again and now you could just like configure this for example I have these images okay the breaking bad I could just change these two to the text I'm just going to recreate what we have there and you can see that in a few seconds you can have a IH slider a page slider working so not a few seconds maybe a few minutes and the wire basically these are like the best TV shows out there so Breaking Bad The Sopranos and you have the wire and you have an image slide so this is how easy it is to create a Twist I hope it's easy at least when I was creating this okay so I think this really pretty easy workflow to create sliders and what else can you do here oh you have the dots indicator and the dots indicator are those small dots that you can see in the slider right here basically if you want to use it you can see that it's an optional reference but if you want to use it you can just drag the dots indicator to your layout position it wherever you want and assign it to the page dots indicator by default it's using a a play folder a prefab for the page dot but the idea here is that you don't need to create the page the the dots by by yourself so it creates automatically when you are adding pages so if I add three pages you can see that now I have three dots and then I can just configure these dots one thing one thing to notice here is that this page dots don't automatically change the color like which one is active or inactive you need to do it yourself so you have this page dot component which has the events on active State change with true or false so the page is active or is not active and you can just create another component that listens to these events engine basically changes the color actually I think we can change the color directly from here right cover now because it's a cover value I think we cannot give it a color value in the unique events okay I just uh sorry about this right now yeah and of course you can't uh so for example I have this slider dot which is an example component and you can see that the slider dot is referencing the page dot component and it's listening to the only on active State change and basically changing the color when the page is active or not and okay so this is creating a slider from scratch like the one that I showed you here so if you already have all the content and you want to create the slider and in edit time now you have other options so I have this Dynamic slider basically Dynamic slider you can see that the slider is empty so it does not have anything and I'm creating everything from scratch when the game starts so in this pipe slider demo you can see that I have this list of items with the text and the image that I want to use I have the page prefab that I'm going to use and a reference to the page slider and so when the game starts I'm basically going through each one of the items creating the pages configuring each page with the text in the image and basically the only thing that I need to call to create the actual slider is this slider add page and everything else is exactly as we were seeing so it creates a page it creates a dots and it creates everything and you still have another option which is this demo no not the way the lady one and the lazy one in terms of the building the slider is exactly the same but you can see that I call it lazy because we are living with we are downloading the images as we go along only when we did when we need them so you can see that instead of the image I have the URL of the image and I'm not dealing with this so you can see that the page slider demo is exactly the same so I'm just creating the pages and giving the pages to the slider but I have a different prefab for each page which is the slider page lazy where I can give it the image URL instead of the image and here what I'm doing in this slide page slider page wavy is that I'm referencing the page view and I'm listening to the unchanging to active state so this page view has multiple events so you can see that we have these three events so changing to active so when the page is inactive in is changing to active on changing to inactive so the page is the currently active one and it's going to be inactive and on active stage change so basically I which I just pass you a true or false well so it changes true and it changed to false the difference is that this is called when the the stage actually changes and this is called when it starts changes on when we are dragging the slider and when we release the slider and it detects that it should change the page then it caused it oh I'm going to change to that page so in this way I'm using this on changing to active so to load the image to download the image and apply it to the to the image component that I have in the page so you can see here I'm just adding it listening to this event and if I don't have the image I just get image Co routine I just start this corrouting to download the image and apply it to the image component that's why I called it the YZ demo and I think this is it about the page slider I think they're the on pressed now I remember that if page dot I have this unpressed event I think I'm not listening in this implementation I haven't yet implemented the the slider listening to this event so it changes automatically the pages because I'm not using it in my project but I already created the structure to use this but I haven't implemented it so if you need it you can implement it or just tell me and I'll do it for you and one thing that I'll also wanted to talk about what about let me just remember so we have the slider the dots the dot indicator the script oh and we have just another component that you need that you might want to to change which is the page scroller so we have the page slider we have a scroll View and here I have another component I create which is the page scroller and this is the one that deals with the scrolling and the Snapping Behavior so you can see that you have these two values here that you can tweak and basically the mean dot drag is the mean the minimum amount or the minimum percent of screen that you need to drag to actually change the page so you can see that right now I'm using like 10 percent of the of drag to change the place so if I just do something like this you can see that it goes back to the beginning but if I do more than 10 percent it changes the page and you can configure this so let's suppose that you want to do it now I need to the user needs to drag like 90 to actually change the page so if they can change back here it goes back to the beginning and I probably need to change it here so it goes to the next one and so of course 0.9 is not like 0.1 to 0.3 for my experience works pretty pretty well and you have the snap duration this is basically the amount of seconds that it takes to to snap to the other page so right now I'm using like 0.3 seconds but if I put like I don't know five seconds just testing this now on the Fly let's see if it works so I do things like this and you can see that it takes like five seconds to reach the other page which is probably what not what you want but oh yeah and it takes five seconds no matter the distance that it needs to to go you know so you see if it's a big distance it's moving a lot faster but if it's a small business even if I do something like this you can see it's going to take like five seconds to reach the initial state so I think it's a small value works pretty well so I think this the default value that I have right here probably work pretty well and you also have these events on the page scroller so one on page change starter on on page change ended it basically gives the index of the current page and the next one and on the current page and the last page on the current page so yeah so this is it this is the page slider control and I hope it's useful for you guys and if you have any feedback or if you have questions then if you need anything else implemented in this page slider please just let me know oh I forgot sorry I forgot to show you that you can access to it on GitHub let me show you yeah GitHub on my profile and you have the unity canvas page divider and you can just download this release from here which is a Unity package that you can import into your own project and basically you need a package as usual does not come with a demo but only with the prefabs that you need and the grades that you need which is basically this folder right here so just drag the page slider and the page dots and you are good to go so yeah this is it so thank you guys

Channel: Tomaz Saraiva

Views: 8,483

Keywords: unity, unity development, unity games, unitydeveloper, unity tutorial, how to use unity, unity for beginners, unity projects, github, github project, unity complete project, unity package, unity plugin, unity plugin development, unity developer, color picker, changing colors in unity, unity color picker, color picker canvas, canvas to select colors, unity canvas, unity custom editor, page slider, unity page slider, unity scroll snap

Id: Z3K6qApmTsY

Length: 14min 6sec (846 seconds)

Published: Wed Nov 30 2022