Swift Tutorials : How To add a Walkthrough/Welcome Screen Flow to your Swift Project (Part 1 of 3)

hi all my name is Simon Archer and welcome to another screencast this screencast I’m going to look at and show you how to create a walk through controller for your iPhone cert application so what I mean by walk through controller is that as you know with other pop-ups out there when you want application for the first time it will take you through a kind of like a explanation welcome screens and then you can sign analog in from these welcome screens and then use application so for instance this demonstration application I have yeah when the application launches what you can do is do a conditional check on this initial load to see what the users signed in or not signed in he’s not signed in we can then trigger the walk through and it takes the user to this walkthrough control basically a page control and then from any other user can then either sign up creating your accounts or you can log in with an existing account so this first video is going to show you just how to create the walkthrough controller and then the next couple of videos I’ll show you how to actually use the sign up and login features using the pause platform as your kind of database so let’s go start on the walkthrough okay cool so first things first we’re going to create a new Xcode project so you go and you find Xcode you go new projects single the applications perfect you can now name your project I’m going to call this the walkthrough demo you can even whatever you want you can leave these default daddy’s year as they are or add whatever you want to add into them but it’s not really important you use the Swift language so make sure a sweater selected and leave those two as is so go next I’m going to ask you to save save it into your default folder where you want to save it to you okay so now our projects created and what we’re going to do is actually add a custom walkthrough controller which somebody else has already created for us so the nice thing about what the application is that sometimes you’re looking to do something there’s a good chance that somebody’s already done project like before these made the files or the controller’s available for you to download and use so that’s what we did or are these that’s what someone’s done already for us so the one that we have over here this is a premade controller something else is made for us and you can find this control we can download it from the website so if you go to this website here at github I’m going to add the link to the video description so don’t worry about memorizing this right now you go to this github page and the BW walkthrough and you’ll see at the bottom over here you has a bit of a demonstration of exactly what you can do with these walkthrough controller and it’s pretty flexible you can do some nice animation type of fix you can get quite fancy with it we’re not going to go into the fanciness really of it’s in this demonstration but just pretty much implementing the basic walk through and you can experiment as you want to from there so from this page over here you’re going to download as a file the right-hand side all right so there’s a file in downloads to computer you’re then going to go to your download folder ends up the file it’s going to add a new folder and within the folder it’ll be a couple of files and other folders we’re not going to be too interested into these two folders here they’re just there for the walkthrough project is created for you where you can play around and see exactly what you can do with it Rimal is interested in this folder here and these two files here so these two files the walkthrough page view controller and they’ll walk through view controllers for file select those and add it to your projects just drag it into your project so I asked you about a cup of the items needed you want to do that so click finish then we have the two files in our project over here so now what we’re going to do is actually add the pages into our storyboard so select a storyboard and here we’re going to add some view controllers into the storyboard zoom out of it okay can’t actually add UConn you can get call so add a few view controllers I’m going to add four view controllers one to be the main page of my walkthrough and three others to be the different pages and I’ll show you what I mean by

that let’s just add one more okay alright so now we have essentially five you controllers this will be our main view controller which application launches on two then we have which will be a main walkthrough page and then these three of you here will be our page 1 page 2 page 3 so let’s start adding some controls into these just so we can better see what we’re talking about so on the main first view controller let’s add a button called show walkthrough walkthrough right get it cool we’re just going to Center that over there and then you can add the constraints by right-clicking on to the View and center vertically and horizontally I’m not going to explain too much about how constraints work in this video and assume that you know s’more it is what they do but I’m due to constraints myself and you can follow it follow along so we centered this show walkthrough button on to the main view controller then our next view controller we want to select it and we want to sign this the custom class of BW walkthrough not the page view controller which is the normal walk through view controller and we’re going to add a button on here the three buttons okay this one in the middle we can say close this one left we can say sign up and this one on the rights we can say login then we’re going to add label just in the top yeah and this is me going to just say main just so we know that this will be our main page you can then add your constraints as you see fit the last one is the main label we’re going to top space and sent our result Lee alright so that’s a main page done our next viewcontroller we’re going to give this the customer class of page view controller BW well through page view controller okay and we can add a label here on the sensor and we can just say that this is page 1 so I like to have things kind of aligned nicely then on this view controller here we’re going to again give it the same page view controller class and give it a label page 2 and then the third one here same thing going to give the label page 3 and then give it same customer class of BW walkthrough page view controller cool another thing we need to do is we need to kind of give these things these four new controllers I to use so when we actually load the wall 3 view controller we load the IDS of each view controller so what I mean by that is you select the first one give it a storyboard ID of walk 0 so this will be our main walkthrough page page 0 our page 1 we can call it walk 1 a page 2 we can give it the ID or 2 and our page 3 you can give it the ID walk 3 now I’ve noticed that sometimes some areas will occur where it can’t load the view controller properly for some reason but I found that if you actually explicitly give it the module it kind of helps it’s helped a couple errors I’ve had before so you can go and through each page view controller just make sure that you give it the module of the projects it just sent just seems to help for some reason so I made one here I’m going to type walk through demo the name of our project basically so now what I want to do as

