iOS 11 & Swift 4 - Making an onboarding for your iOS app | Arash Ahadzadeh | Skillshare

iOS 11 & Swift 4 - Making an onboarding for your iOS app

Arash Ahadzadeh, iOS Developer & UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 5m)
    • 1. Intro & Promo

      1:24
    • 2. Tools and Materials for iOS 11 App Development

      2:33
    • 3. Download and Install Xcode 9

      2:03
    • 4. How to create an Xcode project properly

      2:52
    • 5. Development Environment

      5:24
    • 6. The Skeleton of an iOS App

      2:54
    • 7. What is an onboarding?

      1:49
    • 8. Let's build the user interface

      5:53
    • 9. Designing the Page Content View Controller

      2:44
    • 10. Creating Walkthrough Content View Controller's Class

      3:30
    • 11. Creating Walkthrough Page View Controller's Class

      7:11
    • 12. Implementing Walkthrough View Controller's Class

      5:23
    • 13. Implementing Buttons' Code

      7:05
    • 14. Adding a protocol to walkthroughPageViewController's Class

      5:37
    • 15. Working with UserDefaults class

      2:02
    • 16. Creating a gradient class

      6:21

About This Class

729bf6f8

Welcome to this course. In this course, you will learn how to create an amazing and modern onboarding for your iOS app. Nowadays, onboarding is one of the most important parts of iOS development in order to engage users. So in this tutorial, I will guide you step by step, and I will explain all the information to you in detail. I just tried to keep the efficiency of this course as highest as possible. 

What Will I Learn?

  • You will learn how to setup and work with Xcode 9
  • You will learn how to work with classes
  • You will learn so many useful features of Xcode 9
  • You will be able to make a modern and beautiful onboarding for your app
  • You will learn how to work with protocols
  • You will get so many useful shortcuts for Xcode 9 and Swift 4

Requirements:

  • No programming experience needed. I will teach you everything you need to know step by step.
  • An iMac or Mac laptop - (or a PC running macOS)
  • No paid software required - We will use Xcode which is completely free
  • I will teach you how to setup Xcode step by step.

Who is the target audience?

  • If you are a beginner, you need to take this course
  • If you are a junior iOS developer, you need to take this course
  • If you want to gain your knowledge about iOS development, you need to take this course
  • If you want to improve your development skill, you need to take this course
  • If you are looking for a complete course to guide you develop an onboarding for an iOS app, you need to take this course

Transcripts

