3. Creating the Onboarding Screen with multiple slides | Swift 5, XCode 12

[Music] okay welcome back guys um in our last video we're able to set up the project we're also able to implement the launch screen and in this video we're gonna work on the onboarding screen so we're by the end of this video we're going to have this uh particular effect so you can swipe left right through the different pages you see the different text available in the pages then you will also be able to see the next and get started button depending on the particular page that we are so um let's get to it so yeah i have my project open right here and i'm just gonna head over to the main.storyboard because this is where we're gonna be working and actually i'm going to do something real quickly so i'm going to create a a folder and i'm going to call this model because this is where i'm going to have my different models or structures as you will then i'm going to create another one that i'm going to call screens or maybe you should call this scene i guess or views whatever you want to call it but this is going to be our different pages of the application then i'm also going to create um a custom views even though we may not need this right now custom views um i guess for now this works now in our onboarding now in our um views i'm going to create the onboarding folder because you know that's like a page on its own so new group and onboarding is the name right now in our onboarding view or screen i want to have my onboarding view controller so right there i'm going to create hold down command n or you can do file and new then i'm gonna select coco touch class and then ui view controller then here i'm gonna call this onboarding make sure language is swift i don't even know objective c so click on next uh make sure the target is selected we're creating this in the onboarding folder so create and we have that right over here let's get rid of all these junk suites so um what i'm going to do is i'm going to connect the view controller to this particular class so head over and first delete this guy because we're not going to be using this so head over to your main.storyboard and if you remember how to connect you make sure this is selected then go to your identity inspector and it was initially view controller so now we got to change this to onboarding view controller and now both of these guys are connected great now let's get started with the actual design so the first thing we're going to need to do is we're going to be using a collection view to handle the different pages so i'm going to drag in a collection view right here from the top the bottom good so yeah something i guess like this should be good for now so uh the next thing we're gonna need is a button so let's click and drag a button right down here and um [Music] finally we're going to need a page control so page control and this is just like it tells us what particular page that we are so click drag put it right here so for the button i'm going to give this a width of about 150 and a height of 50. then i'm going to constrain this to let's say 40 to the bottom all right and we need to center align this guy so um center horizontally so good we have our button set next thing we need to do is to position our page control so this again is going to need to be sent uh it's going to have is going to need to have center alignment with the view so center horizontally in safe area as well and we're going to constrain this guy to um let's say about 16 pixels or 16 to the bottom so the next thing i'm gonna do is even though it's not very important but let's change the text to the button and then we're gonna need to change the color of our button not the text color but the background color so i'm going to be using a dark a dark color very close to black so let's just click on custom and let's head over here click on black and maybe also we don't want it to be this dark so let's see just scroll like this all right all right this this seems seems pretty good so next we're going to change the color of the text to white so how do we do that again text color simple enough white great so um yeah this looks this looks good so the next thing i'm gonna do here is to add a um a color right here for the current page i want it to be red or basically like our ab theme color so that and for the tint color like the other colors we're going to just simply use i need something light so let me see light gray that looks too dark let's go for um let's see system grade five all right this looks this looks pretty good this looks pretty good so now we're gonna add constraints for our collection view so that it um you know matches the rest and i'm gonna use zero like this all right so we have our collection view we have our page control we have our next button or our button all right so um what i'm going to do next actually is to connect these guys to our view controller so just click on this place and assistant get the assistant editor and we're going to create outlets for all of these um uh what's it even called widgets or whatever so collection view i'm going to hold down control click drag to the view controller and call this collection view we're going to do the same thing for the button now we're going to need to we're going to be changing the text of the button so that's why i'm trying to create an outlet if we don't need to do that most likely not like create an outlet right so i'm going to call this next button like that and finally we're going to have the page control like that and i'm going to call this page control suite then we're going to need to drag an action so whenever you click on the next button we want to execute a particular function so i'm going to call this next button clicked and it's a ui button we're going to connect great so now we have all of these things connected the next thing i'm going to do is actually want to add corner radius to this and there are different ways that we can do this we can of course head over to our identity inspector and then add the corner radius like this or we could also just do that in our view controller class but i know i'm going to be using this um or i may be using this often so rather than having that i want to create it as a property over here right so that we can easily set the quantum radius from here so what i'm going to do is i'm going to create an extension i'm going to create an extension group here and i'm going to create an extension for ui views right so we're going to select swift file and say ui view and i'm just going to say extension like that so now we're going to create an extension of the ui view but before we have access to ui view we need to import the ui kit suite so now we're going to be creating a property called corner radius and this is going to be of type cg float and we're going to specify a get and a set right now for the get property what we're going to do is we're going to return the corner radius and for these sets we're going to say self dot layer dot corner radius and this is going to be equal to the new value whatever was set as the corner radius all right now um finally for us to have this guy show up in our storyboard what i'm going to do is i'm going to say at ib inspectable so this is going to i'm going to show you what is good what it was going to do so um yeah we can actually close this out and in our storyboard i have my button selected and right here you can see that now we have a corner radius property and we can simply specify the corner radius i'm just going to use 10 and let's go ahead and run this and hopefully we have this exact design as complicated at it as it is so so our launch screen is good and of course we have our corner radius uh button we have the page control we have our collection view right here so um yeah let's go ahead and implement the collection view or the page slider itself so um what i'm going to do first of all is i'm going to create a model and i'm going to call this right in our mod models folder i'm going to call this onboarding slide because i want this to hold the different values that we need for our onboarding screen so first we need to create a struct and we're going to need to specify the name of course so onboarding slide good and this slide has a title it has a description and you know we can actually just use the same string and use commas to separate these things but well i like typing guess and the image as well is going to be and a ui image so again we need to import ui kit for that to make sense so yeah cool now we have our onboarding slide the next thing we're going to need to do is to head over to our view controller our onboarding view controller in our views and we're going to need to create an array right here and i'm just going to call this slides and this array is going to be of type onboarding slide initially it's going to be empty cool now let's head back to the main.storyboard and implement the design for the slide so head over to your main.storyboard and we're going to drag this down it doesn't really matter yet because we're going to specify the size of this thing in our code but just drag it as much as you want or as little as you want so now in our slide in every page the first thing we see very clearly is that we have a ui view so i'm going to drag one like that then also we have uh like two texts the title and the description so i'm gonna drag a label right in here and i'm gonna set this to so this is gonna be our title so i can just quickly uh write something quick uh delivery at your doorstep cool all right so um let's go ahead and give let's make this like 31 31. um yeah i guess i guess this looks good and i'm going to create a second one a second label and the color is cool so you can use that and this second label is going to be it's gonna have a color of um gray so so let's head over to where's that was let's do light gray light gray light grey yeah i guess it's okay or we could use something a little bit darker it's not like it's cool so we're gonna use light gray and i'm going to reduce the size a bit 15 should be okay so i'm going to put both of these guys into a stack view so remember how we did that in our um launch screen embed in a stack view cool so it actually made this a horizontal stack so i'm going to select vertical and i'm going to put a spacing of about 16 pixels and drag it in here cool so now let's add constraints so i'm going to use um [Music] make this 0 make this 16 16 and 16. right cool and finally we're going to need to add constraint to the image as well so this is going to be 0 0 0 and the other one is cool all right so we are getting there so uh i need both of these texts to wrap so i'm gonna set the maximum or the line height to be zero for both of them 0 like that and actually add something that makes sense over here i'm going to say home delivery and online reservation system for i'm actually reading this from somewhere so for um restaurants and kay and cafes restaurants should i restaurants and cafes all right so uh this looks very weird why is that well just click on your stack view and let's make sure that the alignment is correct so i need center so that is cool and um actually need both these texts to be center aligned as well so now this looks a bit okay it looks pretty good right so now we have our um collection view designed very well the next thing we're going to need to do is to connect this design to a collection view cell class so in our onboarding folder i'm going to hold down command n and we're going to be creating a collection view cell so i'm going to call it onboarding again can i spell that correctly yep and this time is going to be a ui collection view cell so we're going to click on next and create so now we have the cell created we are we're going to need to connect this guy to the view in our main.storyboard so click on that make sure you click on collection view head over to the identity and paste that over there did that not work [Music] why ah pardon me get to the cell not the collection view right so collection view cell that's what we created and head over to the um what's this called attribute no yeah attributes and then the identifier the reuse identifier need to set that and we're going to be using the same exact name and we're going to see that in a bit of the reason in a bit so now we have this connected we're gonna do next is we're gonna open up the attributes of the assistant editor rather and we're gonna go to uh it doesn't i need to get to um this guy so i'm just gonna hold down command shift and o and then i'm going to select i'm going to type onboarding so i want the collection view cell so i'm going to hold down command think it's command on supposed to be option pardon me pardon me part of me so hold down that again hold down option click on this beautiful so if you hold down option is going to open it like this so um yeah now we can go ahead and drag the outlets to our um class so the first one we have here is the image view i'm going to call this slide image view next we have the title and this is a i'm going to call this slide title label and finally our description which i'm gonna call slide description label all right so um yeah this looks good next i'm gonna create a function a setup function it's just something i like to do so head over to your collection view cell and i'm gonna create a function just need one space i'm gonna call this setup now our setup function is gonna be expecting a slide which is of type onboarding slide right so um now we're going to need to populate the fields so we're going to say slide or slide image view dot image is going to be equal to the slide dot image as you guessed the same thing for the title title.text is going to be equal to slide.title i can see the benefit of using the structure everything is well um what's the word i don't know so um finally we have the description label the text is going to be equal to [Music] um slide dot description perfect so now we have our onboarding collection view completely set up so um we can of course head over to the onboarding view controller and then i guess this is where we're going to do and work some magic before then there's one more thing that is actually very important but i'm gonna hold off so let's see uh maybe we can discover that or discover it while discovering the problem what am i saying so anyhow um so what i'm going to do is right at the bottom of the screen i'm going to create an extension of this exact same class so onboarding view controller like that view controller and this is going to conform to the ui collection view delegate and the ui collection view data source and for both of these guys to actually be triggered we need to set the delegate to self now there are two ways we can do that we can actually come over here and say collectionview.delegate equal self then collectionview.datasource equals self right you can do it like this an alternative is to head over to the main storyboard and i guess i i like to do this may not be the better option but i just like to do it so just click on this icon right here and go to this one and what's called connections inspector click on that and you're going to need to you're going to find um rather sorry click on the collection view why did i make that mistake so um yeah click on the collection view and right here you're gonna see the data source for the collection view and the delegate so you can just click and drag to this icon right here so it's like you're connecting it to the class so you can do it like this click for the delegate as well and this is connected and now we're not going to need to specify this all right so yeah you have these two options then go ahead and choose whatever option you prefer so um now we have oh we're conforming to this we need to implement the methods that are necessary so the first one we're going to use is the number of we're going to be using number of items in section and as you probably guessed we're are going to count that from our slides so we're going to say return slides.count and the next thing we're going to need is a cell for item at index and here we're going to be returning the ui sorry the uh onboarding collection view cell that we have created so we're gonna say let's um cell be equal to collection view dot dq um reusable cell with identifier so this is the option that we need so i'm going to click on that let's actually remove this for now so um yeah now what exactly is our identifier so we can of course head over to the collection view and create a static label let's do that at the absolute beginning so i'm going to say static let identifier be equal to string well we could actually use the name we could actually just write the name of the class which was what we set as the reusable identifier in storyboard if you remember but also you can also um write describing what i what am i spelling here this dot self so this is basically going to use this it's going to convert this to a string and use it the the um yeah just going to convert to a string and use it so whichever method you prefer you know you can decide to write it like that in strings but well okay so um yeah now we have our identifier let's head back to the onboarding view controller and here we can simply just call the name of the class and pass in identifier like that and here we're gonna have index path this is coming from here and we're going to cast this as a this finally we're going to return cell pretty good right so uh the last thing we're going to need to do is for every cell we need to set it up right so we have a function in our cell called setup that expects a slide or a slide of type onboarding slide and we have that in our array of slides so i'm going to say slides and we're guessing the index path dot row also so this is going to pass every slide to the collection view cell and that is going to populate the label the image and the description the title label and description all right so i think we can actually go ahead and run this but in order for us to make sure that it actually works i'm going to add some data to our slides and actually i'm just going to copy what we already have to avoid typing everything from scratch again so i'm going to do that over here i can actually just change the value it doesn't really matter whatever choice you you make is completely fine well let's actually keep things neater and say slides equals and an array like this so this contains all of our icons this is the first slide and the text the title and the description the second slide the title and the description as well and finally the third so when we run this we expect that we see a collection view with three items let's see if that is if we're on the same page all right so um yeah we can see that we have three different pages and the texts are actually populated pretty good but um it looks very weird so it means that we still have a lot of work well some work to do in our collection view so let's head back to the main.storyboard and the first thing we noticed is it scrolls vertically rather than horizontally so i'm going to click on the collection view and get this guy back up head over to the attributes and we're going to look for the scroll direction and change that to horizontal all right so now this is going to be a horizontal scroll the next thing i'm going to do is i'm going to remove the indicators so i don't want to have any kind of lines showing up when we're sliding then um i think now we can go ahead okay one more thing is to make it scroll in a paginated way so while you're scrolling it should just uh you know show different pages so now let's try and see the corrections that we've made and what it looks like so now it scrolls like this pretty good and you notice that it's now um scrolling like pages it's not a smooth scroll so um yeah that's good so now the next thing we need to actually work on is to give it a proper width and height so we're going to head over to before we head over to the store the view controller i'm gonna come over here make sure the collection view is selected and i'm gonna change the um estimated size to be none i don't want it to estimate any size i'm gonna pass in the exact size that i wanted to use so now we can head over to the view controller and i'm going to implement a another delegate another protocol and this is going to be called ui collection view delegates flow layout right and this allows us to implement a method that specifies size for um can we see size 4 item at index path right and right here what we're going to be returning is a cg size so cg size that expects a width and a height so the width is going to be the width of the collection view so i'm going to say collection view dot frame i miss the spelling collection view dot frame dot width and the height as well or the height is going to be the exact same thing collection view dot frame dot height so now let's try this and hopefully it should look a little bit better all right so now we have um our it's showing our image it's showing this but it isn't showing the um text as it should so we have instant worldwide delivery but it's not showing up in the previous pages so let's see why that is happening i'm going to head back to this place and let's make sure that the constraint is good okay so we have the constraints set up properly um um i'm thinking i'm thinking let's uh click on the collection view it's actually a strange one and i'm thinking maybe there's uh a padding somewhere so um i'm gonna change the cells the spacing line and cell spacings to zero and let's see if this actually makes any difference nope it still does not but at least now this looks well aligned so it's showing the text for the last one but it's not showing for the others why is that so let's try something else i'm thinking maybe let's try phil right let's try to feel this um i'm not sure why that is happening actually still doesn't work i'm also going to because i can see that the text is being set but for some reason it isn't let me add some constraints and see if that does anything for us can you imagine that well um i didn't expect that i needed to do this but i guess this is a learning learning curve for us and i can see that the icon looks a bit well maybe not a little bit blurry but um usually what i like to do is in my assets folder i like to move all of the icons to the middle right so it is um you know a little bit more balanced i guess so um hopefully this makes a difference i don't know maybe not but um yeah i like to do that so um so now that it actually works well i learned as well so um okay so i don't like this so i'm gonna change this um instead of using the fill let's actually feel proportionally and let's see if that makes a better difference all right so i guess this looks this looks pretty good now this looks pretty good all right so um now we have our um let's actually make this darker part of me guys i i like all those small things so i'm going to use medium sweet so what we're going to do next is um when you run the application um so when you run the app and you try to scroll we want the text sorry the indicator right here to change as well so what we're gonna do is i'm going to get back to the onboarding view controller and we're going to need to implement a particular delegate that allows us to know when scroll has occurred so right here we're going to have we're going to implement a method scroll did and decelerating so this is when it has finished scrolling so we're going to do here is we're going to calculate the width of the page so width is going to be equal to the scrollview.frame.width and then in order for us to know the current page which is going to be assigned to a variable or well we can make this a global variable so the initial because we're going to need this page um so current page is going to be equal to zero all right it's an integer so our current page here is going to be an int and we're going to say scroll view dots content offset not in offset.x so in the x axis and we're going to divide this by the width of our scroll view and this is going to give us the current page right so um the next thing we're going to need to do is to also update the page control so we're going to say pagecontrol.currentpage is going to be equal to of course our current page so uh let's try this now and see what we have so now we have the first one nice it scrolled it went nice so we already have that working pretty well so um i'm gonna deactivate this guy i don't want user to be able to click on this we could actually handle this so when you click on this it takes you to the exact page but i'm not just gonna do that here i prefer that you only scroll and uh or click on the next button so let's get back to the main.storyboard and click on the page control and what we're going to do is set the user interaction to to be disabled so now we're almost there actually so now when we scroll we want to know the current page and i want to know whether or not we need to set the text to be next or get started okay so back to the onboarding view controller and that's actually why i made this global what i want to do is right here i want to use the did set property to know when this value is changed so we could alternatively just have maybe a function right here that says update button text or something but you know there are many ways to implement it so feel free to use whatever method you you prefer but i'm just trying to you know touch every many things that we've learned in past tutorials just put them into use right so now in our did sets what we're going to do is we're going to check the currents page so if the currents page is equal to our slides dot count -1 so this simply means that we are on the last page what we want to do is say next button dot set title to be what get started for what control normal otherwise the value of the button should be what next so set title is going to be next the control is going to be normal so now you can of course go ahead and run this and everything should be good hopefully fingers crossed so um now we have our first page click or slide it's still next slide again now it is get started we go back oh pretty good so now when you click on the next button we need to actually perform the slide so what we're going to do is right here in our function we're going to get the index that we want to slide to so and this is actually one of the benefits of using the collection view so we're going to say let index or index path be equal to index path and we're going to use this option right here that has item and section so the item where we want to move to is the current page and the section is going to be zero of course now that we have our index path we're going to need to say collection view dot scroll to item at and then we're going to pass in our index path then the position we can set whatever we want because it's actually the full width of the screen so i'm just going to say center horizontally or left whatever you want and we want to animate this of course we love animations so uh we're going to test this out and see if it actually does what we expect so we click on next nothing happens nothing happens why is that well we need to update our page so we didn't update the page that i want to scroll to so what i need to do here is say current page should be equal to what plus equals one so we want to increment the value of the current page and let's try it now and see if it works so now we click on the next button and it actually scrolled next so this shouldn't happen on the get started parts we want to go to the next page so we're going to do is we're going to have an if statement here that checks the currents page so i want to check if the current page is equal to slides dot count minus one right meaning you are on the last page so if you are on the last page you want to go to the next page if you are not then we want to do this so you can actually just have this inside here as well and we're going to add a print statement here saying go to the next page great so let's run this now and see if it works well so we have next we have next and get started so if i click on this you can see that now we have go to the next page and it works well but i also noticed that whenever we click on the next button when you slide it actually affects this but when you click on the next button it does not affect the um page control so what we can do is we could decide to move this particular line of code right into what did i just copy oh yeah so we're going to move that into the current page so here here we have current page being updated so whenever you um change the value of the current page we want to also update the page control using the new value of the current page so i'm going to run that now and both the slide should update and the next button as well should also update the page control and that works pretty nice so um finally what we want to do is when you click on get started we want to open up a second page which is going to be the home page of our application now um if you remember we have actually talked about this in a past video i guess i'll leave a link to many of the videos that explain the concepts we're using in each of the videos i'm going to head over to the main.storyboard and i'm going to create a second page but this time around this is going to also be embedded in a navigation controller so of course hold down this and just get view controller like that i'm going to put that over here then we're going to embed this in a how do we even do that again so click on this make sure it's selected and yeah navigation controller like that so it's going to add this it's going to embed pardon me this is going to embed the view controller and a navigation controller so now let's go ahead and connect this and also we need to give this guy a an identifier right so i'm gonna click on this and right here i'm gonna call this i'll give this a storyboard id of home vc or home nc as home navigation controller all right so um yeah next we can go back to the view control and actually let's do the conventional way for now later on i'm going to show you the one i have planned all right so um controller is going to be equal to um storyboard.instantiate with view controller with identifier and this is going to be the home navigation controller so this is of type navigation controller so i'm going to type them cast that as a ui navigation controller so the next thing we're going to need to do is to present the controller so what i'm going to say is present and then unless my fingers are typing something else i'm doing i'm saying another thing so animation is true i don't need to know when it is completed so um let's actually run this and see if this works fine so next next and get started all right so it actually works very well but um the final thing i'm going to do here is to change the transition and make this guy full screen right so how do we do that right here we have access to the controller and we can simply modify the presentation style so model presentation style and this we're going to make full screen then um finally we're going to do the um transition style like that and we're going to make this to flip horizontal delay did i get that confirm that's the animation i want yep so you can also choose whatever animation you want you saw that page curl can do whatever you prefer so get started yeah so now this brings us to the end of this particular video in the next video we're gonna um create the structure or the um template of our home screen all right so we're gonna set the title we're gonna set the navigation styling gonna do the collection review and scrolls and all of those things in the next video alright see you guys then

Channel: Emmanuel Okwara

Views: 7,054

Rating: 4.9593906 out of 5

Keywords:

Id: VMiaNFabsZA

Length: 44min 18sec (2658 seconds)

Published: Sat Feb 06 2021