well is that I want to give each of these pages there are in background so I went and I googled some iframe backgrounds and you can do the same so I found these three backgrounds here and what I’m going to do is I want to add a UI image or an image for you to each of these pages yeah I’m going to fill the image to be the full size of the screen do it for each page so you can do the same if you want it just illustrates the pages quite nicely okay now once you’ve planned three background images you can then add them to your project just by dragging them into its copy items of need B and then what I like to do is then just to add these three into its new group gourd images just purely for housekeeping all right so I’ve added the three background images into my projects we’ll go back to the storyboard and then for each of these image views I’m going to assign them my background so you’ll see that because we gave the image view the full kind of like screen of the of the controller it’s very stretched out and for this demonstration I kind of wanted to be the right aspect ratio because there are iPhone screen sizes already so we’ll the marriage he had a Class A aspect that’s okay so for each one of these I’m going to assign the image background to and then as Bigfoot’s and then this one here background three aspect that’s okay you’ll see also that our labels are now behind the image so on this pretty much view controller documents outline you’ll see here that’s for this view controller our label is behind the picture so we can actually bring it in front of it and the label appears there do the same for each of these if you find that your label is behind the image it brings it label to the foreground okay so now we need to add constraints to our screen here and you’ll see why we need to do that so if you go to the assistant editor over here and we choose to look at the preview this is quite handy when you’re doing constraints and doing design so you can actually see what the page would look like or the view control look like on an iPhone screen for instance over here on an iPhone for our page 3 even though it’s centered on our on our designer here on a storyboard it’s off center on our iPhone 4 screen so we need to add the constraints so let’s start with page 1 so let’s go back to the first page here and let’s take the background image view and then add the constraints to be eating trailing top and bottom you’ll see that in the preview set this up quite nicely take the label and then add the constraints to be centered vertically in Centaurus only you’ll see that it’s now in the center so we’re going to do that to each of these pages so I’m just going to do it quickly a leading training top and garden with a second background image and then Center vertically horizontally for the label and then on the third screen you’re going to do the same eating trading top bought them for the background image and then center vertically horizontally for the label so constraints can be quite tricky sometimes it takes a while to kind of get the hang of it and to master it so just play around but for now if you follow what I’m doing you should get the same same results so our previous look good let’s start with our first view controller you’ll see now that’s our battle Center go to our then mean walkthrough page our buttons are aligned correctly page one looks good

page two looks good and page three looks good cool so now that we’ve designed our storyboard we want to now hook up the functionality to present the storyboard when we tap on the show walkthrough battery over here so by doing that we can then go to again asss and edit we can get our get our main view controller file so if you controller dot Swift in my case and then over here we want to add a new outlet for the show walkthrough button which shows action and we’re going to say show walkthrough button pressed and we can no arguments ready and we can just say connect cool whenever I add a new outlets on you actually always like to kind of add a print line and just copy the function name just so when we touch the button we can see in the console that I was pressed so now we need to add code over here to actually presents walkthrough control so this is the code you need to add about typed it out already so you just kind of come up here and paste sets or these copy it’s by looking at what I’ve done so let me just but then you control that on the main screen here so this is the code I’m adding so you’ll see here that we’re creating a new variable called STB and this will be the storyboard and the storyboard will be of the main storyboard so if you look on the left hand side here our storyboard is called me so here’s recording it’s the name will be the mean and we’re giving it the Pascal to the variable STB we then creating a new walkthrough variable which will be a view controller so we saying that let walk through be of the storyboard the view controller would identify a walk zero so remember we add an ID to each of you controllers walk 0 1 2 3 this is why it’s important so we’re creating a walkthrough variable with the idea of walk zero as the BW walkthrough view controller so this is the class we gave of that main new controller at the very beginning all right now I’ve created three other variables called page 1 page 2 page 3 these will also be view controllers of the ID walk 1 walk 2 or 3 these will just be normal view controllers that’s fine so once we’ve created these variables we’re going to call upon the delegates of the BW walk through view controller so it’s self and then we’re going to add the three view controllers to the main view controller so you’ll see walkthrough advocate with a page 1 page 2 page 3 then the end we’re going to present the view controller of walkthrough going to animate sets and then that’s that’ll be it you’ll see it’s giving us the error that the view controller does not conform to protocol BW walkthrough view controller delegate that’s because we haven’t added the BW walkthrough that I get to the view controller file so to fix that the top here I’m just going to then type BW walkthrough view controller delegates right over here and then that error should go away cool so now if we now run the application and on simulator there should be no errors will succeed and our app launches and we get to the main view controller page should just have the show walkthrough button there you go all right so now application is launched we have our show walkthrough button so once we click the show book through button it’s going to call upon this method over here and you’ll see the print line show walking button press in the console and these actually will happen and we’ll see our walk through controller so click on it and that’s it so I’m just going to show you what’s happened and what everything is and kind of like just the flow of it right now so we look back the main storyboard you’ll see that we went from this page over here to this main page you can see the main label he appears over here as well but we also see page 1 which doesn’t appear on this main page

and page 1 is a screen here so our main page is pretty much like the background of our three pages ax or however many pages you have to sue now if I scroll here I see page 2 and page 3 and you also know is that the sign up close and login buttons at the bottom of the main page persist on each of these pages which is quite cool ok so now we’ve got to walk through controller working we can page through the different pages next video I’m going to show you how to hook up these three buttons here to close the walk-through sign after user login a user and then take it from there so thanks for watching and I’ll see you in the next video