1. Intro & Promo: Hello. I'm a rash, and in thes course, I'm going to teach you how to create an on boarding for your IRS app. As you can see, we are going to make this beautiful and modern on boarding for our use. APs. As a developer, you need to know that's mobile users. I need an immediate sense of value win, taking their first glance at a new app. So it is essential to know how to do that with using a professional on boarding in your APP , you can engage your users experience. And if you want to make a user friendly app, I really suggest using an on boarding in your app, and this will allow users to never remove your app. Nowadays, most off the popular APS are using and aborting in their APS, such as instagram Facebook, You to you, etcetera. At the end of these course, you learn how to create an advance on boarding for an arduous app, so please do not miss your chance. I would like to mention that I will add new contents to discourse each month without additional charge. Last but not least, I always help you with your problems as quickly as possible, so I hope you could enjoy the scores 2. Tools and Materials for iOS 11 App Development: Hello. In this lecture, I am going to be covering some off the tools that you will need in all U. S. Application development. First of all, you need a Mac of some sort. It is not necessary to have the latest or greatest, but he has to be able to run course 10. It's called Mac us. And the reason that we need macros is that we should install a software called X Coat that will allow us to develop all US applications. So it means that you cannot count on your own iPad or even iPad pro for development. However, you can use an I Mac or a Mac book or even a Mac mini. If you already do not have a Mac and you'd don't want to buy one, you can use a website called mackin cloud dot com. These websites will allow you to have a mutual macros, and you can use it for developments. But it's not a great way because if you use it, unfortunately, you cannot strung your app on a physical life on your own. Although you're able to run, it's on a simulator. It is highly recommended to have a Mac The software that you will be using is exclude, which is written by Apple and allows you to design your AB and right coat. And also you can run your app on the simulator. I would like to mention that it is completely free, and in the next lecture, I will show you how to down with it and how to get it set up. In order to download X good, I would recommend updating your Mac operating system to Mac OS High Sierra, which is the latest version of Mac OS. Let me show you how easy you can check the version of your Mac toys that you have. If you just head over to the apple symbol and you go to about this Mac, you can easily find the version of your MCA lists that you're running. If you have an iPhone or an iPad, you can easily run your app on your own device. And of course, you can show it to your friends or your family, etcetera. As I mentioned before, you can run your app on a simulator inside X good, and it is not necessary to get an iPhone immediately, so I hope you find this lecture useful. And in the next lecture I will show you how to install and set up X good. 3. Download and Install Xcode 9: alright in this video, I want to show you how to dance world and set up. Exclude nine, which is developed by Apple for writing our code and building our iris APS. It's free to download, and you don't need to worry about paying. For first and foremost, you need to check whether your Mac OS is updated or not. To do that, you can quickly head over to the apple symbol and click on about this Mac. Second of all, you need to make sure that you have enough space on your heart dry. Although excluded approximately 4.5 gigabytes, you need about 10 gigabytes for download and installation. To do that, you can quickly head over to the apple logo and click on about this Mac and then go to storage. Last but not least, do not try to download a better version of X coat. It's not stat easy to download the better version accidentally, so as long as you follow what I'm doing in this video, I can assure you that you can be downloading the officially released version of X coat. And the reason for not using betas is that Betters version is for testing, and it may cause a lot of problems. Okay, let's go ahead and download X. Goodnight for downloading. Exclude. Nine. We need to go to the apple, sir. So we can easily go to the apple, sir, and head over to the search button and just surge ex coat. And then, as you can see here, you can find x coat. However, because I already insult explode on my computer. There is no button for installation. Ah, but of course, in your computer, you can see if you have not downloaded before it takes a few minutes, and after that, you can use X code for writing your APS. 4. How to create an Xcode project properly: All right. So now that you downloaded and installed expert on your computer, I'm going to show you how to work with ex good from a to Z. Okay, let's go ahead and open up the X coat. The first thing you see is the welcome page in here. You can decide whether to create a new extract project or open projects which already has created. So let's go ahead and create a new exhibit project. And in these page you're free to choose a template for your new project. And as you can see, right now, we're looking at the all US There are many types such as Watch us TV, us, Makris butts in the scores. We're going to focus on making all us APs. And as you can see, there are many templates such a single view app, game augmented reality document based app. But most off the time we use single view app, and I would like to mention that most off the professional developers prefer to use single via because it is more ah, customizable and you're free to use any feature in the future. And let's go ahead and click on next. Here. You need to provide some information about your project. The first wing is product name, which is your project name. Let's write alot Award has our first application and the second field is thine and ah, we're gonna leave it empty for now and later on I will come back and I will teach you how to choose and accounts in order to run your app on a physical device you all in the next world is organization name. If you have a company, you need to write your company's name. And if you don't, you can simply write your name and the next field is organization. Identify here. If you have a website, you can write the reverse domain name and if you don't, you can just write com. That's hello words. And the next thing is language, and please choose Swift and there are three boxes here and we're going to keep its unchecked okay and click on next. And here you're asked to decide where you want to save your project, and I simply decided to choose desktop and then create. And here we go. We successfully created our project, and in the next video, I will show you how to use this software 5. Development Environment: So this is the page you will see whenever you create a new project. And now I'm gonna show you how to work with each part of extra. So at the top, you can see the status bar and over there you can see the play button and the stop button for running our app on a simulator. And here you can specify where you want your app to run. Whenever you heat the wrong button, you will see that you've got a simulator. You can simply resize it if it is too big or too small for your screen. Okay, Now we can hit the stop button to stop our project. The next thing I want to explain to you is there app status. As you can see here, you can find ah, the latest status of your project. For example, if you run button, we can see that's its return. Lunching and running Hello. Word on iPhone X. As you can see here. And if you also hit the stop button, you can see finished running Hello Word on iPhone X and also over there. You can see your errors and warnings during your coding and I want to show you an example of getting error here. Okay. For example, if we write something here, you can see that we've got an error here, here and here. As you can see, there are three buttons here, and the left one is selected by default because it shows Theus Sander editor. And that means in the middle of X code, you can only see a single screen. Now, if you click on these two circles, this brings up the assistant editor, and it allows you to split the middle screen into two screens. And it's really useful for incense when you're designing your app and you want to connect some objects to your court, you can use the assistant editor and it makes life easier for us. And the third button is very Asian editor, and it allows you to see the previous version of your code in order to make some changes or revert back to your previous version. There are three more buttons on the right hand side, and these are for popping out your main paint. The 1st 1 as you can see, shows us the navigator pane, and here it is selected as Project Navigator that you can find all of your files and all of your codes were there. And we've worked with Peace section a lot. And also, there is a search tap here that you can easily search anything in your project and you can find its quickly. And the next thing I want to show you is air pain, which is here, and it shows you any errors and warnings that you will get during your coding and during a running your project. And the last thing I want to mention is the brake point which is here, and let me show you how you can use a break point feature in your project. Suppose that you're writing your coat and you want to run your app. He'll line 16. If you double freak on this number, you will create a break point in your project. Okay, so if you run your app, the computer and the simulator will just run. You're Kotil dis number. And if you want to get rid of this, you can easily drag and drop and you will get rid of these break. And if you click on the middle button, you can show or even hide the debug area and you can work with this section whenever you want to find the problems of your app. And if you click on the last button, you can hide or even show the utilities section. So let me show you how you can use thes section. Just click on Main that's story bored, and in these section we're going to build a very simple app together for using utilities section. So please search Les Bill and Dragon Drop label into your canvas right now. We want to change it takes of our labor. You can either double click on death and just write hello words and then press enter. Or you can easily go to the attributes inspector and click here and write whatever you want . And after that, I'm going to change the color of our text and also change the size of our text. Okay, and let me change. The bag roamed. Yeah, that's fine. So it's the time to run a rap. Okay? As you can see, we successfully created our first cab and in the next video I will show you the structure of an arduous app. 6. The Skeleton of an iOS App: all right in this video, I'm going to explain to you how annoy us up works because, in my opinion, it is essential to know the fundamentals off all use APS before making an app. The first main component you need to know is view, which is what you see on the screen, such as bottoms, labels, photos takes, etcetera. The second element is the view controller, and this is related to what happens behind the scenes or in the background. This is the main code that controls what you care when a user clicks on a button or what should happen when you want to show some information on the screen. And finally, the last component is the model, and it controls and prepares the data to become usable in the view controller. For instance, if we take a simple app such as a man AP when they open up our app, the first thing that would happen is that's the view. Controller will ask the model for the data off all your emails, like email addresses, photos, days etcetera and the model gets that data and passes it back to the view controller. Then the view controller can decide how it should demonstrate on the view. And then the APP will display all of the information that was gotten in a nice format. And, of course, the sports the artery as well. Suppose the user taps about in to delete an email. In this case, the view will tell the view controller that the delete button was tapped. The View controller will ask the model to remove the email from its database so these three main parts will gather together to make a nap. And this is known as the model view controller designed catcher. And I can tell you that this is a very common design patter. Now I would like to mention several advantages of using the model view controller. First of all, it makes our app easier to manage. Imagine that you have a test up and you want to change all of your questions so you can simply do this with using new data, and you don't need to change the view controller or model second of all. With using this method, you can simply separate all the different components into individual packages off coat. In this case, if there is an error or bug in your project, you can easily find and fix it. All right. I hope you enjoyed this video, and I would like to mention that I already prepared the Swift and X could help shit for you . And if you would like to download it, you can find it at the end of this section. 7. What is an onboarding?: Hello, everybody. Welcome back to another section of this tutorial in these section. We're going to creates great and amazing and boarding for our app. All right, let me explain to you waterboarding ease. Let's google it on boarding in an app. Here we go on Boarding is a human resources term that was borrowed by UX designers and is defined as a way of making someone familiar with the nap, which is completely right. So in a simple word on boarding is a way that you can explain to your users how they can use your app. It is up to you whether you want to use on boarding on your app or not. But in my opinion nowadays, because there are many complex APS naps store, I think it's better to have a simple and nice on boarding for your app. So let me show you some examples. If you go to dribble that comp and look for on boarding, you will find many greats and amazing examples of on boarding. So let's click on this one. As you can see, it's so simple. However, it's so useful and beautiful or, for example, this one as you can see, there is a photo of the title and subheading Skip button and next button. And at the end, we have don't. Right. So at the end of this section, you learn how to create thes amazing on boarding for your app with these great pictures and you can swipe it as you can see. And at the end, we have got to start it. And also you can use these next button, which is absolutely awesome. All right. Thank you so much for watching this video. I will see in the next video and we will talk about on boarding. 8. Let's build the user interface: alright in this video, we're going to design our own boarding you. I view there are several ways to do that. But the best way to implement wife true pages in your project is to use you. I page we controller. All right. In order to start, are you I designing? First of all, we need to create another story board. As a matter of fact, exclude doesn't limit you to use only one story. Or you can use a lot of storyboards in your project in order to manage your project. Is it so? First of all, let's go to Project Navigator and right Click Click a new file. And here in user interface section, we need to choose storyboard and click on next. There we go. Let's call. It's on boarding. Click create. All right. Now we need to add a u I page you controller to our storyboard. So in the object library A Let's look for you. I page you controller. There we go. And dragon drop over there. As you can see over there, there are two type of transition style page Caroline Scroll. The 1st 1 is suitable for something like books, but we prefer scrolling in our project. So let's set it to scroll. And also let's set storyboard I d for our page, your controller. So let's right. Walk through controller impressed. Enter. All right now let's drag and drop a view controller they're ago. And now, in order to hold the page we controller, that's drag and drop a container of you to the view controller. So let's write container and let's change its size to 375 by 450. Great. This container view is a place in order to put are objects that represents the contents off a child, your controller and it automatically associated with another view controller. So if we resize it, this automatically resize, which is not good. So let's select a view controller and elated and let me change the place off our page. You controller over there and now we need to embed Are you? I've you to our page view controller. So let's hold control and Dragon drop over there and selecting bed. Great! And now it's time to add constraints to our container re. So let's select that and click at New Constraint and let's set it 00 and zero and at three constraints. And now let's add a view to our view controller over there. And let's change the Y axis to 450 change their with 2 375 and high to 217. Great. And let's add constraints to our view ad for constraints. And now let's hold control and Dragon drop it too safe area and select equal heights. Oh, this is not what we want, so we need to change something. So let's elect this container and go to the size inspector and change its multiplayer. Please add one Colin and and write three and press enter. And now it takes of 1/3 of the safe area, which is what we want. All right. The next step is adding bottom to our MT view and also adding an indicator to our wheel. So let's drag and drop a U I button from the object library toe are empty view. There we go. And let's change its with 2 190 and it's high to 50. Yeah, that's fine. And let's put it in the center great, and it's double click on that and change the text to next press enter, and also we can change its background color to something else. For example, this one and the text color toe white. And let's drag another button and put it under the next bottom and change its tax to skip. And I want to change its color and set it to something like Grey Iron. I think it's great. And let's look for the page control object in the object library. There we go and Dragon drop over there. And let's change its current color, too. This one great. Later on, we will change these colors with Grady ins with using a separate class for our grade Ian's . But for now, let's go on and keep feeling our interface. Now it's time to add constrain. So let's select our next button and click at constrains. And let's check these to shake boxes within height in order to keep it the same at two constraints. And now we need to add the's three objects to a stack, so let's select them, withholding shift and click on embedding stack, and let's change the spacing to 22 and lastly, let's align them and here is entering container and vertically in container at two constraints. Great. All right, that's it for this video. In the next video, we will design our page. Contents were controller. Thank you so much for watching this video. I will see in the next video. 9. Designing the Page Content View Controller: All right, Welcome back to the city, Auriol and India's video. We're going to design the page, content to your controller and something else. So first of all, let's drag and drop a view controller from the Object library to the storyboards. Here we go, and let's change its size, honored to have more space to war. So let's go to show the size inspector and change fixed to freedom and change its high to 451. Great. So now let's drag an image view to the view controller. You are image you. There we go and that change its size to 327 and it's high to 229. And let's add a label order and let's name it's Header and I want to change its style to something else. So let's change it too bold, and also I want to change its color to iron that select some darker colors such as this one , and now it's time to align it to the center. Add one constrained and also let's drag and drop another label and call it subheading, and it's aligned to the center as well. I think if we change its size to 16 it would be better. OK, so now let's select both off them and embed them into a stack. And let's change the alignment to the center and spacing 10. And now we need to create another stack. So let's like this stack view and our your image you and click on embed and Stack. And we need to change the spacing to 50. And also you need to set the alignment to the center. And now it's time to add new constraints. So please click on this at New Constraints bottom and set the value of top 50 the left 24 to write 24 as well and the bottom 10 and add for constraints. All right. And now we need to select. Are you imagery you and at new constraints and check thes aspect ratio and at one constraint. And lastly, we need to select this bottom constraint and change its relation to greater than or equal perfect. Everything works fine. All right. Thank you so much for watching this video in the next video. We will create our work to a content your controller class. So see you in the next video 10. Creating Walkthrough Content View Controller's Class: All right, welcome back to another video of this tutorial. As you realized, we have completed our you I design successfully, and now it's time to create our classes in order to pair than with our were controllers. So let's go ahead and right click on the Project Navigator and click a new file. And now we need to choose Coca Touch Class and let's write work through content of your controller and subclass off you. I view controller and click on Next. Create Great! All right. First of all, we need to connect our object charcoal. So let's open the story worlds, All right. First of all, let's pair our class with our view controller. So click on this yellow circle and go to the Identity Inspector and set the class. Walk through content, you controller, and click on the assistant editor. All right, And now let's select our header and dragon drop over there. First of all, we need to create an outlet for that. Okay? And let's name it heading label Anchalee can connect great, and also let's connect our subheading, sup, heading labour connect and also our your image. You content image of you and connect great. And now we need to open, too. Kerry brackets great. And let's write Dietz set heading label. That number of lines is equal to zero. It means that it can show the user as many as long you want and let's copy it and paste it for our subheading label. Great, but we need to change it to subheading and let's initialize some variables you are. Index is equal to zero. VAR heading is equal to empty string. You are subheading is equal to empty a string as well, and the last one war image file is equal to an empty string as well. We will use thes variables later on. All right, we created this class to support multiple wife through screens, and this index variable is used to store the current page index. So, for example, the first page is equal to zero, and the second pages they called one etcetera, etcetera. And now let's go toe overwrite, fine commuted load and at thes code heading label, the text is equal to heading subheading label. The text is equal to stop heading and content image you. That image is equal to you. I image name column image file 11. Creating Walkthrough Page View Controller's Class: all right. Now it's time to create another file and creates our white true page we controller class. So let's right. Click and click on new file Cocoa Touch Class and let's write white through Page we controller. All right, let's move it over there and let's open our wife. True page we controller class. And now we need to adopt the you I page you controller data source protocol to do that, just go over there and separated with the comma and writes you I paige you controller data source. And if we click undies, error and click on fix. As you can see, we've got two functions that we need to feel them. So let's right you are Index is equal to parent. Is is well controller as an exclamation mark Wyke through content of your controller, that index and index minus one and return content view Controller at index. We didn't create thes content feel controller yet, but we will do that, so don't worry about it. And the next function we need to copy and paste it and changes minus sign two plus. And also let's got Pam paste this return. Okay, let me explain to you what's happening here because probably it's confusing and you don't know what's happening here. But don't worry about it. It's obvious that this process is a little bit complicated, but we will cover everything so in these method would get the current page index off the given view controller and, for example, in this method we increase the index number and return to view controller to display and in these method would decrease it. And as I mentioned before, we haven't created the contents view controller at Method, and it takes in the end experimenter and creates the corresponding page content controller . Now let's at some variables. So war page headings is equal to brackets and here we need to write our techs. So let me copy and pace it, all right. I just copied them. And now I'm going to explain it to you. So the 1st 1 is the text of our first image or our first page, and the 2nd 1 is related to the second image, and the last one is related to the last image. But this one the 1st 1 is related to the index zero. This one is related to the index one, and the last one is related to the index to right. And here we have war page images, which is equal to on boarding one on boarding, too. And I'm burning three. And these are the names of our images. If you go to assets, you can find them. And if you didn't import them into your project yet, please do it right now. And the last variable is page subheadings, which is our main text for everything is clear now. So now let's create thes content view controller function. All right, let's right. Fine content view Controller at index means, which is integer, and it returns to work through contents. We controller All right, That's right. Ive index is less than zero, or index is greater than or equal to page headings that count. Then return Neil. Right? And here we need to create a new you controller and pass suitable later. So let's right, let's storyboard is equal to you. I storyboard Parent Is is name. Let's call it, um, boarding and Bondo that set it to new. And now we need right. If let page content view controller is equal to storyboard dots instead. Initiate your controller with Identify air and Let's Right walk through continent view controller as walk through content view controller. And here we need to do something. Let's write page contents View controller. That's image file is equal to page images index right and again page content of you Controller Dots heading is equal to page headings. Index on again page content of you controller That's up. Heading is equal to page subheadings Index and page contents View controller. That index is equal to index right, and let's return a content. You controller return Neil and that's it. We created this method in order to accept a page in the experimenter. For example, let's say ah, when evaluate off zeros past This method would create a first wife through screen, and now we need to update the view. Did load method? That's right. Data source is equal to self. And if let's starting view controller is equal to content view Controller at zero. Then set view controllers brackets starting you controller and direction dot forward and animated. Let's right. True and completion. That's writes Neil. All right, indeed, scope. We just set the data source of you. I page you controller to itself. And also we created the first content view controller when the page you controller is first loaded. And now let's open the storyboard and select page your controller and sit. It's class to work through page you controller. And also let's change its storyboard i d to wife through page your controller. All right. Thank you so much for watching this video. And in the next video, we will talk about implementing the wife through your controller. 12. Implementing Walkthrough View Controller's Class: all right now we should create a class for the walk through your controller. So let's go ahead and right Click in the Project Navigator a new file and please choose Cocoa Touch Class and click on Next. And that's right, Walk through view controller and set the subclass to you. I view controller great and create awesome. So let's go toe on boarding and select this view controller and set its class to walk through your controller. Great. And now we need to create some outlets into our code. So let's click on the assistant editor. All right, so let's drag and drop our page controller over there. And that's right Page control and connect Great and also our next button dragon drop. And that's right. Next Barton Connect and also our skip button dragon. Drop on. Let's right, skip button connect. Great. And as you can see, our next button is a simple rectangle, which is not beautiful. It's so simple, so let's make it round it. To do that, we need to open a care Lee brackets over there and a gang used deep set, and it's right next bottom. That layer Dutch corner radius is equal to 25. Why 25? If you click on that button and go and check it size, you can recognize that we set its height to 50. So if you want to get around that button, we need to divide these amount by two, which is equal to 25 right? And also we need to write Next button, that's layer that's masks to bounds, which is equal to true. And we wrote thes line of court in order to show our butts and rounded. All right, So let's Glicken worked through your controller and set story word I d for it as well. That's right. Walk through real controller and press enter. So now we want to show our wife through screens when a user first launches the app. So to do that, first of all, we need to go to Maine. That's story bored and check if we have a class for our main you controller or nuts. So let's check it out. Unfortunately, we don't have any class for this. So, first of all, let's create a class for these and right click here. New file. Cocoa Taj class. Next, let's right. Main view controller and the subclass. All of you have your controller press. Next, create and let's pair them together. So click on this view controller and set its Class two main view controller. Great. So now if the click on the assets and editor all right now we need to override find Chin View did appear. So let's right override Fine of You did appear. And that's right. Let's story. Ward is equal to you. I storyboard name and its name is on boarding and let's set its bond alert to kneel. And also let's right if Let Walk through view Controller is equal to story ward that instead initiate were controller with identify here, and it's identify your ease. Walk through view controller, as I walk through were controller. And here we need to write present you controller to present. And here we need to write work through Wii controller, Animated Truth and its completion Neil and that seats. All right now we're about to running our app, but before doing that, that's shake our finds target membership. So if you click on our files for example, on boarding that storyboard and goto identity and type, you can recognize that there is a section, which is called target membership. And please make sure that it's check boxes checked to your applications name and also other fines as well. As you can see. It's correct, all right. Everything is fine and let's run our app. There we go. So, as you can see, when we run our ab, the wife through screens immediately hops up. So let's check it and see how it works. As you can see, you can swipe it. But there is an issue. As you can see, these indicator doesn't change. And also, if we click on our buttons, you can recognize that nothing is happening because we didn't implement any code yet. All right, thank you so much for watching this video in the next video. We will try to fix our problems. 13. Implementing Buttons' Code: All right, So now let's write a function off the skip button and also our next button. So let's select our wife through your controller and then click on the assistant editor. Great. And now let's make a I B action connection or are skip button over there. So let's change connection to action. And let's call it skip Bottom tapped Connect. And here, let's write this. Miss Animated is true, and also completion is Neil. So that's it for our skip it. And it means that when the user taps the skip button, it will dismiss the page right. But the function for the next button is not so simple because we need to provide some code that when the user taps that specific button, I mean the next button it will show the user the next page view controller. So now we want to do it programmatically. So let's open up the walk through page view controller class and let's add a function. Let's write, find forward page right on. Let's write current index plus one, and that's right. If let next view controller is equal to content view controller at current index and let's right set view controllers, brackets, Next view controller and the direction Let's write dot forward an animated That's right, true and completion. Neil. Right? But let me initialize. Currents index. Over there you are. Current index is equal to zero. Great. So when dysfunction or let's say this method is called, it automatically creates the next content view controller, which is what we want. Now let's go back to work through view controller over there, and that's add a very well war walk through page view controller with the type of like through page you controller in a question mark, which means it's optional. And these generally sores the reference to the wife to repay your controller objects. And later on we will usually to find out the current index off the Watcher screen. All right, and now let's override another function override find, prepare for sake, they and its sender. So for sec jus, storyboard, segway and sender, any and here when it right let destination is equal to segway dot destination. And also, if let Page View controller is equal to destination as a question mark. Why, through Page we controller, then work through Patriot Controller is equal to pay view controller, and that's it. So now let's open up the on boarding that storyboard and again selective like to review controller, the assistant editor, All right. And now we need to create another connection. I mean the I B Action Connection, where our next happed button. So with dragon drop action, that's right. Next, Botton tapped and connect great. So here. Let's right if let Index is equal to walk through page View controller Question. Mark that current index, then switch Index case zero dot dot 0.0.1 column like through page you controller question mark dot forward page case to a Kahlan dismiss Animate a true completion Neil. And also we need to write default column break because we're using a switch and at the end , that's right, a function which is not existed. But we will create that. So let's write update you I and these got. It's so clear it means that for the fares two pages we call Life through Page we controller that forward page thesis method which were already wrote and for the last day with the index to with this Mr Page. And now let's write this function. So let's write firing Update you. I, if let index is equal to like through page view controller Question mark that Korans index . Then switch index case zero till one. A Kahlan next button. That said Title. Because we want to change its title to next, and that's right, that's normal. And then skip button dots is hidden with the syntax, which is a Boolean. We can tell the application that hide that specific bottom, which is equal to falls because we are in case zero and want, which is our first page and second page. Right and case, too. Next bottom. That said, Title should be gets started for dot normal skip button that is hidden. It should be equal to true because it's our last page and at the end default break. All right. With this method, we can change the title of our next button in the first and second page and also in the last page. We set it to get started, and also we could make our skip out on Hidden in the last page, which is awesome. And that's right. Page control that current page easy hold to index. Now let's run the app and see a result all right. Let's check it out. Okay. The indicator is not working yet because we didn't do anything about that. But let's shake the next button. Great. Very well. As you can see, everything. Work sign. And in the next video, we will try to find our bikes and fix it together and continue our project. So see you in the next video. 14. Adding a protocol to walkthroughPageViewController's Class: all right. As you realize when we swipe the rapturous screen the page your controller didn't notify the voice through you controller to update the page indicator so the Patriot controller should find a new way in order to communicate with wife through view controller. So now we need to implement a protocol into White through Page you controller to achieve that specific goal. So let's open up the walk through Patriot controller. All right, so now let's add a protocol to our walk through page you controller, right? We know import. You like it. So let's write protocol like through age View controller Deli get and let's write class Open a Care Lee bracket and let's write for ink. DEET update Page Index Parent is is current index with the type of int right? And after that, let's add something to our class. So let's write you, I page view controller, tell yet announced its at another variable over there. So let's write a week. You are walk through delegates and it's type is walk through page. You controller delegates with a question mark, which means it's optional, and after that, let's implements a new function. So let's write funk page view controller. Parentis is and we have some inputs over there. Page view controller with the type of you I page you controller, comma deep finish animating, finished with the type of bull. And also when it right previous view controllers with the type of you I view controller and the last one That's right, transition completed and complete it with the type of pool. And now let's write, Give completed. And here we need to write. If let Content View Controller is equal to page view controller that view controllers with a question mark dot First as white through content. You controller a Kerry brackets. Let's brings content view, controller index content view Controller that index All right, and now we need to add two more lines of code. So let's write. Current index is equal to content We Controller DOTS Index and also right through delegates . Question. Mark that deed update, page index And instead of means we need to write content view controller. That's index. So now we first check if the transition is completed and find out the current page index. Then we call the Deep Update page. In the extreme form. The delegates and lastly, we need to add something to our view. Did load method over there? Let's write tell yet is equal to self. And now if you open up device through view controller, that's a file we need to add something to its class. So let's right. Walk through page we controller delegates and also here. Let's implement the required method. So let's right. Fine. Deep update page index current end on. That's right. Update you I And now we need to change our override. Find Prepare. So let's look for that. There we go. So we need to add work through page view controller Question mark dots like through del yet which is equal to self. All right, so now we can compile our app once more and check if there is another bike or not. So let's run it. All right, so let's check it. First of all, I'm going to check its wipe feature. There we go. As you can see, we've got content. We controller Index Juan and also our indicator works. And in the last page to skip button is hidden and our next button became a get a start, but And if I go back. You can see that our skip button is visible and our get started button became to next button, which is what we want. Great. So let's Griffin next next and get it started, all right, and also skip. So we found another bike. When we can, we can get started or ski. Our walk through screens will pop up again and again, so we need to write some functions. That's once our user care. You can skip button or get started button peace. Walk through screens should not pop up. All right. Thank you so much for watching this video. In the next video. We will finish these amazing project and we will find a way to solve that. So seeing the next video 15. Working with UserDefaults class: all right. In today's video, I'm gonna introduce the user defaults feature of Exco to you, which is a very useful class. In order to manage our application and user related settings, for example, you can save the information whether our user has gone through the war through or not. So after user taps the get started button, we need to store the status in the user defaults in order to indicate that the user has gone through the tutorial. So let's open up. Why, through your controller? There we go and let's update our next button taps. So in the second case, we need to add user defaults. That standard that's set with the value of bullion and for key with the type of string, so its value should be true. And for the key that's use has checked. Great. So now when the user taps to get a started button, we add, it has checked key to the user defaults and set it to truth, and we need to copy and paste it into our skip button. There we go. And now let's open up our main view controller and we need to add something to read it appear. So let's right. If user defaults that standard, that's rule for key has checked Dan Return, and that's put it over there. And that's all. So let's runner up one more time and see our result. Alright, so first of all, let's wipe our pages. Great. So everything works fine. And also our next button, the indicator works finding both situations. And what if I click and get started? There we go. It doesn't pop up again, which is absolutely great. All right. Thank you so much for watching this video in the next video. We will work on our Grady in class in order to use that for our bottom. So see you in the next video. 16. Creating a gradient class: All right, welcome back to the last video off this section, and in this video we're going to create our grading class in order to use it for our bottom . So let's right click in the Project Navigator New file. Cocoa Touch Class. Next, and let's call it Grady Int. And let's set the subclass off you. I button because we're gonna use this Grady in for our bottom. So let's click on next, create. First of all, I'm going to explain to you something in order to make you more familiar with what's going on in dese tutorial. So let's open up the on boarding that story world. And if I click on this button and go to the identity inspector, you can find out that you can set a specific class to the spotter. And what does it mean if you go to the attributes inspector, there are some features that you can use. For example, takes color shadow color, title type, etcetera. So we want to create two more tools in order to store two different colors to make our Grady INTs, and you can simply choose your color or their let's open up the grade in class. And let's right adds, I be design herbal because we're going to design some tools for our class and inside of Grady in class. That's right. Let radiance Layer is equal to see a Grady INTs layer, which is designed by Apple. And now let's right at eye being spectacle and right uar top radiant color and that set its type to you I color, which is optional. And let's use DEET set set, Grady int and Right Top Radiant color with its type top radiant color and also bottom grade . Ian's color with the type of bottom radiant color. So now I'm going to create peace Bottom. Grady in color. Let's go over there and one more time. Let's write. I be inspect Herbal war bottom Grady int color with the type of you white collar, and I'm going to copy and paste it over there, and now I'm going to create peace set radiant function. Let me remove these comments on Let's right fine set radiant top Grady int collar with the type of you eye color and also bottom radiant color with the type of your eye color as well . And let's right if let top radiant color is equal to top radiant color and let bottom Grady Int scholar is equal to bottom Grady and color. Then let's write Grady int layer starts. Frame is equal to bounds, and also Grady Int layer dot collars is equal to brackets. Top grade in color that CG color and bottom Grady and color that cge color. And lastly, let's write layer that inserts a player. Let's right radiance layer at zero els Grady INTs layer that removed from super layer. So let me explain to you what's going on over there. In order to use a Grady int in our class, we need to provide some information, such as its frame, it's collars and also its location. When we don't specify its location, the application will use its default value. So now let's check our class whether it works or not. So let's go to a boarding that storyboard and click on this button and go toe identity inspector and said It's class to radiant and come back to attributes, Inspector. And as you can see, we have these Grady int section over there, and also we have top radiant and bottom Grady in. So now we can choose any color we want, and also you can use hex color code. I'm going to write a hex color coat, so let's right to 09 C F f and press enter for the top color. And for the bottom color, I'm going to write 68 e zero cf and press enter. As you can see, we've got this nice Grady in color, which is absolutely awesome. And one of the merits of using a class for our Grady in is that you don't need to use an image for your bottom. As you realize we created this bottom with exclude features and programmatically. So it's so useful to know how to use classes and how to create what you want in your project. And lastly, let's change these indicator color current color and let's change it to 209 c f f press. Enter and finally, our project is not that's compile it and see our lovely project. I would like to mention that first of all, unitary, move your arm from the simulator because we use user defaults class or you can use another simulators such as iPhone aids, etcetera. As you can see Our button looks great. Now, with the help of Grady in class, and also, you can check it out. Everything works. Fine. Get a star. It perfect. All right. I hope you enjoy this section. I know there is a lot of information, or let's say there is a lot of complicated information, but as a matter of thank you as a beginner or if you're not beginner and you're trying to improve your skills and gain your knowledge about quoting it is so important to do something by yourself. So please try to build it by yourself. And if you didn't understand anything, you can always ask me and leave a question for me. And I will definitely answer you as soon as possible. All right. Thank you so much. I will see you in the next section.