How To Make An App For Beginners (iOS/Swift - 2019)

1. Lesson 1 - Xcode: Hello, one. Welcome the lesson one. Let's jump right in. First things first. How do you create an app from scratch? While it all starts with a program called X Code, where you designed the user interface for your app and write your code that gets turned into an iPhone app, which you can publish to the APP store, where millions of people can download and use it before that? Let's backtrack a bit, though X code is a program you can download for free, and the code I'll be teaching you how to write is called the Swift programming language. Don't be intimidated if you've never coated before, because I guarantee you'll get the hang of it. Next X code. Can Onley be installed on Mac computers? But if you don't have access to one, you do not need to spend thousands of dollars to buy one. Instead, check out my video on X code for Windows using Mack Stadium first. All right, so what, That Out of the way, Let's dive in and let me show you around X code. So the first thing you're gonna want to do is to download X code. If you haven't already you only have to do is hit command space bar on your keyboard to launch spotlight type in APP store tow, launch it and then in the search bar type in X code, and that's going to find it. Now, I've already got it installed. So if you don't you want to go ahead and do that. I'm gonna warn you, though, it's a pretty big application. So it does take a little while to install. And if you can't, if it gives you an error message or something like that, scroll down. Check on the compatibility. If you click it, it tells you what version of Mac OS it needs for dissing one and needs 10.13 point six. But whenever they upgrade X coded, this number gets higher and higher, so you might have to update your version of Mac OS in order to install X code. Also, keep in mind the size here, even though it says 6.1 gigs, it sometimes needs a little extra space in order to do the installation. So once you have it installed, go ahead and open it. You're gonna be greeted with a dialogue like this. What we're going to do in this video is create a brand new X code project. So click on create a new Exco project. If you don't see that dialogue, for some reason, maybe you've launched exclude before you can always go up to file, go to kneel and choose project that's gonna get you to the same place. Now there's a bunch of different templates that you can start with to help you. Um, just be a little quicker in terms of what you want to create. What we're going to want in this lesson is to be under this Iowa's tab because their different platforms you can build for using X code and swift, which is the great thing about learning these two things. But we're going to do IOS today, and we're gonna choose single view out, and that's going to give us our basic one page up or one screen app. Next, we're going to want to configure some of the options for a new project, such as what the name is, what the unique I d of it is. And for the product name, you can a bit something. I'm gonna choose how the world like that the team dropped down. You might not have a team here, and that's not going to matter right now. But you will want to create a team when it gets to the point where you want to put the app on your actual device, and I'll show you how to do that. Later on in the series organization name, I would either put your company name or your personal name and then what's common under organization, identify is com dot and then your name or your company name. So, combined with the product name that's going to be the bundle identify. You're going to see this term used quite a bit. It's basically like the unique I d for the out that you're creating when you publisher up. Um, when you uploaded to the APP store and that sort of stuff, you're going to need that bundle, I d. Okay, So next, very important is to make sure your language is set to Swift because that's what we're learning here. You can leave these guys unchecked and then click on next, and you can also leave source control unchecked. Us. Well, we're not going to go through that right now. go ahead and click create and you're gonna have your brand new Exco project. Now it kind of looks intimidating because there's all these checked boxes and drop downs and you know, this interface to someone who hasn't seen it before is pretty confusing, but I'm gonna walk through it with you right now. And I also have, um, a reference sheet for you with a diagram and all the keyboard shortcuts for X coat. So make sure you grab that in the description below. So we're gonna start on the left hand side of the interface and this is the navigator area . You'll notice across the talk that there are different tabs that you can click. It might not be so clear in the beginning, but these are different navigators that you can choose. By far the most common one you'll be using is this Project Navigator, where you can see all of the files in your exclude project. Now clicking on any of these files will change what's in the middle that's called the editor area. So, for instance, right now we have this first project file clicked on, and that's why we see all of the project properties in the editor area. If we click on view controller that swift, you're going to see that this turns into the code editor so that you can write swift code. Go ahead and click on May not storyboard. And this is going to change into an editor where you can customize the screen for your app . We're gonna be doing this shortly. This is actually called interface builder. So you can kind of get what? Why that name is the way it is. Next, let's go to assets that XY assets. This is where you're gonna put all of the images for your project that you're going to use and then launch screen, not storyboard is another sort of interface builder file where you can customize the launch screen on then. The P list has some further properties for your project at a high level. Those are the files that by default, are included inside your Exco project. Now moving along to the right side of the screen. We've got the utilities pain, and what you see here depends on what you're clicking on inside of the editor area. So it's like a further drill down. So, for instance, If we go into the main dot storyboard and I click on this white area, which is my view or my screen, it's going to show me further details about that and in the view control of Swift. If I click on, let's say some piece of code, then it's gonna tell me something related with that. But keep in mind that again. There are some different tabs with this utilities pain. As you can see up here going into the main dot storyboard, you can see that there are a couple more tabs, and that's because I can configure properties for this element. So it looks like X Code has experienced an internal air, but usually these are fine. You can just close the project and relaunch it. I'm not going to do that right now. It's fine. Across the top of the interface, you have your ex code toolbar on the left side of the toolbar. You have some buttons to run your project and stop your project. And then to the right of that, this is actually a drop down where you can select the destination on which to run your project. Now, if you plug in your phone. You can actually select your phone from that drop down. But if you don't have a phone plugged in, don't worry, because X Code has a bunch of simulators where you can run your project on and it's gonna show it on the screen. We're gonna do that in just a second in the middle. Here, you have your status bar. It's gonna show you what's going on with your project, what it's doing right now. And then On the right hand side, there are a couple of more controls here, which we're going to get to in a second. But in the right most part of that toolbar, you're going to see these buttons, which are really helpful to you right now. It's just a hide and show these different areas that we're talking about. Did you quit this middle one? You'll notice that it brings up this little trade down here that we really haven't talked about yet, and this pain down here is called the debug console. And when you're running your project and let's say an error happens, you're going to get some details about that error in this debug console. So by default it's hidden. If you want to show it, all you have to do is click this button to bring it up. So these air the major sections of the X code user interface. It's not that complicated once, you know, right, What we're gonna do now is go ahead and run our project on a simulator. So in that drop down that I showed you by default. Right now it's iPhone. 10 aren't. You can select anyone you want to try out and just click this big play button right here. It's going to launch the Iowa. Similar. Now, the first time you do this, it might take a couple of minutes, but then subsequent times is going to be a lot faster after the similar has launched. So you actually don't really need a physical iPhone device. If you don't have one, you can still build and test your app. Yeah, now there's one quick thing I want to mention, and that is, if you're simulator is way too big for your screen and you can't see all of it, you can actually scale it down, so you can either go up to the menu of the similar and choose, you know, physical size or point accurate or pixel accurate. You can use these shortcuts. Command one command to or command three to change the size of the simulator that you see. So just a handy tip for you in case the some later is way too large for your screen. So when your APP has launched, you're going to see this white screen, and that's because we haven't really added anything to her up yet. But before we do that, let's talk about how that X code project turned into this app that I'm seeing in the simulator. This top layer is the view. It's the screen that the user sees Now. You can configure this view from the main dot storyboard file in your Exco project. The second layer under that is called the View Controller. Now this code file is responsible for managing the view. For instance, when the user taps on the view, it's going to let the view controller note, and then you can write code inside that view Controller toe handle that tap Teoh. Either run some process in the background or maybe display some new information on the screen. You get the idea. Now this view controller is represented by the view controller dot swift file in your Exco project. And as we said before, if you click on that file, the editor area turns into the code editor where you can write swift code to manage the view. Now, if your APP has multiple screens, in most cases, each screen is just going have its own view and view controller. Now let's go back into X code and we're going to stop our project, and we're going to add something to the view so that there is something to see. Let's hit on the stop icon right here and then click on main dot storyboard. So you're seeing the interface builder, and now I'm going to introduce you to this button here called the Library Button. You click this. It's going to bring up a list of objects or you I elements that you can add to your view. Type in the label to search for this guy, and all you have to do is click and drag it onto your view like this. Now you're going to see that label on your viewer here. Now you can drag it around and you can position it. But that's not really going to do anything, because X Code actually has its own way of positioning and sizing layup items. Exclude uses a system called auto layout to position and size the elements on the screen. This system makes it easier for you to design a single interface that looks good on iPhone , iPad and all the other screen sizes of future IOS devices. Now, basically, all you have to do is specify in list of rules for each element that dictates how it should be positioned and how it should be sized relative to other elements on the screen. For example, this element should be the same height as this other element. Or maybe this element should be centered on the screen. These rules are called constraints, and in less than two you're going to learn a lot more about auto layout and auto layout constraints. But for now, let's jump back into X code and take a look at how we can position and center our label on the screen. Alright, so back an interface builder. I want you to select your label just to make sure that it's highlighted and Then down here there are a couple of buttons where you can add auto label constraints, so click on, not at new constraints, but this button called a line because we want to basically align this label in the center of the screen. So we're gonna check horizontally and vertically in container and then click Add to constraints and you can instantly see these lines here that represent the constraints you just added, as well as the label being centred on this screen. If you've made an error, don't worry. Check it out right here. This is called the Document Outline, and it basically shows you all of the elements and all of the constraints that are in your view right now. So just open up constraints. You can highlight your constraints that you've added. Maybe you've made an error or something like that. Um, you can either delete them right now. I can hit, delete and get rid of them. Or if you highlight them in the utilities pain on the right hand side in this size inspector, or that there's different inspectors that you can select. Make sure that you're looking at either that attributes inspector the size inspector, And then you can edit some of the properties for your constraint. I'm gonna show you just the leading them right now. Often the document outlined, So they're gone. I'm gonna do it again so you can hit your label now. And you can go into a line and select horizontally and vertically in container and then add to constraints like that. The next thing we're going to do is we're going to edit that word inside the label. So make sure your label is highlighted. And then on the right hand side again, make sure you're looking at the attributes, Inspector right here under text. You're going to be able to just type in whatever you want. Type in hello world, and voila. So click on the run button on your ex code project and it's gonna launch the simulator once again. And you should be seeing something that looks like this. Congratulations. You've built your first step to get a copy of the recap notes. Just check below this video in the next lesson. You're going to be building this Finally, I want to turn over to you with the skills that you're going to learn are you going to build an app or game? Let me know by leaving a quick comment below. All right. Good job. And I'll see you in the next lesson. 2. Lesson 2 - Auto Layout: Hello. In this video, I'm going to teach you how to build user interfaces for your APS using X coats auto layout system. Now, if you want to know how to build cool you wise, like thes than the auto layout basics, I'm going to teach you in this lesson or absolutely critical to know. And if you watch all the way to the end, you're gonna have a really good idea of how to build your own user interface for your own naps. Does that sound good? Let's do it. All right, so let's pretend that we have to build a log in screen for our app. We're first going to start by doing it the old way, and then we're going to jump into X Code and use auto layout and do it for real. Now our first task is to place the logo on the screen. Exco uses an X Y coordinate system where zero X and zero why is in the upper left corner. So this point would be zero X and zero wife or just 00 Next, take a look at this red dot This represents a location on the grid at 10 10 so you kind of get the idea. If you specify a logo to be placed at this point at 10 10 then it's going to take the upper left corner of that logo and put it at that point. Now next, you can specify a height and the width for that logo, and that's going to adjust the size of it. Now, together with the ex, the why the width and the height that is called the frame of that logo element. Now you can continue to use this approach in place. The rest of your labels text fields, buttons, whatever you need, however, when the log in screen is shown on a much larger screen, if not going to look the way that we expect, and this is where auto layout comes in. So instead of specify exact X Y coordinates, wits and heights, we specify rules to describe the location and size is of all of the elements relative to other elements, and these rules air called constraints. Now, why don't we try redesigning this log in screen, using auto Leo constraints instead? So here's our first log in button. I'm going to add a constraint to say that the horizontal center of this button should be the same as the center of the view in terms of the X axis, so that is going to center it on the screen on that X axis. Now I'm gonna add another constraint to say that the buttons should have the same vertical center as the view, and that's going to center it vertically on that Y axis. Now this effectively puts the button right in the center of the screen. Next, I'm going to add the logo, and I'm going to add a constraint to make its horizontal center the same as the horizontal center of the button. So that's going to align the two elements like this. I'm going to add another constraint to that image, and this time we're going to say that the bottom of that image should be 20 points above the top of the button. Now, notice, I said points and not pixels. And that's because in Iowa s, we have devices with different pixel densities. So, for example, on the original iPhone, one point is one pixel there, one in the same. But then apple introduced retina screens where they managed to squeeze four pixels in the same amount of space that used to be one pixel. So on these screens, one point is equal to four pixels. And then Apple introduced the super retina screens and these four for the plus sized iPhones, where they managed to squeeze and nine pixels in this space that was once one pixel. And so one point on these screens equals tau nine pixels. So that's why, when we're designing our user interface, we always speak in terms of points. It allows us to have a consistent user interface, regardless of the pixel density of the screen that it's being presented on. So when you say 20 points from the left side, it's gonna look consistent on the original iPhone on a retina screen or a super retina screen. Now, if this is kind of confusing to you, don't worry, because you're never really gonna have to worry about how many pixels things are. You're always working in terms of points, but I think that it's important that at least you know about this distinction now. Another thing I want to point out is that if I don't specify a specific height and width constraint for this logo, then it's going to just be set at its intrinsic size, which is just whatever size the image is. If you wanted to, you could add constraints for the logo to make its height and width relative to other elements or even relative to the screen size. But I'm just going to leave it as is now. I'm gonna do something similar with the second button that we're going to add. I'm gonna add to constraints. Want to say that it has the same horizontal center as the first button, which is going to align the buttons together on? And then I'm going to add a second constraint to say that the top of the second button should be 10 points below the bottom of the first button, just so that they have a 10 point gap. Now we're gonna add the last button to constraints again, one for the horizontal center and the seconds constraint to position at 10 points below that middle button. Since all of these elements have constraints are relative to that first button. If I move that first button around, then all of the other elements will follow because the auto layout system is going to find a way to satisfy all of the constraints that you have added. Now there's a much easier way to achieve the same thing that we have here without having dispensed by so many constraints. And I'll show you how to do that in less than three. For now, though, I think it's important for you to understand how auto Leo constraints work, which is why we are doing it this way. Now let me ask you, do you feel like being a bully today because we're going to be really mean to this logo right now? Why don't we add another constraint that contradicts an earlier constraint? We added. So let's say that we add another constraint to this logo to say that the bottom of the local should be 10 points from the top of the first button. Now notice that this contradicts the earlier constrained that we added that said that it should be 20 points above that first button, so there's no way that it can satisfy both of these constraints that we've added. This is called conflicting constraints, and the system will actually choose a constraint to break, and this can lead to unintended Leo glitches. So the tough part of working with Auto lube is just to make sure that you don't have conflicting constraints, because sometimes, as you're adding these constraints inside X code, you might lose track of what you've already added. And when you finally run your application, you might get a bunch of conflicting constraints, and the auto layout system will choose which ones to break. And the layout's not gonna look like anything you intended it to. Now. Exco does give you tools to help you manage and resolve these conflicting constraints, as you're soon going to see, because the next thing we're going to do is we're gonna jump into X code right now and construct this log in screen for real. Now there's one thing that I want to quickly point out, and that's when you start your Exco project. You don't have the turn on auto layout or anything like that to use it. In fact, it's just the standard. When you start a new Exco project, you're gonna be able to just start using it right away. So I've got a brand new X code project here using the single view application project template. If you're not sure how to start a New Mexico project, and I would say Watch lesson one as we go through that, In that lesson, what we're going to do is jump into the main dot storyboard and we're going to get started . We're gonna hit command shift and L and that's going pop up the object library menu. Or you can just click on this guy up here and you can search for button here. Click and drag it right there and to add a button on the screen. And I want you to click on this align menu and choose horizontally center in container and add that one constraint that's going to center that button. But you'll notice that there are some red lines above and below that button and also in the document outline. Here, you'll see this red arrow. You don't see this document outline. Just click on this little icon here to open and close it. So anyways, I want you to click on this red icon, and it tells you that the system doesn't know how to position that button on the vertical axis because there's no constraints to dictate how to position it, so I want to do and begins here. The category for the error is missing constraints. Now go ahead and click back. But just before we add that constraint there, I want you to notice. Another thing on that is to click the button. Click on this align menu. And don't be alarmed that this horizontally and container item is not checked. But you might ask. We just added that. Why is that not checked? Well, the reason is because these menus down here are purely for adding new constraints. It doesn't consider what constraints are ready been added to that element. In order to see what constraints you have added to that guy, you can either click the button and go into the size inspector, and you can scroll down a little bit under constraints. You can see that we have this, ah, line center X constraint. Or you can open this part up in the document outline and you can see that we have this constraint. In fact, if you highly that constrain right now, I want you to go over to the attributes inspector, and we can take a look at the anatomy of a constraint. The main things that you need to notice is that an auto out constraint relates to one element, which is the first item and how it is going to be related to the second item, in which case here it says super view dot center X. So what the super view means is it's just the view that contains that particular element in this case, that is going to be our overall screen or our view on DSO. The buttons, super view or another way to think of it is parent view is the view. The screen itself and the properties it is relating is the Centre X, So the button Center X is equal to the Super View Center X and effectively that centers the button on this screen right here and then You can also play with things like the constant priority and multiplier. And he's just gives you a couple of different ways to manipulate how it is related to that second item in that constraint. But we won't go through those right now, so go ahead and highlight your button. Let's add that positioning on the vertical axis. Click on a line right here click on Vertical E in container and Boom right there. You journalists that we have to constraints now for that button. And if you click on this button and go back to the size, inspector, you're going to see that second constraint there. So this is a handy way to see all of the constraints that are related to that element. Because in here, this menu this can get quite long. Once you have many items on the screen, all right, so that's going to represent our first button. We're gonna add a couple more now. So go either use the shortcut key to open the object library or click on the button up there at our second button. Click on a line horizontally and container, and we're going to have the second button relative to this 1st 1 by 10 points, right? We're gonna leave a 10 point gap there, so click on this button and then click on this. Add new constraints menu and it's gonna have, ah, a couple of margins that you consent. Four. To be exact, you can enable or disable any of them. Just take note that if you edit one of these margins that's automatically going to turn on that constraint. Uh, and then you can see it says, add one constraint here. So I want you to pull down the menu and you can see for this button that you're adding the constraint to What do you want that second element? You know, the one that it's gonna be relative to. What do you want? That second element to beat? Since we want this button to be 10 points below this first button, we're going to make it relative to the first button, right? So that's why you gotta pop open this menu to make sure that this is selected. So when you select that, it's going to change the value to what it currently is, some currently is 33.5 points away. So just take note of that right. For example, if we did view and we did, you know 10 points away, that would actually make this button go all the way up here and be 10 points, uh, to the 10 points from the top of the view, right, which is not what we want. So make sure you have the right element selected and click. Add one constraint on you can see there that constraint that we added right there this button stop is equal to the first buttons bottom and the constant is 10. So that's where the constant comes into play. Now, if this is starting to get confusing because they're both named Button, what we should have done to make it a little more clear is we could have renamed things like that, let's say first button and second button. And now you can see the auto Leo constraints. They change the names, too. So that's really handy to see now for you. Click on this constraint that we just added. The second buttons Top is equal to first buttons bottom by 10 points, so that makes a lot more sense. Now let's add our last button right here again. We're gonna align it first horizontally and container, and we're gonna add a new constraint and we're going to click enable that top one and we're gonna make it relative to the second button by a factor of 10 points again. Boom! That lines it up right there. That's not forget to name this guy. Our third button So we've got are a bunch of buttons there. Now we're gonna put a logo, but the local is just going to be a text label in this case. And we're also gonna add a little little prompt, a little instruction able above these buttons, actually, So let's do that Press up, pop it open again. Like I instinctively know what the keys are. But my hands No. Right. But then if you ask me to tell you, I have to look down at the keys first command shift, and l And that's actually one thing that now that we're on, this topic I want to tell you about is just muscle memory, right? So you know, at first when you're alerting this stuff, you're going to be slow. And especially when you start learning swift and you're you're going to start learning the syntax, you're going to try to memorize keywords, and you're gonna try to memorize things. But you don't really need to do that. All you need to do is just build more APS, go through more demos, go through tutorials and your fingers almost they have a mind of their own. So your mind thinks you know I want to open up that object library and your fingers. They just kind of, like, know what to do. Hey, you don't have to think I need to press command. Shift in l initially, it will be like that, but as you do it more, it's just gonna be very instinctive. So I just want to I just want to point that out. Don't get discouraged if it doesn't come easy in the beginning. Now I added this right here and you'll notice that there's a yellow error. Now it's not read like before. Redman error Yellow instead means things element doesn't have any auto layout constraints. So why don't we position this? Also, we're going to position it horizontally and container, and we're going to specify the bottom margin this time. And we're going to say that it's gonna be relatives of the first button, Um, by 20 points, right? Actually, I want to show you one cool thing. It's gonna save you a lot of time. Hopefully. So let's say that I when I dragged my label, it was over here. It was like almost on top of that first button, and, you know, I want to position it relative to that first button by 10. So I go go ahead and enable that constraint hit. 10. Pull down this drop down. But the first button isn't there. I can't choose the first button in this drop down. Why is that? While the reason is because your label is overlapping that first button so it doesn't come up as a neighbor here. So you need to make sure if you want to make you know Anel Ament relative toe another element, you have to make sure that they're not overlapping. And sometimes they could still be overlapping, even though they don't look like that in the view. Because, um, we mentioned the frame earlier in this lesson. You check this button out, you can see that the frame actually extends. Um, beyond just the word button, you can see these these white dots here. That's so that's part of the frame. So even if the frame of the label is kind of touching the frame of the button and you know that's not like the text is an overlapping, but at this point, they could still be overlapping, in fact, yeah, they are, So I wouldn't be able to see that first button. But if I just drag it out a little bit more, I can then choose the first button. So hopefully that saves you a lot of time because, um, you might not realize that in the beginning. So let's add that one constraint Boom. It's right there. Another cool thing is that let's say I dragged this away. You can see these lines. They kind of turn orange right now. And that's basically saying that the auto Leo constraints for that label they aren't taking effect right now because you, like, dragged it away. So what you're seeing on the view is not reflective of the constraints that you've added to fix that. All you have to do is click this little update frames button that's going to just run all the auto layoff constraint rules, and that's gonna put everything where they're supposed to be according to the constraints that you have added. All right, so this this label we wanted this to say, log in or create an account. That's kind of what I wanted to say, at least. Okay, we're gonna add another label. I'm gonna drag it like that, going to put it in the center and we're gonna position this guy bottom constraint relative to in this label right here. And I'm going to say something like 30 thistles, just just me making up stuff right now. So I'm gonna call this Social Squid, and in order to put this in two lines, what you can do is actually change the number of lines from one change of zero, and that actually means multiple lines. Now, inside here in this label, you can actually do line break. If you just press control, enter, you're gonna be able to put a line break, and we're gonna center this and we're just gonna change the font. You might not have avenue next, and that's completely fine. Next, let's add some text, these buttons. So this one is going to be signing Facebook signed with Greul email. Now I want you to notice that you can add an image to these buttons and that is going to, um at a little icon beside the button. Or you could also add a background image, which is what we're going to be using. And you can set background colors than stuff so you can really go in depth with customizing your buttons. But because this is an audibly a lesson, I want to focus on auto legal constraints, and that's where stuff and not customizing buttons. So I've actually prepared some graphic assets just to get the look in the feel of the button that we want without going too deep off the deep end on customizing buttons. So what I want you to do is grab these images and these images I've made available either in the link in the description below. Or you can click on the upper right corner and you can download thes resource is so that you can follow along. So after you unzip the file and you grab these asset images, just drag them into here and just a quick note. If you don't understand why there are, like three sizes of each image, one X is the original size to access to times as large and three xs three times bigger. The reason is because there's different resolutions of the Iowa screen, so all the retina screens will use the two X and the super right. No one's would use the three X. That's why there are three different sizes and the right size will be used depending on what screen the device the user is using. Eso Like I said, he's button graphic button graphics. I added this rectangular background solid color to it. You, you know, technically, could have just customized that. In fact, if it were like a production up, I would wouldn't recommend exporting your graphics like that. But like I said, this is for the sake of because we want to focus on audibly up. So I'm losing my words here. So what I want you to do is highlight the three buttons by holding shift on your keyboard and clicking all three and then choose alignment left, um, and that it's not gonna do it. Well, actually, no, that's fine. That's fine. All right, that did do it. It's just that they didn't align left because the size the width of the buttons are variable right now. So I want you to click on that first sign in with Facebook button and change the background to Facebook, and you can see it's gonna balloon up. We're gonna change that text color toe white, see and actually see it, and you can actually adjust the text inside that button by going to the sides inspector and just setting the content in sight to something like 20 for example. So let's do the same thing for the Google button. But let's just change the background image first, and then in here will change the content in set. Uh, and then we will change the font color too black. And so sign in email at the email image. Change the text color too Black change the content in set to 20. Ah, and then we are going to add a background to this. So search for image view all I want you to do is just plop it anywhere. It's just gonna cover something, and I want you to choose a background. And then I want you to hit this Adam constraints and we are going to enable all four constraints and we are going to change. We're gonna unconstrained to margins. I'll explain to you what that means. In a second, we're gonna change these all to zero. So by default there are margins for text, for example, and because we want the image to go like edge to edge, ignoring all the margins, you know, it all four sides of the screen, we're going uncheck constraint to margins. Another thing to note is that there is something called a safe area and because you know what, the new iPhone tens there's like, a notch, Um, so the safe area is just an area where nothing will get obscured, no matter what device you're using. So if you want like, let's say you're laying up text, then you definitely want to stay within the safe, safe area. So how do you stay within the safe area? Will by default? All the constraints you add will be relative to being in the safe area if you don't want to be in the safer yet So far, this image we wanted to go edge to edge. We don't want to go under the not like we don't want to leave any gaps on the to the left and the right of the notch. And so we want to go all the way to the top of the screen. We would pull this drop down, and then we would say relatives of the view can and notice that changes the number back to 72. So just click all of these drop downs here and choose view instead of safe area. So watch his view, okay? And change these all back to zero can now add four constraints and that is going to stretch it all toe all four sides. Now, if you accidentally made a mistake, that's not a problem. Just go into the size inspector for this background. And here are the four constraints you just added DoubleClick, any of them, and that's going to highlight the constraint on then in here, you can pull down the drop down and you can say, Ah, you can choose super view instead of safe area. So that's how you fix it. Or you could just delete the constraint and react. Um, now the problem here is that our image, he was covering everything, and that brings me to another important point, which is layer order. Now, if you look at this document outline, this is also called a view hierarchy, and the reason is a hierarchy is because some of these elements they allow you put other elements inside of them like they're a container element. Just like this view is this view This what represents our screen here contains all of these buttons, the labels and this background image. Well, you can have other container views, and you can have, like, multiple layers. So it becomes a hierarchy. And anything that is closer to the bottom of the Harkey in the same level is closer to the users. So, for example, this background image right? It's all the way at the bottom of this Harkey at this level. And that's why it's the closest to the user on, and it's covering everything else. We want this background to be at the back right. We want everything else to be on top of this background. So all we need to do is click and drag this guy and reorganize it to the back so that you can see we've just pushed it as the back element. You can ignore the safe area here. Actually, if you click this, you can see where the safe area is. But anyways, that background now is that back most element. So all of these elements are above it. Now that we have our layout looking kind of like what we want, I want to quickly talk about conflicting constraints. So why don't we do that example that we did earlier by making this logo adding a second constraint so that it is relative to this guy. But 10 points away from that guy. Keep in mind, there's already a constraint that says it should be 30 points above this label. I'm gonna add a second conflicting constraint to say that it should be 10 points in instantly. You can see that there's an error illustrating that there are two constraints. One says 30 and one says 10. And if you click down here, you Can you click this little error icon here, you can see there's conflicting constraints. So what you can do, you could just delete 11 of them, right? So you can't actually delete it from here. But you can highlight one of them and just delete it. That's going to fix the problem. So also, when you run your app and if there are conflicting constraints, it's gonna tell you in the debug Consul in this area down here. Okay, so how do you check if your layout looks good on multiple devices? Well, there is this little option here, says view as iPhone eight. You can actually click this guy open and change the device, your viewing it on. So let's say 10 are. You can change the orientation and see that it is a little squished, although you can see everything. And there are certain things that we can fix up pretty easily in some things where we're gonna have to add constraints to fix a specific device. So in order to give you finer grain control of how you're you, I looks on different screen sizes and devices. There is something called size clauses, and they're kind of like categories of devices. So because Apple has created so many different sizes of ipads and iPhones, while you can't configure them specifically for a device, you can configure your you. I specifically for a size class or a category of devices, and Apple has organized all of their different IOS devices into different categories. Eso we're not going to get into size costs is right now because this lessens already running kind of long. But I do have a bonus video for you that we will go into size classes. I'll tell you what they're all about. How you can set auto Leo constraints for specific size classes but not other ones, so that you can change the look of your you. I depending on whether or not you have more space or less space. So you can do that. It's not. It's not a requirement right now. We don't really need to do that. But if that is something that you're interested in right now, you can go grab that bonus training. Now, Auto, Leo is just one of those things that gets a lot easier than where you do it. So I have some exercises as well as a bonus auto layout training for you down below. So make sure you check that out. Now, in the next lesson, you're going to learn about au element that's going to reduce the number of constraints that you have to specify considerably. But before we get there, I want to ask you a question for the app that you want to build. Are you gonna focus on iPhone or iPad? Let me know by leaving a quick comment below. All right, great progress. I'll see you in the next lesson. Bye. For now, 3. Lesson 2 Bonus - Auto Layout: Hello and welcome to the bonus auto Leo training. Now, in this video, you're going to be building a completely new user interface. More complicated. One, actually, and you're going to get a recap of auto layout, the safe area, adding editing and deleting constraints. And also we're going to cover some material that we didn't get time to do in the lesson to . And that is the size classes and viewing your user interface under different screen sizes. And you can do that actually directly inside of X code. Now, in addition to teaching you how to do that, also show you how to add screen size specific auto label constraints so that you can really find, too in your user interface, so that it looks good on a big screen, a small screen, you know, whatever the device the user is using to view your app, there's one thing I want to mention, and that's this. Training was recorded on X Code night. Now, in terms of what we're covering the auto layout, the size classes, constraints, all that stuff is exactly the same as X content. The only thing you might notice in terms of X Co differences is that the object LaBrie in X Code nine used to reside in the utilities area in the lower right corner. However, in Exco, tenants moved upto a button on the toolbar as you saw in less and two. So that's really the only change. It's not gonna affect what you're learning in this bonus training, so I hope you enjoy it and I'll talk to you again soon. So we're just going to start a brand New Exco project just like we did in the previous lesson. Make sure you're looking under this Iowa's tap and that you've got single view app selected . Let's click next and then in the product name I'm going to say up to and the rest of the properties should already be filled out from the project you created from the last lesson. We don't need to change any of that. It's click next, and then we are just going to save it on the desktop. Jumped right into the main dot storyboard here because we're going to start customizing our view in the lower right hand corner. Do you remember what this is called? This is the library pain, and we're gonna be looking at this tab, the object library. This is where we're going to be able to select some elements to add into our view. So in this filter text box, I'm going to type in image you because this is the element we're going to use to display images in our screen. So let's click and drag and then drop that interview. Unfortunately, right now, we don't have any images to show in that image view. We have actually add those images into our exclude project. So if you look in the file navigator here on the left hand side, right underneath the main, that storyboard, you'll see this assets thought XY assets. If you click that, it's going to bring you to a section where we store the images that we use for our project . As expected, there's nothing right here, and in fact, there's even an entry for the APP icon. But there are no image assets here, So what we're gonna want to do is add some images in here for us to use, And if you check the description below this video, I've got a link to the image that we're going to use in this project. It's called Lesson two assets thought zip. So just click that link right now, Download that zip file and put it on your desktop. And then I want you to go ahead and unzip that file. I'm going to double click this zip file and it's going to unpack it and out pops an image. This is the image we're going to use. So all you have to do is click this image and drag it into your Exco project, and you should have highlighted the assets start XY assets so you can drag it directly into this asset library. You can either put it in this panel or this panel. It really doesn't matter. But when you let go of your mouse button, you're gonna have this image in your exclude project. Now, what we're gonna want to do is actually rename this asset and Mooney click it and wait about a second. It's going to open up a text box for us to rename it Put landscape in there. Alternatively, you can actually highlight it and just hit enter on your keyboard, and that allows you to rename it as well. So right now you should be looking at your assets, the XY assets. You should have this landscape entry, and you should see this image here. Let's go back to maine dot storyboard. And now, in this image view, just highlight it in the document outline. And right here in the inspector pain. We're looking at the attributes, Inspector. At the very top there is this image property pulled the drop down down, and you're going to see that image asset which we added. So just click that and then immediately you're going to see your image. You display that image. Now, we're gonna want this guy to be full screen. So we're going to need to set some constraints for this. You image you. But first, I want to show you something called the safe area. In this document outline. If you go ahead and click that you're going to see a portion of your view highlighted in blue and this is what is known as the safe area. You can see this little bar at the top in white. That's not part of the safe area. And the safe area is just a space where you can be guaranteed that the stuff you add won't be obstructed. So as you can tell up here, this is where the status bar for the phone is all right, that you see your time, you see the carrier, you see, you know, a bunch of icons and stuff like that. So it's just warning you, you know of you highlight the safe area that the area highlighted in blue is an area where you're elements won't get obstructed. Now, that doesn't mean that you can't put anything up here. I mean, we can go ahead and stretch that image all the way to the very top. We just have to understand that there may be some text overlaying that like the carrier, the time, the symbols and such. So this is going to come into play, because when we Adauto layout constraints, we can specify. Do we want that constraint? Like, for instance, if we're specifying a top margin for this element, do we want that to be zero from the safe area, or do we want it to be zero from the very edge of the screen? All right. So I'm going to show you that right now. We're gonna highlight the you I image you. And then we're gonna go down here to the bottom, right? And we're gonna click this add new constraint button, and this menu pops up, it's going to allow us to add some margin constraints for are you image view? You can see four text boxes here, one on each side, and each of these text boxes represents the margin that we want to set for that you image view right here. There are some default numbers, and these numbers are just the current values. If we wanted to have the u image, you look like this so you can see 2 35 here right now. This length right here is to 35. So we're gonna go ahead and change this to 00 and I should mention that the values you see here will be different. Because when you drag that you image view into the view, you'll probably have dropped it in different place than I have. So where I dropped it into the view, these are the current margins. So I've set this 2120 You can see that this constraint is active or I'm about to add it because this red line is highlighted Now the other three margin lines are blanked out and down here, you can see add one constraint. If I change the number, it kind of automatically activates that constraint. And you can see down here it says, add to constraints. Now, if I click this button right now, it's going to add this top constraint and this left constraint. Now I can actually click that and turn it on or off. Right now, I'm not adding any constraints, and right now I'm adding to constraints. Another thing I want to mention is this little triangle here at thes aren't actually text boxes. They're actually drop downs. So if I click this, you're going to see the safe area and the view. This is what I was mentioning before. Do we want it to be zero margin from the safe area or from the view? So I'm actually going to change this to the view like that and be careful because it changes back to 2 35 when I still like that. So I'm gonna go ahead and hit zero again. So even for these ones, I'm going to change it from safe area to the view to make sure it's actually to the very edge of the screen. This one again. Change it to the view and this one down here, I'm gonna change it to the view. And then I'm gonna set all of these 20 So a fast way to jump through the different text boxes is if you just press tab. Is that And then lastly, we're going to uncheck constraint margins because we want it to be to the very edge and not towards some margin. And then down here, it should say add four constraints. So click that and immediately you're going to see that you are image. You stretch to all four edges. Now it doesn't go all the way to the top. I'm gonna double check what we added there. If you look in the document outline, you'll see that now you have this entry called constraints. If we expand that, you can see the four constraints which we added, and clicking each of them. You can look in the inspector pain on the right hand side, and you can look at some configurable properties for it. So let's take a look at the top one landscape top equals. So somehow, even though I said it to the view somehow it's changed itself back to the safe area. So what we can do? Actually, before I do that, let me explain to you what this means. So this constraint is saying to make the landscape landscape is our image view at the top edge of our image. You equal to the top edge of the safe area, right? And zero. This is what we specified. But I don't want it to be zero from the safe area. I actually wanted to be zero from the view up here, So I'm gonna pull this drop down down and I'm going to choose Super View and Super View is just a term to describe the view that contains, are you I image view. So let's click on super View and then you can see that this constant has changed to 20 and you can see that there is this bar here. This constraint does indicating that my you image you is now 20 from the super view dot top . While I'm going to change that back to zero hit, enter and now you can see that it's actually zero from very, very top instead of the safe area. So I've just showed you that you can click on a constraint and you can edit it from this inspector panel. Now I want to show you that you can actually just remove them. So if you make a mistake, go ahead into this document outlined right here. You can hold them, command or shift, and you can click each of them like this and then just go ahead and hit delete on your keyboard. If we do that, This image view, it looks like it's positioned correctly. But in reality, there are no constraints dictating how it should be positioned or sized. So that's gonna be a problem. We just deleted all of our constraints as extra practice. We're going to just re add them. So let's click on the landscape right here. This you image view that is now named landscape I mean and then go down here into the bottom right and go to add new constraints were going to do this again. So first of all, it looks like this one is safe area. So I'm gonna choose view this one safe here. I'm gonna select view instead, this one of a select view. This one is feel OK and it's double check that it hasn't changed on me again. And let's click, add four constraints. So there we go. We have four again, all right. The next thing is that this image actually looks kind of stretch. That looks distorted, right? If we highlight the image you here and go into the inspector panel, there is a property called content mode, and this dictates how the image should be stretched or if it should not be stretched right now, it's set to scale to fill, which means it's just going to stretch it. However, it needs to, in order, fill up the whole image view, for instance, we can set it to just center, and it's just not going to stretch it. And there's actually a lot of overlap that you can't see right now, or we consent it toe aspect fit. It's just going to try and fit the entire image without stretching it or weaken, said it aspect, Phil. It's going toe, enlarge it so that it fills the entire image view, but it's not going to distort it because it's going to maintain the same height and width ratio, so that won't look squished through stretched or anything like that. So that's the one we're going to choose. So then we get something that looks like this. All right. Now we have to add our labels, but we can't just add our labels here because that text is going to be pretty hard to read . So we're going to create a little bit of a black background here so that we can put our labels on top of it, and then it will be easier to read. So down here in the object library, let's change this filter text instead of image view. Let's type in you eye view. When you do that, you're going to see this element here that say's view. So this is kind of like a generic view that we can color and we can put things in. We're going to go ahead and click that and drag that onto our screen just like that, and having it highlighted in this document outline, I'm going to go over to the inspector pain. We're gonna change the background color, so go ahead, hit this drop down and choose block color and then you're going to click this little black rectangle here that's gonna bring up this little menu with a couple of tabs. If you choose this tab here, it's gonna be all blocked. But you can slide this opacity. You could make it semi opaque like that. And I mean, I said to about 80% you can also just type it into this text box here and then we're going to go ahead and click that Red X to close it. And you can see that we have this beautiful sort of semi transparent black which we're going to put our labels on top of. But first, let's position this, um, you have you So having it highlighted in our document outlines. I'm going to go over here and click, Add new constraints. I'm no to just off the bat uncheck constraint to margins. And I'm going to go ahead and enable the left the right and the bottom constraints. And then I'm going to choose view instead of safe area like that and change that. And then I'm going to set these 20 notice that I'm not touching this top constraint and I'll show you why in a second ended 00 I'm going to do zero me. Just double check that it hasn't changed back to the safe area, all right, and we're going to click. Add three constraints this time, all right, so you you're going to see a couple of things here. First of all, it's stretch to the left and right because we added those constraints. But now there's this red line here, and it's supposed to stick to the bottom because we said it should be zero from the bottom . But there's this red line here and over on the document outline. You can see this little red arrow here. If we click that, you're going to see that there are some auto layout errors right here. It say's that it's missing some constraints. It can't determine why position or the height. So before our bottom constraint is going to take effect, we're gonna need to set either a height for this view or a top constraint. So that auto layout system has all the information it needs to be able to position that you eye view. So what we're going to do is highlight this view while holding down the command key Click on this route view as well. This is kind of like the the overall view that contains everything. So Okay, let me try that again. So highlight this view. Hold down command, and then click this route view. So you should have both of these highlighted and blue. Now. Now, with that, I want to go down here, add new constraints again, and I want you to choose equal heights, and that is going to basically make this block dimmed view the same height as the root view , which basically is this entire view right here. But we're going to do a little something special in orderto make it dynamic. So you're gonna see that in a second. But for now, make sure you have equal heights checked on and then click. Add one constraint. Then you're going to see basically the whole thing dimmed out. Um, and in a couple more constraints added in this constraints menu, you can see that it's starting to get pretty confusing. I can't really tell unless I really, really try to read it. I can't really tell which constraints have to do with the landscape and which constraints have to do with this view, right? So one easy way to tell if I only care about the constraints for this you I view, for instance, let's highlight it in the document outline here. And then I'm going to go into this size Inspector tab. And if I scroll down, it actually shows me that there are four constraints that relate to this element. And like this, I can easily tell which constraints I want to modify. So I actually want to modify this one equal height to super view. I'm going to double click it while it's automatically going to highlight the constraint that I selected. And then it's going to show me it's configurable properties here on the inspector pain. So let me read this constraint to you. The views Height should be equal to the super views height. So this is the view, and this is the super view. Remember, Super view is just a fancy word for the view that contains that element. So you can see that if I collapsed this view, everything is inside of it, right? So this view actually contains everything inside of it. All right, so if you have this reversed, if you have super viewed out height is equal to view dot high. I want you to go down here and click on reversed first and second item. If I click that you're gonna see super view height equal view, I I don't want that. I want you to click this reverse first and second item. The first item should be view height, because that's what you're trying to specify. So our rule states that the views height should be equal to the super views height and down here, there's a multiplier. I want to change this to 0.3 when I do that. That's saying that the views height should be equal to 0.3 times the super views height, and this is going to set the height so that it's about 1/3 or about 30% of the entire height. And this is going to be dynamic. It doesn't matter how tall the route view is. It's always going to be 30% of that height. All right now in the bottom right hand corner. Let's change this. You, I've you filter tax. Let's type in label because we're about to add some labels and let's click and let's drag this into this block area. This you live you. When you do that, you can see that my label is actually inside of this. You I view now because this you live you is actually a container view. It can contain other elements. And now that my label is inside that view, when I specify my auto label constraints, let's say I wanted to be zero from the top. It's going to be zero from the top of this. You, I view. It's not gonna be zero from the top of this route view, right, because you're always specifying the positioning constraints relative to the parent that contains it. All right, so since this view contains my label, if I position my label zero from the top, it's going to be based on the top of this view, which is fine. That's exactly what I want. So let's highlight this label in the document outlining Let's go into the attributes inspector here. First of all, let's change the color so it can actually read it. We didn't choose white color and let's change the label to city by the sea. And don't worry that it's kind of cut off right now, we're going to address that. And then I'm gonna click this little icon here so we can change it to a bold type of foreign. And I'm just going to up the size to something like 24. And then we're going to specify some auto Leo constraints for this guy. So with this label highlighted, I'm going to go down here, add constraints, and we are going to do those constraints. The top, the left and the right. So for the top, I'm going to say 20 from the left. I'm going to say 20 and from the right, I'm going to say 20 as well. And then we're gonna click, Add three constraints and then you're going to see something like this. We're gonna add a little description label below that. So let's click this label and let's pop it into there as well. And now you can see in the Stockman outlined that my view contains two labels. So highlight the second label. Let's configure some properties. Let's change it toe white. Let's change the font. We'll leave it at 17 and we're gonna set some constraints for this guy. So make sure it's highlighted here and then click on Add new constraints down here. And this time we are going to, uh, again we're going to do that. But if you pull this drop down down, you're gonna see that you can position it relative to the label that's directly above it. So we're gonna choose that we're not gonna choose the view, So position it relative to the element that's right above it. And I'm going to say that it should be 10 points below that title label. The left will be 20 and the right will be 20 as well. And then I'm gonna add these three constraints when you see something like that. Now I'm going to go back to these properties. Um, there are a couple of things I forgot to set. For example, I want to type a sentence. So this is such a beautiful place. And if we wanted to make it multi line, all we have to do down here is change that lines by default. It's one. Let's change it to zero. And if I typed more text, that's going to be multi line. But I'm gonna leave it like that for now. Now that we've created this beautiful layout, we're going to preview it in different screen sizes and orientations. And the way we do that, you might have noticed down here it say's view as iPhone eight. If I click this, I bring it up. You can actually see a whole bunch of different screen sizes and orientations, So the one I'm looking at right now is iPhone eight. But you can go up. So let's say click this. This is the iPhone X. Sometimes if you don't see this entire view or some if it's blocked out, or maybe it's the screen is all white. Try zooming in and zooming out to force that view to kind of refresh and redraw itself. Now let's go up again. This is the iPhone eight plus. So you see hair, I have a white screen. I'm just going to click and zoom in. So you see now it's just redrawn. If you don't have these controls here, and maybe that you're maybe on a laptop screen and you can't see this, you need to make a little more space. Click this document outlined button to just hide the document outline, and you'll probably get your zoom buttons down here. All right, so let's go downwards now. So we were looking at the iPhone eight. That's where we started. Let's go downwards. This is the iPhone S E. And this is the iPhone four s. Now we're gonna change the orientation. We're going to click on landscape here. You can see that everything's adapted itself because all of our constraints are dynamic. And you can see that this still takes up a 30% of the height of the screen. We're gonna go out words. This is the iPhone s E iPhone. Eight die for 10 and again. Part of it is cropped. Let's go like that. So you can see that here. It's kind of a little bit almost touching our text label here. Now, if we had specified that the left side of the U image you and the you have, you should be relative to this safe area and not to the very edge. Then we wouldn't have come into this notch area. Actually, this part right here, this parts considered a safe area. Let me see if I Yeah, if I click on safe area right here, you can see a blue outline. You can see that this left edge of the screen this is not in the safe area and you can see that this part is not in the safe area. And also, this part down here is not in the safe area, since we kind of ignored the safe area and we specified our elements, the very edges. That's why this Texas so closely here. In order to fix this, we might just increase the margin on the left side or something like that. All right, let's move on. Let's go to the next device. We've got the eight plus again of this white screen. Let's zoom out, zoom in. So there you go. Now, one thing I ought to mention is that this area down here lets you preview your layout in multiple screen sizes organizations, But it also allows you to add constraints that are specific to a certain screen size. And the way you do that is this button here very for constraints. If you accidentally click this and then let's say you clicked something like that and then this area became blue, then you're actually at this point, you're gonna be adding constraints that are specific to this right here, and you're not actually specifying constraints to be specific to a screen size. But there's something called size classes, which each size class actually contains a bunch of different screen sizes. It's like a category of screen sizes. This is something that will cover down the line. I want to warn you about it right now, but just in case this area looks blue for you, if it does, you have to click on this done varying. And chances are the constraints that you added were specific to whatever screen size you accidentally selected. So I would at this point, advise you, um, after you, you clicked on done varying. If you had accidentally clicked it before is to now, go ahead and delete all your constraints and kind of redo it and re add it. But for most of you, if you didn't click this button before and you didn't know about it or you didn't notice it , um, and it's not blue, chances are you don't have anything to worry about. So now I'm going to run it in the simulator, so I'm gonna go ahead and select the iPhone eight some later click run when you see it launching their simulator just like that. And in order to rotate the device, you can go upto hardware. Ah, you can go down to rotate, left their rotate, right. And as you can see there shortcut keys. You can hold down command and press the left arrow or right arrow. Uh, you can actually even just choose one like this from here orientation. But I'm going to use the shortcut keys. So on my keyboard, let's press command and left. You can see that it's just rotated, rotated back, rotated the other way now 4. Lesson 2 Exercice: hello and welcome to the lesson to exercise. So this is what you're going to be completing as part of this exercise? Now have all of the image assets that you need for download just below the video. So go ahead and grab those assets, fire up a brand new single view application X code project and using what you've learned to try to put this together. So at this point, what I do is just pause the video and try this out for yourself. If you get stuck, something doesn't look right. You can't get something looking the way you want. Then come back and watch this video from this point on, because from here on out, I'm going to be building this and showing you how to do it. So here I've started a brand new X code project. I'm going to choose a single view up and let's call this lesson to exercise solution. And you know, all of this stuff is fine. I mean, all we're doing is customizing how it looks in the storyboard. So be working in the storyboard here. The first thing to do, though, is grab those image assets and put them into your asset library. So I've actually got them right here, So I'm just gonna grab them all and put them in. So let's just take a look at what we have. We have this breakfast image, which is from pixels dot com, and I've got the icon and got a radiant for the bottom and the great for the top. Now, great, it's can actually be done. You don't have to use image assets, but at this point in your IOS journey, this is probably the easiest way for you to do it. So I'm going to start here by first putting in that big breakfast image. Let's open up the object library and choose image of you. And if you don't remember the shortcut key, just click on this icon up here, gonna add the image view. So let's also stretch it out, toe all four sides. We're gonna unchecked constraint to margins because we wanted to be to the very edge. And we're also going to make sure that each of these margins that were specifying is relative to the view and not the safe area. And then we're going to proceed to set them all to zero. So let's go ahead and add these four constraints and then set the image for this guy to our breakfast. Now, just in case it's a little bit stretched changed a content mode from scale to fill, which is the default toe aspect, Phil. That's going to maintain the proper aspect ratio while filling up the space of the image. You you can see that it looks a little bright. We're gonna add Argh! Radiance Now. So again, open up your object library and just put an image down there like that. And this time we're going to add three constraints left, right and top, and this is going to be that top radiant. Going to go ahead and open this guy up unchecked, constrained to margins again enable the three. And then I'm going to make sure that it's relative to the view. So it goes to the very edge because we want it to be at the very edge. Not it doesn't matter if it's obscured by the battery indicator or the time or the notch or anything like that. So that's why we specify this relative to the view and not the safe area. All right, so we get some constraint errors. But let's set the image first. So we're gonna choose top radiant, and that is going to that's gonna look OK like that. We're gonna add a second image view and put it near the bottom right here. And this one's gonna be the bottom ingredient. And we're gonna set the left, right and bottom constraints for this guy. So same exact thing. Unchecked constraint margins were gonna enable these three and then we're going to choose relative to the view. Okay, Now set these guys to zero and then click. Add three constraints. I'm gonna set the image to bottom ingredients. We get something like that. Now, the next step is to add the that icon first. So again, we're to be adding another image view like that, and I'm going to set the image to heart health. And then I'm going to add a top and right margin. And this time I'm going to leave this on, and I'm going to leave it relative to the safe area. It is a groups I don't want to add. Constraint. Just the left and the right. Sorry. The top in the right at these two, and we've got our little icon there. All right, we're nearly there. So that's at our label right here and this one. Let's just change to text the white first so we can actually see what it's saying. And then we're going to, uh, leave constraint margins on. I'm gonna do left and top, and we're gonna do 20 from 20. And again, this is by default relative to the safe area. So we know that this label isn't going to get blocked by anything. So let's add these two constraints right there, and we're gonna set the toast to I think it was hard core. Have a post. And then we're going to click this font and let's just make it a little bigger. I forget exactly what size I used, but let's say 30. And I think actually, I had a custom fun. So I used on You can choose anything you want. It doesn't really matter issues Avenir next Demi bold and 2 40 or that's way too big 30 All right. And what you can do at this point, if you wanted to wrap to two lines, um, you can change your number of length zero, which just means multi lines, and you can actually either set a with. So if you set a with, say, cutting it off right here at the point at the A, it's going to automatically wrap AVO toast to the next line. Or you can change your text and you can manually specify line break. So hold down control and hit Enter like that to create a double line label. Just hit Enter. So you've got that and we're gonna add another label this time down here. And let's set this font a white, and we're going to make this label cling onto the left, the right and the bottom just say 20 20 and 20. And again, let's make this a multi line label by setting the number of lines to zero, and I forget exactly what text I had. But let me just write something here. Um, this breakfast is so healthy, and we'll give you so much energy that you'll be able to accomplish anything today. I don't think I had this much text in in the version I showed you, but it's fine. So, you know, even though I might not have chose the exact font size and the exact fund that I used in the demo that I showed you in the beginning of the video. You kind of get the idea about how to build this U y. So I hope you were able to do it on your own. If not, I hope you're able to do it. After watching this, I would give it another try if you got stuck just so you can get some extra practice in because it's really once you start doing it, you're going to then realize what you don't know. If you're just watching me, you don't know what you don't know, right? So definitely give it a try. All right, I'll see you in the next one. 5. Lesson 3 - Stack Views: Hello. Today I'm going to show you how to use an element called the Stack View, which is going to save you a lot of time when it comes to building your user interface. Now, in the previous lesson, I showed you how to use auto layoff constraints to lay out all of the elements in your user interface. However, using a staff, you is going to dramatically reduce the number of constraints that you need to specify. Let's jump right in. All right, so we're going to redo that social log in page. Except this time we're going to use stack views and you'll see how easy they are to use. This time, we're going to create a single view up. I'll take you through this process just going to call this the stack of you exercise and these settings air kind of the ones that we've been using throughout here, so I won't go through them again right now. But if you're a little confused about them, go ahead and check out lesson one. All right. So we've got, um, brand new single view application. We're gonna jump right into this story board, and I want to show you what this stack you element is all about. So go ahead, open up the object library, either clicking this button here or heading command shift in l. And let's take a look at actually first what the stack views are. So we have a horizontal stack you in a vertical stack view. And just as the name implies, the statue is a container element that allows you to put elements inside of it, and it's going to arrange them in a stack, either vertically or horizontally, so you don't have to. You know, if you already want to arrange elements, let's say vertically, one on top of each other. You don't need to specify a whole bunch of auto Leo constraints to arrange them nicely and align them together and all of that stuff. You can just use a vertical stack view. Throw all of those elements inside, configure the stack you a little bit in the stack. You will handle everything else, so let's take a look at that. I'm gonna drag a vertical stack view right there, and you can't really see it. Aside from this outline. In fact, if you click out of it, it's invisible because, like I said, it's a container element. So it by itself, it's not really a visible element. However, you will see it here in the document outline, and this is a very important point because since it's invisible on the screen as you're adding labels or buttons or things into your stack view, it's kind of hard to drag them into the stack view when you can't see it in the view, right? And so usually if I'm adding elements into the stack for you, I'll drag it directly into the document outlines. So let me show you what that looks like. We're gonna go grab a button and we're gonna just drag it directly into the stack. You and, as you can see with a little movement of my mouse, that little blue line, either in dense into the stack view or if I move it out little, it will become an element that is at the same level as the stack view. And if this is the case, then this button is not inside the stack. New. It's in fact, on top of the stack view. So in order to make sure that this button is inside the stack view. You need to just drag it and make sure that it looks like this so that you can collapse and expand the staff. You and you can see the button element inside of it. Let's add another element just so we can see some stacking going on like that. So I've got two buttons. Just gonna add 1/3 1 right here. So now the stacking has three buttons and you can see I didn't put any auto legal constraints on these buttons. All I did was add them into our vertical stack view and its stack them one on top of each other very nicely. Now, some of the properties that you could configure just to go over them quickly with your stack view is you can change the access, so changing them the horizontal puts them side by side and changing them vertical. Just put someone on top of each other. Now, this means that when you're adding your stack view and you're choosing it from the object library, it really doesn't matter. What do you choose horizontal or vertical? Because they're both configurable to be either one. And so you know this vertical stack you here. All you need to do is change the access. If you wanted horizontal. Now here, a couple of more fine grain controls for how to position your elements inside. For example, I can just say spacing of 10 points. That's going to put 10 points in between each element I can see 20. As you can see, it's just gonna do that really simple really easily. Now, if our stack view was a little bit wider, for example, if we stretched out the stack view to the edges of the screen, then I can show you what these are. In fact, why don't we do that? So we're gonna grab our stack, you here, and we're going to one of vertically align it in the container. And then we are going to stretch out the stack view 00 on the left and the right. So if I click on the stack new, you're gonna see that. Well, that's the button right there. But this stack view, Yeah, I can't really see the frame here, but I've stretched out 00 to the side. And you can tell because if you click on a button, you see that button with It's all the way from the left to the right edge is so. The reason why this button is stretched out all the way to the left and right sides is because of the alignment property that, by default in the stack view, is set to fill. So let's talk a little bit about alignment and distribution inside stack views. These two properties do take a little bit to wrap your head around, because what they mean changes, depending on whether you're looking at a vertical stack view or a horizontal stack view. So let's talk about distribution first. In terms of this vertical stack view, we've got this much space. You can see the white segment here, and we've got three elements inside stacked, one on top of each other. Well, distribution is basically it basically means How do you want to distribute the space to these three elements, right in terms of how they are stacked vertically, Uh, on one hand, we could give each of these elements an equal amount of vertical space. On the other hand, you know in the case that each of these buttons is a different size, let's say they're a different height. We could use fill, which means that you're going to give the first element whatever amount of space it needs. And then you're going to give the second element whatever amount of space it needs, and then the third and fourth and so on and so forth. So each element kind of gets the amount of space that they need. In our case, all three buttons air uniforms. So whether we choose Phil or to fill equally, it looks the same. Phil proportionately equal spacing, an equal centering are also other options. They're just different ways of distributing the space, and it's kind of hard to explain. So I recommend that when you do the exercise for this lesson, just play around with these options. Take a look at what's different about them, but the best way I think to think about distribution is how do you want to distribute the space for the elements inside your staff? You now in terms of alignment, I always think of that like ah, word processor. So let's say you're writing a word and you're writing a paragraph and you can either left justify it. You can center it or you could write, justify it? Well, alignment is the same. So right here by default, it said to fill, which is why it stretches out that button to fill up the entire space of the stack view. So that's what Phil needs. If you chose leading center or trailing, it wouldn't stretch out the element. Instead, it would either left justify it center or or right justified, so I can show you that it's the leading. It makes it go there. This is centering and this is trailing. So let me set this back to fill now. The tricky part of this is when you set the access to horizontal, then this meaning changes a little bit right, so distribution on a horizontal stack view is still how do you want to divvy up that space for each of the elements? In this case, Phil looks a little differently. You see it? It still means that it's going to give the first element all of space. It needs second element, all the space it needs, and then whatever space is remaining for the third element. If I chose Phil equally, it's gonna give an equal amount of space horizontal space that is to each of those elements and alignment now becomes. Do you want to fill up the vertical space for each of these buttons, or do you want to topple? Line it center? Line it or bottom Elena. So when you're using stack views, you have alignment and distribution that you can play around with to, um, basically get it looking the way that you want. So now what I'm going to do is try to recreate that social log in screen. I'll show you how to do it without having to specify so many auto Leo constraints like we did in the previous lesson. We're going to use a stack of you to make it a lot easier. So let me first remove the constraints that we added to the stack view. So I'm gonna delete those three constraints, and we still have three buttons inside the stack view. What we're going to do is we're gonna add the image assets, and you can download these in the link in the description. So these are the same assets we used in lesson to. So let's use these buttons and let's set the background image for them. So this one Waas, Google and this one waas email and this said Sign in with Facebook and text waas white. So in order to align these buttons one on top of each other, I just have to change the spacing, the 10 which is what we had in the previous lesson and to align all of them together while all I need to do is just I can center this stack view on the screen just like that. So all I've added are to auto layoff constraints to the stack view. But other than that, the stack he was taking care of all of the arrangement of these buttons inside. And so I think what we also had was a label here, and yeah, so this label is going to give this equal space here. I might not necessarily want that choose a sign. I forgot the exact wording that we used, but that's OK. So if I didn't want to give so much space vertical space to this label, then maybe instead we can try using fill right instead of Phil equally so you can see clearly the difference in that distribution setting right there Now for us for the logo because I want the loco to have a lot more space between the label. This label here in the local above. I don't want to necessarily place the logo into the stack view because in this doctor, I can just choose a blanket spacing, and that's going to give a spacing of 10 everywhere. So instead, what I'm going to choose to do is I'm gonna put the label above the stack view right there . Oops, Let's undo that. Let me drag this label up here. So I want to put this, but I call this social squid change the number of blood zero right. And I'll center in this and just changed the change. The fund to custom change it to, like a bold type of farm. And this one, I will just horizontally align it and I will make it. I think maybe 40 from there. So it's gonna look like that because I want there to be a spacing of 40 instead of 10. That's why I don't want to put this label inside of the stack few, because otherwise, you know I wouldn't be able to Ah, I wouldn't be able to have this bigger spacing here on and lastly, we need to at the image you and you notice that I'm dragging things into the document outlined now and sometimes that's just a lot easier to do. Eso set the background image view to the background image asset that we have, and I am going to uncheck constraint margins. I'm going to choose view. I explained why we do this in the previous lesson. It's because we want it edge the edge regardless of margins or anything like that. And then let me set all of these 20 Let me add the four constraints. So we have this image now, and furthermore, because it stretched like this, I'm going to change the content mode to aspect Phil, and that is going to maintain the aspect ratio of the image while filling up the entire image view. So we've got something like this. All right, so now you know about stack views and auto level constraints, you're ready to build the user interface of our next app, the war card game. As usual, I have all of the recap notes and resource is below the lesson, so make sure you check those out. You're making awesome progress. I'll see you in the next lesson 6. Lesson 3 Exercice: Hello and welcome to your lesson three exercise. All right, so what have we got here? Less than three was about stack views. So this exercise really is to help me get more familiar with them. That's kind of a hint. So, again, I have the assets for you to download in the link below. Fire up a brand new single view application X code project, and try to complete this user interface by yourself. Now, pause the video to do that, because from this point on, I'll be showing you how to do it. If you get stuck, you can get something. Look, right. They come back to this video and watch the solution. All right, let's do it. So here, I've got a brand new Exco project. We're gonna start a single view up, and we're gonna call this the lesson three exercise solution and just gonna save it on my desktop here. And we're to go into asset library and add all of our image assets. Now, this one, this exercise was, uh it seems kind of trivial, but I actually through you a curve ball. You might have encountered it if you tried it out. You might have gotten some auto layout conflicts that you couldn't resolve, and I will tell you how to resolve them in this exercise. All right, So first of all, why don't we go into our view here, Go into the attributes, inspector, and change the background of block? You could have done this, or you could have added, like a view that fit all four edges and then said that the black, that's OK as well. But just setting the back room for this view is probably the easiest thing you could do. The first thing we're going to do is open up this object library and add a label so you can also click this icon there. That's at the label. Let's set it toe white immediately so that we can see where it is. Click open this alignment menu. We're going to horizontally align it in the container. We're gonna then add new constraints and we're gonna let's say, 10 from the top. Constraint margins is on, and it's relative to the safe area so that this label doesn't get covered by the notch. So let's they fit in this friends, you know, I'm gonna change the font Uh, and it doesn't really matter what you change it to, because the exercise, it's kind of irrelevant to the point of the exercise. But, you know, if you want to, you could do it. So that's our label right there. Now, the next thing to do is to organize the three images below it so that they have unequal amount of spacing. So the easiest way to do this is using a stack view vertical stack feel we're gonna add it right here. Now you didn't have to use a stack of you could have specified our little constraints manually for the three different images. That would be fine. You'd get the same result. There's always multiple ways to do things, But let's try to use the stack you because that's what we learned in this lesson. Now I'm gonna make it so that it sticks to the left, right and bottom edges of this view, and it's gonna be 10 points below the label. So let's set some constraints for this guy. Enable four unchecked constraint margins. The top one is going to be relative to the label to make sure that that's set to that and the left is gonna be relative. The view right is gonna be relative view, and the bottom is going to be relative to the view. It's where the top is gonna be. 10 000 All right, we're gonna have that now. The next thing we're gonna do is to add the image views into this lock stack view. So let's drag it in here. Whoops. There. Ago. So make sure you put the image view inside the stack view when you collapse the stack near the image you should be tucked inside like that. Gonna add another two. Boom, boom. So it's flipping out a little bit because it doesn't know what the sizes are and how much space it should give each image of you. So go ahead and click your stack view. Click on distribution here, and we're gonna say Phil equally so it's gonna given equal amount of space to each image view. Another thing you probably want to do is click each of these image views and enabled clip to balance. And that's going to make sure that if the image overflows out of the image view that that overflow portion gets clipped and it's not going to cover the image view beside it or something like that. So here we've kind of got our basic framework. Now all that's left to do is set the image property of each of these image views. So let's go ahead and click our first image view and set the image. So we're gonna set the bar bell, I said, That's the beach. We set this to running notice. As soon as I do that, we start to get all of these conflicts because what's actually happening is that the image view is overflowing the bottom of the screen. You see, we have a constraint that says that the staff, you should be zero from the bottom. But because the three images the height, the combined heights, uh, is more than the height of the stack view, it's it doesn't know what to do. So basically, there's not in a vertical space on this screen to accommodate all of my content. So just going from the top, we have this little red constraint here. That's 10 points. Then we have the label. Then we have another constraint or margin that is 10 points, and then we have this stack view, uh, which is supposed to be zero to the bottom, and it's got three image use inside, and these three images combined have a bigger height than the height of the stack view, so Exco doesn't know what to do. What I wanted to do is for it to squish the stack view, you know, just take up whatever space it can remaining on an equally distribute that space to the three images, right? So there's actually a mechanism to tell X code when there's not enough space. As in this scenario, which elements should get squished or have a higher chance of priority of getting squished , in which elements should never be squished? All right? Ah, and that is called vertical compression. Well content, compression, resistance, priority. And you can specify it for the horizontal and vertical because sometimes there's not enough vertical space, and sometimes there's a dawn enough horizontal space. Now this is It's always really confusing to me, especially in the beginning, and you have to think about it as the higher the priority, the less likely it's going to get squished right, because this is compression resistance. Priority. Okay, so whichever element has the highest resistance priority. That element is not going to get, like, truncated or squished or anything like that. If there's not enough space, the element with lowest priority actually is going to get squished first. So I can fix this problem simply by clicking on the label here and then going down to content compression resistance. Priority. This isn't the size inspector, by the way, and going down to the vertical part by default, it's all set to 7 50 That's why X Code is so confused, because all of the elements have the same priority. So it doesn't know who to which element is compressed, right? So we're going to up the priority on the vertical access for this label because, you know, if there's not enough space, I don't want that label to get squished. I would rather squish that stack, feel a little bit and have smaller images. Would you agree? So we're gonna have just up this priority, You know, you could up it a couple of points and you can see that it immediately solves this problem . So I know I didn't teach you guys this in less than three. At least I don't think I did. And so that's why it was a little bit of a curveball. So I hope you didn't. I hope I didn't waste too much of your time, but I don't think it's a waste of time. Even if you spend a ton of time trying to figure this out, I'm positive that you learned something out of that experience and that you became, you know, im or, um, more familiar with Auto Leo because of it. Now, if you take a look, this content hugging party, I want to briefly touch upon this as well. On this is when there is too much space. So this is kind of like the opposite of the scenario that we had here. Let's say that you are, um, your iPhone app gets viewed on an iPad or something like that, or a bigger iPhone, and there's tons of space now which element is going to maintain its size, in which elements are going to automatically in large to fill up the space? So that's what content hugging priority is. And again it's specified in the opposite way, content hugging as in retaining the same size. That's kind of what content hugging means. So the higher the priority, the more likely it is to stay the same size. So when there's extra space, the element with the lowest content hugging priority that one's going to get expanded are stretched to fill up the space. That's kind of what those properties are, therefore, to give you kind of like finer, finer control over how your layout adapts to bigger screen sizes and smaller screen sizes. So it's very useful stuff. I hope you learned a lot of this exercise, and I'll see you in the next one. 7. Lesson 4 - Your First User Interface: hello and welcome to lessen for equipped with your new skills and auto Leo and staff views is time to put them to the test. By the end of this video, you'll have built the user interface for your war card game app. So let's get to it. So we're gonna start with a brand new X Code project. Just click on, Create New X Code project right here, or you can go into the file menu and choose new project. Now make sure you're looking at IOS and she's single view application here. We're going to put the name of our up, and this isn't the public facing name. This is something that eyes going to give you a unique identify or combined with your organization. Name your your organization. Identify. It's going to create this bundle. I D. And I talked about this back in lesson one and how it's gonna be really important for a nap that you're going to publish in the APP store. No, for this up. Make sure you choose swift as the language. You can leave thes unchecked, and when you save it, you can also leave this unchecked as well. For now, So let's create our project on the desktop. The first thing we're going to do is to jump into the asset library for our project, and I want you to go and grab the image assets. Now, you can do so in the link in the description bottle, or just check the card. Just gonna pop up in the right hand corner. When you unzip the file, you can grab all of these images. You'll notice how each image asset has three different sizes, the 1st 1 x and then two x and three X And this is what we talked about back in our little a lesson. It's for the different devices having different screen pixel densities. So we're gonna just select all of them and then dragged him into right here. Exit code is going to be smart enough to group all of them in asset names like this. These names just pay special attention to them. Capitals matter, and you can rename them these air the asset names, which you are going to refer to thes image assets when you want to display them. So I just change the capital B to a lower case. Be here to be consistent and yours might already be changed. Actually, so, you know, just I'll change that later. So when you download, it should already be lower. Case be. The next thing we're gonna do is jump into the storyboard and we're going to start by adding that green background. So go ahead and open up your object library. You can either click this button up here just in case you forget or press command shift in l. So let's go ahead and search for an image view and drag it onto the view. And this is what we're going to do to display images. Now go ahead and click into this. Inspector attributes Inspector and from the image property list Shoes background. Now we're going toe. Stretch this out all of the edges of the screen. Make sure you have that backwards highlighted, and then click this at New Constraints button. And we're going to want uncheck constraint margins because we wanted to reach to the edges of the screen, ignoring margins. So leave that unchecked. Uh, we're actually actively unchecked out because by default it is on. The other thing you want to do is pull down all these little drop downs and choose view instead of the safe area because you want to specify a margin that is relative to the view rather than the safe area. And just in case we didn't go through what the safe area is. If you go into the document outlined right here and you click on the safe area, it's just that blue highlighted area is the safe area, and it's a place that's guaranteed to not be obscured by anything. So, for example, the iPhone 10 10 are tennis and those ones they haven't notch at the top, right, And so the safe area is actually below the notch. So anything that you put in the safe areas guaranteed not to be blocked by elements like that, and especially if you can flip the orientation so that knowledge could be at the bottom. Or it could be, you know, on any of the sides, the safe area will guarantee that it won't get obscured by that knowledge. Bailey is going back to our background image. Make sure you have it highlighted again. Click on this menu. We're gonna have to start over. So uncheck constraint margins and then choose view for all of these guys. Before you change the numbers in here, I would pull up down this drop down and change it to view first and then go back and edit all the numbers to zero. Making sure that all of these red margins are enabled. It's going to say, add four constraints down here. The reason why I want us a toggle This to view first before changing the value here is because when you choose a new option in this drop down, it automatically changes that number in the text box. So, you know, if you did it the other way around, you would have to basically changed the numbers again. So that was just a demonstrate. Let me just double check that all of them were still set of you. Okay, let's set these 20 at four constraints, and you should see your background stretched toe all four edges. Now, if you somehow, um, didn't your background isn't looking like mine. Then you can always just open up this constraints. You can delete all of them and you can try again. No big deal. Next thing we're going to do is add another image for you. So again, open your object library Dragon image view onto the view. This time we're gonna, uh, choose logo and ignore the fact that it's big and fuzzy or whatever. Right now, we're gonna add some constraints to it first. So let's horizontally center that in the container. It's gonna look squish. That's OK for now. And we're going to add a top margin, and we're going to leave it relative to the safe area. And we're gonna leave constrained to margins enabled because we don't want this little girl to be obscured. So we wanna make sure it's in the safe area when you add that the image view is going to use the intrinsic size of the image, which is just the size of your graphic asset. And so it's gonna look like that. The next thing we want to do is we want to add a stack view. So we learned about these in the previous lesson. We're going to choose a horizontal stack. You and this horizontal stack you is just going to contain the two card elements so had opened up the object library again and choose image view. Now we're gonna put this in our view. But we can either drag it into the stack view on the view, or we can drag it into the document outline. And because the stack view is invisible like this, I usually find it easier to put it into the document outlines. That's what I'm going to do here. I'm gonna drag it here. I'm just going to show you what a potential mistake is. Now if you drag the image view and you try and put it inside your stack view and it's at the same kind of hierarchy level right here as the staff, you that's not what you want. You want the image you to be inside the stack thieves. So let me show you what that looks like. Let me move this image and let me just drag it into the stack view. Now you can see this little collapsible triangle appear. Be side the stack you. That means I can close it and open it. And when I close it, the image view is inside the stack view. So that's what you actually want. We're gonna add a second image view into the stack you so we have to and Then you're gonna click on the first image, you and you're going to choose a card. So let's just say card six and you're going to click on the second image view and you're going to choose. Does it really matter? Was just 10. And now let's add some space in between the two cards. So we're gonna go on the stack view here. I'm gonna choose spacing 30 just to give it some space. Now, before we align the stack view onto the screen, um, I want to put this horizontal stack view into a vertical stack view along with a button, so we're gonna add the button first. Let's drag this button down here and let's configure this little button a bit for the image property of the button. Why don't we choose the deal button? And actually, I want to make one little distinction. Here. You can choose background, or you can choose image. There's a slight difference. So for the image property, it's gonna put that image beside the button text. But if you choose background that images going to peer behind the button text, so that's what that distinction is. All right, so now we have our deal button and we have the two cards here. I'm gonna put both of all of these elements into a vertical stack view. So I want you to go into the document line. Uh, highlight your stack view, hold down, shift on your keyboard and click on your button as well, and that's going to highlight both of them. And I want you to come down here and choose embed in stack view. What that's going to do is immediately take those elements that you've highlighted and put them into a stack view. Now it's execute is gonna be smart enough to take a look at how your elements are oriented , and it's going to see that our horizontal stack you is above our deal button. So it's automatically going to put these two things into a vertical stack view. Check this out stack field boom vertical stack view. You can see this in the document outline. All right, on. The other thing it does is it tries to set some of the properties of the stack view based on how you laid out the elements. So, for example, here it's at the alignment. The center, the distribution to fill in the spacing the 46 Because that was the amount of space we had between the horizontal stack new containing the cards and the deal button. Now I'm gonna change that a little bit. I'm gonna say I wanted 30 instead of 46 on. And now let me rename this in the document outlined because as soon as you're gonna have more and more elements and you're gonna have a ton of stack views or a ton of image views, things can get confusing. So you might have noticed for these ey image use. When we've set the image property of it, it automatically changes the name of that image you in the document outlines. So that's helpful. But for the stack views, they're all just going to say stack use for So for this one, I'm going to say, um, cards. Yeah, you can. You can. Even anything you want. Let's say cards and but me back to you, right for this one, maybe. Cards stack, You okay? And for the button, you could name these two. So now let's collapse this. And let's position this, uh, stack view onto the screen, so make sure It's highlighted when you choose horizontally center and container as well as vertically, and that's going to effectively center the whole thing onto the screen. Now I'm gonna make a slight adjustment here. I am going to go into the size, inspector while I have this stack you highlighted, and I'm going to take a look at the two constraints we added. I'm gonna double click the center. Why constraint? And that this constraint is basically putting it in the center of the screen on the Y axis . I want to move that whole back down a little bit because I want to make sure that when you're holding your phone, your thumb can reach high enough to hit that deal button. So I'm actually going to change this constant, and I'm going to add 20 points to it to bump it down just a little bit. So just as review, I wanna tell you this center alignment constraint is basically saying that the center why of that stack? You should equal the center. Why of the entire view? Um, plus 20 points. That's what the constant is there for. That's why it gets bumped down a little bit. All right. So the next thing we want to add, our the score labels. So why don't we open up our object library again and choose vertical stack view? I am going to just put that there in the corner, and then I'm going to at a couple of labels. I'm gonna drag them directly into the document outlined into that stack view. Many drive two of them, so make sure that when you close the stack view, the label's tucked inside the stack view, all right? And now let me edit some properties of this first label and make the color white, and I am going to change the text of player. And for the second label, I am going to change it to zero. I'm going to change the color toe white. It looks like this guy right here and change the font size to 40. Now, I'm going to highlight the stack view because we want to position this in the lower left hand corner. I'm gonna choose, uh, this one, the margins, and we're gonna make sure that constraint to margins is on and that its relative the safe areas should be by default. Right? We're gonna set the left 1 to 20 in the bottom 1 to 20 and this button should say, Add to constraints, and that's just going to position it there. There's one more thing I want to do on, and that is to change the alignment to leading. So that's gonna make sure that those elements inside that stack feel are left aligned. Let's change the name of this player score back to you. Now we're gonna do the same thing for the CPU score on the right hand side. But this time I'm going to add the labels first just to show you again the two different ways of adding stack views. So I'm going to drive to labels here and check this out. You can do this. You can select both of them. Remember, you hold down, shift inward to select, click and select both of them, and I can change the properties for both of them at once. However, at this point, if I change the text, that's going to change it for both, Um, so let me un select them and just select the 1st 1 will change this into the CPU. Also like the 2nd 1 and change this to zero, and then I'm going to change the font size as well to 40. And now I'm going to select both them again by holding the shift. And then I'm going to click, embed in and choose stack View. Now, remember when it when you do this, it automatically determines which type of staff you with the best horizontal or vertical. And obviously, because the elements were on top of each other, it chose vertical. But it also sets, um, properties for us, which we might not want, So make sure you highlight that staff you. Let's go here, see spacing it set three. So I actually want that to be zero, just like the other player stack view and a lineman I asked you wanted trailing so that it's on the right hand side. Now let's put some margins on the stack view, so make sure you haven't highlighted Click on this guy. Make sure constraint mornings it's on by default should be relative to the safe area, which it is what has changed. 20 and 20 and down here should say, add to constraints and there you have it. So you have something like this Now I want to test this user interface to make sure that it looks decent on all screen sizes and orientations. So the way you can do that inside X Code is down here. It says view as iPhone eight. And so far we've been designing this as iPhone eight in Portrait. But if you click this open, it's got a little tray and yours. My actually show the devices if you've got enough space on your ex code interface. If not, you're going to get this sort of drop down menu like I do. So let's first flip this into portrait. Actually, before we do that, make sure you press come in s and save because exclude sometimes can crash. You know that's not out of the realm of possibility. So change orientation. Let's change the landscape and take a look. So what I tell you, an internal air has occurred. Editing functionally may be limited. There's not a problem. All we need to do is you can come up to product. You can clean build folder, and this this is good learning for you in case this happens for you on. Then you can just go ahead and quit X code press all que and you can quit the whole thing and then you can relaunch X code and then just reopen your project and that will often time fix things. So you can see. Here's my document. Outland can expand that. And here is my user interface. Now, sometimes, if yours has all these blue squares with question marks on them, all you need to do is just go ahead and change the device or change the orientation to force exclude to kind of refresh things. All right, so going back to it, we have iPhone eight in landscape Looks pretty good, right? No problem there. And in fact, if we go up in size, you're just gonna get more space. My biggest concern right now is just to make sure that no element is obscured or hidden or blocked or clipped or anything like that, and that the user interface doesn't appear broken. It's OK if you have extra space. You know you can in the future take advantage of that extra space. Somehow about what you really want to avoid is to have your elements kind of like overlapping each other. In the case that there isn't enough space. So instead of going up, I'm just going to check. The size is going down because I know as it's going to get to the smaller phone sizes, things may get clipped, so why don't we try portrait first? Let's just jump right down to the smallest screen size, so still looks good, right? Let's flip it into a landscape and there immediately you see that our logo is hidden behind the cards. It's probably not what you want, even if you think it looks okay. I mean, you can leave it. In my opinion, I would want to change that, and I'm gonna show you how to change that. Let's go up one size just to see if the problem still exists. And it does. So let's go up. One more iPhone eight, and that one is okay, so we need to somehow address the situation for the smaller screen sizes. Before we can do that, I need to tell you about something called size classes. Size classes are basically categories of screen sizes because there are so many different devices and two orientations for each device that Apple decided to separate all of these into different categories of screen sizes. So when you're adding a constraint, you're able to say something like Add this constraint for all screen sizes. As in all categories of screen sizes or Onley, add this constraint for a specific size clause. So this gives us some flexibility to change the layout, depending on a specific size cloth. So let's say your app might look different on the iPad size class versus like a smaller device like an iPhone in each size class is actually defined by two parameters. Ah, height and the width. Now the height can be compact or regular, and the with can also be compact. Irregular. So, for instance, one size class might be compact with and compact height. Another size class might be compact with but regular height. And in the case where you don't care about size clauses and you want to add your constraint for all of them, it would just be any with any height. Now let's dive back into our Exco project, and I can show you how we can add a constraint for a specific size class. Now the first thing I want to draw your attention to is down here beside the view as iPhone S e. You can see what size costs this device falls under. So this is the compact with and compact height. The first step of this is just to identify which side classes you have to fix. So we identified that iPhone four s also has this problem and the size classes. Also compact with and compact height. Um, if we go upto iPhone eight, the problem doesn't exist, But this device still falls under the same size class iPhone eight. Plus, this one's a different size class because it's regular with and compact height. So what we're going to do in order to fix this overlapping problem is add some specific constraints or variations of constraints to this specific size class, so that if the user is using a device the iPhone S e or the iPhone for s in the landscape orientation, thes specific constraints that we add are gonna take effect, and they're going to correct that layout for them. So let me show you how to add constraints to a specific size class. So with the size class that you want to add your constraints into choose very for traits and then we want to introduce variations, and that's just the specific constraints that I was talking about. We want to vary them based on both the width and the height. Uh, and that's going to target this specific compact with and compact height size class. Now this section turns blue and it tells you which devices fall under this size cost and you can see that it's the iPhone 10 s in landscape, the iPhone eight in landscape, the iPhone S e and landscape in the iPhone four s and landscape. So any specific constraints you add right now to this size class is going to affect all of these devices in this orientation. Just keep that in mind. Now let's take a look at what sort of constraints we can add in order. Correct. Asleep. Let's click on the cards and button stack view. So the first thing I think that we can do is just to shorten up the space between the button and the two cards so you can see here that my default we have a spacing of 30 but we can click this little plus icon and add a variation based on a specific size class. So based on the compact with and combat height size class, let's add a variation so you can see the W. C in the HC sense for the comeback with and combat tight. We're gonna say when when we have this size class instead of 30 I want to do 20 so that's going to fix the problem a little bit. But I'm going to add a couple a couple more variations to completely solve the problem. I think the next thing we want to do is take a look at this logo. Um, and we want to make it a little smaller for thes size classes because the local isn't isn't a functional apart. So I think I'm OK with making it a little smaller. Now we don't have any sort of height or with constraints for this logo, but what we can do is add a height constraint for the local right now that will only take effect for this compact within compact height size plus, and so we're gonna with the image highlighted, we're going to open up this ad constraints button and we're gonna add a height constraint and you can see right now it has a height of 67. I'm gonna change that to or at a height constraint of 55. And when I add a new constraint now it's going to be on Lee specifically for this size class right here because this part is blue. If this part wasn't blue and it was just great, then any constraints I add, just like we were doing earlier in this lesson applies to any within any height. So it's like all the size classes. So let me add this height constraint of 55 to the logo, and it's only gonna apply for this size class boom. All right, so this little looks a little squashed down, but we're gonna address that in a second. The first thing I want to do is just show you the constraint we added, and how you can tell that it's on Lee applying to a specific size class. So let's click on this hype 55 constraint. Look on the right hand side and you can see installed. This means it's only applies to the compact with and compact height size class and up here , it says, there is nothing here. This is really the any within any height size costs. So this is unchecked. It's basically telling you that in normal circumstances, this constraint is not installed. It doesn't exist. But on this specific size class, it does take, affected is installed. So that's how you can tell. All right, so now we're going to address the situation or the problem that this logo is kind of squashed, and if you click on it, it all goes back down to the content mood. And this would be a great chance for me to show you the different content mood. So let me first change the background temporarily to blue so you can see kind of where the boundaries of that image you are so by default, set the scale to fill. As you can see, it pulls the image until it fills up that entire image of you, right? Let's check out aspect Phil. Now, aspect Phil will maintain the aspect ratio so it doesn't stretch the image. However, it's going to start enlarging that image until that image view is completely filled. And what that means is that some parts of your image might exist outside of the boundaries of the image view now that might be OK for you, and it might not be. It really depends on what sort of layout you have another option you can have. If you don't want things that are falling out of your image, you can enable clip to bounce, and you can see when I click on that parts of the logo just get clipped off right where the boundaries of the image you are. And so that's what clipped abounds means. But really, the setting that I do want here instead is aspect fit right, so this is going to maintain the aspect ratio. But it's on Lee going to stretch the image to the point where it fills the image view but doesn't exceed its bounds, so that I think this is a good way to see the differences between those content moods. So I'm gonna choose aspect fit. I'm gonna choose clear color as the background again. All right, so here it's starting to look a little better. You know, things aren't overlapping, but if you take a look at the bigger screen sizes, let's say this one right here where the 10 s there's there's another thing that I want to do? I want to bump this down a little bit, so I'm gonna choose. I'm just gonna go back to the smaller screen sizes first, just to make sure that oh, Exco might be alright. So I've got that internal error thing again, but it's just something we're gonna have to deal with. All right? So I'm still varying for traits. I'm still gonna move on. I think this is fine. Now I'm going to select my cards and button stack, feel I'm going to go into the size inspector. And remember, we added this. The vertical alignment can sort of vertical centering constraint, and we added a constant of 20 to bump it down a little bit. Well, with this ice class, I'm gonna add a variation Mean a click this little plus icon for a compact with and compact height size up classes. I'm gonna add a variation on going bump it up, bump it down even more boom. So to me that that looks a little more centered. So for these size classes, it's gonna do 30 below the centre and for other ones that's going to do 20 and then just double check that it looks okay on the other ones. So we've got the four s s e eight 10. So I'm gonna click Done, varying. And everything's gonna look good. Now you choose eight, you can just double check. Let's take a look at the four s I see Still looks good on the smaller screen sizes. And when we go into this specific size class compact within combat height, our size, class specific constraints and variations are jumping in to save the day. Now, if you're having trouble putting this layout together, make sure you grab my ex code project below and compare it with yours. See if you can find any differences. And if you're still stuck, just leave us a comment and we'll jump right in to help you now want to turn it over to you . Now that we've built this user interface, was it harder than you thought it would be or with it easier than you thought? Let me know by leaving a comment below. Now, in the next lesson, we're going to dive right into swift programming. So go ahead, click into Lesson five and I'll see you there 8. Lesson 4 Exercice: Hello one. Welcome to the lesson for exercise. All right, So what I want you to do is download the assets for this user interface here and start up a new Exco project and try to put this together. Um, I would pause the video at this point and attempted yourself. And if you get stuck or you can't position something correctly, then come back to this video because I'm gonna show you how to do it right now. All right, So here, I've got a brand new Exco project and we are going to choose single view app. I'm gonna name this lesson for exercise solution after building the war card game user interface. I don't think that this would be too hard for you, but it's just extra practice. That never hurts, right? We're gonna go into the asset library, and we're going to grab all of these assets and put them in. Now there's only three things to position and plus a bunch of labels, so this is probably gonna be relatively quick. All right, So the first thing we're gonna do is add an image you By opening up the object library, you can also click out kind up there to do that, we're gonna set this image to be the image of the girl, and I'm going to make it. Um, I'm not going to constrain to margins. Um, and I'm going to make it zero from the top left and right. The reason why I'm hesitating is because I do. I do probably want to constrain it to the safe area, and we're gonna set an image to that guy. So click on the image view and then for the image, choose the girl. You can put her like that, except her face looks stretched out. So we're gonna change the content mode, because by default, it's going to scale it. We're just going to say, um, aspect fit. And so that's going to set that image. You like that? And then we are going to let me see if there's anything else I might actually want to do top instead. So it it was bothering me that this tip wasn't reaching to the top there. So I'm gonna choose top instead, and we're gonna want to add another image. You Let's just add these first. So let's put that right there. That's gonna be the close button. So go ahead and shoes, clothes, and we're gonna align it to the top and the right. So we are going to concern to margins, and we're not. Leave it rather to the safe area. We're going to say 20 and 20 20 from the top and 20 from the right. So our X is there and then we are going to add our little chat label or icon. Do that, and this one's gonna be a little different. So why don't we First, let's add 20 from the right, all right? And the bottom is going to be, um, equal to the image. So that's what I'm going to say. Uh, so this one, if you enable the bottom here, uh, you're not gonna be able to select the girl. And so what I would recommend doing instead is you can always So here's one way to do it. And I don't know if I showed you this exactly. I don't think I did. But you hold down control and you can click from this chat icon, and you can draw blue line to the girl image. And when you let go, you're going to be able to specify a constraint relative to that element. So I'm going to choose bottom right and what that does. Let's go check out that constraint. So if you have your chat icon, click selected, go to size inspector, go down and you can see this constraint that gets added. Double click it. It's gonna bring you that to that constraint. So the chat bottom is equal to the girl bottom, so they're both aligned in terms of where the end at the bottom. What I'm gonna do is change this constant to negative 20 and that will, like, push it up a little bit. That's going to say, I want the bottom of the chat icon to align with the bottom of the girl image but minus 20 so that's gonna bump it up a little bit. That's how that's how you get to do that. Let's add a label and again, that's one way of doing it. There's always multiple ways of doing things, so let's add a label here and let's add let's give her name. So I think I called her Joanna before. I don't know if I spelled it exactly like that. We're gonna change the font toe a custom one. And I don't even remember if this was the right thought that I chose something like that and we're not Put it right there and we're going to do, uh, top left and right, so the top is gonna be 20. The left is also going to be Whoops. I'm editing the height now, So when you start editing this check box and you click out of it, make sure that that's unchecked or else you'll end up adding that constraint by accident and this one on the right hand side of that label, I want to make it relative to the close button. I'm gonna say 20. That's just going to stretch out that label. Um, however, see what this is said the horizontal hugging priority. So this is what actually we talked about in the Lesson three exercise. So it's basically saying when there's too much space, which of the two elements is going to expand to fill up that extra space because there is a property under the size inspector for all of these elements called content hugging priority , and we're gonna we're gonna look at the horizontal aspect of it. So we're gonna It's basically saying of these two elements that are aligned here. If there's too much horizontal space, which element is going to expand to fill up that space? And of course, I would want the name label right because the names could be longer and shorter. And so the tricky part is that content hugging means which element is going to not expand. So the element with the the element with the highest content hugging priority is going to retain its dimensions, while the element with the lowest content hugging party is going to end up expanding. So what I actually want to do if I want this close button to maintain its dimensions, I wanna increase this guy's priority. So gonna bump it up and you can instantly see that this label now expands to fill up that horizontal space. Okay, so let's add a couple more labels here gonna add a label down here, and this one is Oh, I see. So we're gonna do left top and right, and the top is going to be relatives of the girl. And let's do zero left is going to be 20 and right is going to be 20. And we're gonna say that this label I like to we're going to change this font and make this a little bigger. And then we're gonna add another label down here, Say that this one's gonna be all four. So the top should be relative to the I'd like to meet you Label and the left. Yeah, that's fine. All the rest is fine, actually. All right, so the top let's say it's 10 points from that top one, but it's 20 you know, 20 from the left, right and bottom. Boom. So we have something like that and this label, we can make it multi line. And then we can also add some text, like some sort of gibberish. Uh, let's see. See why it's not truncating here. So got sent vertical content hugging priority. Okay, so same problem as up here, except that this time it's on the vertical axis. So we're going to say that in terms of all of this stuff, this'll image will probably have the highest vertical hugging priority. So at 2 55 let's say this label is going to be a to 53 and this one is gonna have the lowest priority because I want I want this guy at the bottom to expand to Philip any remaining space. All right, so this image is going to maintain the dimensions, has the highest priority at 2 55 This label is next. It's gonna maintain its shape in terms of its second and priority. And this guy has the lowest content hugging priority. So if there's extra vertical space, that's gonna be the one that stretches out. So there you have it. I hope you learned a lot from doing this exercise, and I'll see you in the next lesson. 9. Lesson 5 - Swift Basics (I): hi and welcome the lesson five in this lesson, and the next to you're going to be learning the basics of the swift programming language. This is the stuff that you're going to need to know in order to complete the work heart, game app as well as our future APS that we're building together now. I know that this coating part can seem intimidating at first, but I really want you to stick with this. Really pay attention in a highly recommend that you open up X code on your own computer and type out exactly what I'm showing you on the screen. By doing that, it's really going to reinforce the language structure and the key words that I'm showing you. There's really no need to memorize anything at all. I guarantee you. By the end of Lesson 10 you'll be writing your own swift code. So let's get started. So go ahead and start X code, but we're not going to create a brand new X code project instead of we're going to create a playground. So click get started with a playground, or you can go to file new and choose new playground as well. They're gonna get a screen like this. Go ahead under Iowa's Choose Blank, and we're going to save this. Just gonna save it on my desk. Talk now. First, let me tell you about what a playground is. It's not a full fledged exclude at project. Instead, it's just a lightweight file where we can try and test out some things on. This is perfect for us because we are going to just be running and testing some swift code . Now let me give you a quick tour of the playground and the bare essentials that you need. So this big part right here, where you're writing the code, that's the code editor. That's where we're going to be testing out all our coat across the top. We have the status bar now, Mind says, Ready. It's ready to run and test, um, code for you. It might be spinning, and it might be doing something in the background, but when it finally says ready, then you're able to run your code. Now on the right hand side, right here, we don't see anything. What I want you to do is just move your cursor to this line of code in Lane three. Oh, that's actually one thing I want to mention first. If you don't have line numbers, go to X code preferences, go to text editing and enable line numbers. So that's one of the common questions that I get. I don't know if this version of X Code Dave turned on by default, but if they haven't now, you know. So, yeah, move your cursor down to line three and you see lines 12 and three highlighted and blue With this big blue play icon, Go ahead and click that. What that's going to do is basically run the lines of code up to that point where you click that button. So it's gonna riot. Run the code lines. 12 and three. You're going to get some sort of output here on this right hand side. This is the preview column, and yours might look a little different. So I don't want you to focus too much on the output on this preview pain. Depending on what version of X could you have, it could look different. Instead, what I want you to do is click in this upper right hand corner hide or showed the bug area or the consul area. And in this lesson, we're going to be writing swift code toe help put things into the consul areas. So I want to focus on the output in the consul area here at the bottom rather than the output on the right hand side here in the preview, because that could look different for you. All right, now, let's take a look at the code in here before I explain to you what the's import Barkey words are. I want to talk about comments. Now, if you've programmed before in another programming language, then you'll know what these are. But if you're completely brand new to coding that, I think this is a very important part to start off with. So let me show you what a comment looks like. I'm going to hit enter to start a new line, and I'm going to add it to Ford. Slash is like that, and then I can type a note for myself. This is a comment Now. Mine looks like this great out text right here. Depending on what sort of color scheme you have going on, this could be green and could be another color. That's not the important part. The important part is that anything after these two Ford slash is this is not going to be run as code. Instead, it's going to be treated like a note or remark for yourself to, and you can write anything in your comment to remind yourself maybe why you wrote that piece of code or what that piece of code does. When you're working with a team of people, it's crucial that you leave comments in your code so that when your teammates see your code , they understand your reasoning behind it, and they understand why you wrote it. Now, if you're working by yourself, it's also important to leave yourself comments because if you leave your project and you come back months later, you won't remember why you wrote that code unless you leave yourself comments to remind yourself. All right, so let's talk about this first line of code where it say's import You. I kid, now we're gonna talk a lot more about you. I kid in the future, but for now, just understand that you like it is a library of code that Apple provides for us to build apse with it. It contains useful elements like buttons and labels and templates of code that we can use to speed up our APP. Development. Import is a special key word to say that we want to use the you like it library in this file. Now let's talk about lying for this var str equals hello playground. In order to understand this, we need to first talk about variables in an APP. There's a lot of data being passed around, and you need a way to keep track of it. Well, that's what a variable is for. You can think of a variable as kind of like a sticky tub. You know those ones where you can write something on it and stick it to a piece of paper to keep track of it. Well, let's take a look at the line of code below, which is declaring a new swift variable and assigning some data to it and see how that compares to using a sticky tab and sticking it on a sheet of paper so far is a special swiftkey word that is declaring a new variable. Using our analogy, you can think of this as creating a new sticky tub str is the name of that swift variable? In the case of our analogy s, here is what you write on that Stick it up now. Hello. Playground is the piece of data that we want our variable to keep track of. In our analogy, that would be the sheet of paper that we're intending to stick the sticky tab on. And finally, the equal sign is us actually assigning that piece of data to that variable. In our analogy, that would be like sticking the actual sticky tap on the piece of paper. Now let's go back to our playground and take a look at that line of code again. Now this line of code makes a lot of sense, right? We are declaring a new variable. Str and we are signing the piece of data Hello, playground to that variable. Now let's consider another scenario using the same analogy of the sticky tab. What if we decide to peel off that sticky tab and stick it on another sheet of paper? Well, we can do the same thing with our variable, except that there's just one catch. Imagine that when you were writing the name on that sticky tab. Str you wrote it with a permanent marker. And so when you peel off that Steve tap and stick it on another sheet of paper, it's still saying, str on that sheet of paper. Well, we can do the same thing with our variable here. We can take our variable str and we can assign another piece of data to it. So let's say another some data and what you can do is use this blue icon here and let's just run our code and you should get some sort of preview there. Now Notice that online. Six. I don't have to write var again, because far was just to create that variable in the first place. When I use it again, I can just refer to it by the name, and you might notice that sometimes I say create. That's just so that you can understand it a little easier. The proper terminology is declaring a variable. So now let's write some code to output some of this data into the consul area below Online five. Here, Let's right the key word print, and you might notice that X code pops of this little auto complete menu. And that's just Exco trying to guess what you're tryingto type and presenting you a bunch of options to make your life easier. Now, while you can select some of these options, that's not what we're going to do right now. Open up around bracket and we are going to type str. And if you don't have a closing round bracket, you should just type it. What we're gonna do now is just bring your cursor down here to line seven or the end of your code filing. Click run and you should see hello Playground down there below now. Noticed that it doesn't say some data, and that's because we are printing out the contents of str at Line five right after we assigned Hello Playground. So it's showing you the data the str is pointing to at that point. Now, if we ran another print statement here, click run. You'll see this print out again, but this time it say's some data, which is what we assigned to it online. Six. Now the next thing we're going to talk about are constants. Constants are like variables except that once you assign some data toe a constant that's it . You're not gonna be able to sign anything else to the constant now, using our analogy that it's like super gluing the tab to that sheet of paper, there's no way you're going to get that tab off. It's bookmarked to that sheet of paper, and that's the pace paper. It's going to reference forever. The syntax for declaring a new constant kind of looks like what we did with the variable, except that we use the let keyword instead of the var keyword. Now let's go back to our playground and we'll try it out. Now let's try declaring a constant at the bottom of our playground. They let s t r equals more data and give it a sec, or you might have to run your playground. But when you do, you're going to get an error, and it's basically saying that you cannot use str again because you're variables and constants must have unique names, even between two variables or between two constants. You have to have unique names, so why don't we change? Ask your to corn and it has to have unique names just on a side note, because otherwise it would be very, very confusing eso. We have corn here and let's try modifying that data for that constant and give it a sec. And X Code is going to tell you that you cannot assign another value to constant or con because let is a constant so you can actually do this. But with variables we can write, This goes back to us saying that, Constance, once you assign a piece of data to it, that's it. So now you might be wondering, When would you use a constant versus variable? Well, the general rule of thumb is that you should be using constants whenever you can. But however, if you're keeping track of a piece of data that you expect might change, then you would use a variable because a constant is a lot safer, right? Once you assign a piece of data, you can be guaranteed that that's not gonna change on you. So, in fact, even inside of X code when you're programming, if Exco notices that you use a variable and you assign a piece of data to it and you never reassign anything else to it and it doesn't change, it's going to say, Hey, why Don't you change this into a constant? You're gonna get that reminder. So the general rule of thumb again is to use Constance. Andi, If you realize that that piece of data needs to change, then you can change that constant to a variable by just changing that. Let keyword toe of our keyword. All right, so let's erase this line here. Now. One other thing I want to point out, and you might have noticed this is that all of the data that we've been assigning toe are constants and variables thus far have just been this text data. Well, there are actually other types of data as well, and that brings us to our next topic, which is data types. The pieces of text that we've been assigning toe are variables and constants or called strings. Now, I know that's kind of a strange name, but you can think of it as a string of characters, right? Well, they're just basically pieces of text. Next up, we have Boolean or bull for short, and these represent true or false, great for pieces of data that can only be one of two values. Now, don't worry. We're gonna try all of this out in the playground in just a second. But next up, we have integers or int for short, just like back in math class. Integers represent the whole numbers in the positive to the negative range, including zero. Now you might ask, Where are decimal numbers? Don't worry, I've got you covered. Float is what you're looking for and these represent are floating point data, in other words, are decimals. I've just showed you four data types, but there are actually more, but these four are great to start with. I have a swift cici at the end, which are going to show you the rest and also worksheet for you to practice what we've learned in this lesson. Now let's go back to our playground and try this stuff out. All right, So now let's try some of those data types that we just talked about. That's type in var B equals true and let's print to be Now, let's try running this line of code here. You're going to see true appear down in the console below. True is a special key word that you can use to specify a Boolean value. We can also change this to false. Let's run this again and you can see false piers on the console now that were running more code. I want to point your attention to a special feature of the playground and down here in this stop playground. But you can actually hold it and choose automatically run. When you do that, your playground is automatically going to execute the code in your playground automatically as you're typing. So you never have to click on that run button again. The only problem is that sometimes play guns can be buggy. So if you're experiencing a lot of crashing or it's not running your coat, then you're gonna want to switch back to manually run, and you're gonna want to click on that run code button manually. So we're gonna leave it automatic for now and see how how it goes. If we're experiencing problems that are playground, then we're gonna set it to manually run instead. All right, so now let's try out integers. That's too far. I equals 32 that is going to declare a new integer and assign it 32. We're gonna sign it. Zero. That's also an indicator we're gonna try assigning, let's say negative 10. It's also an integer. Now let's try, um, the last did it have we talked about which is float, and it's gonna be some sort of decimal number like that. Now there's one important thing I want to talk to you about, and that is that there are actually two types of decimal numbers. So the first decimal number data type is float like we talked about. But there's also something called Double. That's another data type that represents decimals, and in fact, double is a lot more precise than float. That means that a double data type in store a lot more decimal points than afloat data type can. And when you're working with the swift programming language, double is actually the default data type. Now the thing is, it's important to know both float and double because sometimes when you're working with third party code libraries or even some of the library's inside you, I kid some of them expect float data types, and some of them expect double data types. And so it's important to know both. And now you know, now the next thing I want to talk to you about is the fact that variables and constants can Onley store one data type. Now what do I mean by that? I'm going to demonstrate. So here we've declared Variable called I, and we've assigned it an integer. And then we re assigned it zero and negative 10 which are also in jitters. But what if suddenly I decide to assign it some sort of decimal number? Right? We know that decimal numbers is that's not considered an integer. So, in fact, right here the playground is telling us it's era ring out, and it's saying that you cannot assign a type of double to your integer variable. Just can't do that because the variable I only accepts integers. Now here's the thing. Where did we say that variable? I can only accept injured your data types. Well, funny thing is that we didnt explicitly say that what happens is that when you declare a variable or constant and you assign a piece of data to it, that first piece of data is it's going to take that data type and in for that that's the data type that variable in store, and that's the only thing it can store So the very fact that we assigned 30 to being an integer to variable I from that point on variable, I can only store into your types. That is why we cannot. We cannot assign this double data type value to I. Same thing goes for this up here because we assigned the Boolean value false to be now the variable beacon Onley store Boolean types can I can assign true to it what I cannot assign . He's a string to it. I cannot assign a number to be. And so we're gonna get these errors right here. All right, so we've just experienced a crash on the playground. Okay, let's just go back toe manually, run and or runner code right here. And that should be okay. All right, so we're back to being good. Now, there is a way to explicitly say that a variable construe or a certain data type. This is how we would do it. So after your variable name, you would write a colon and then you would write in the data type that you want that variable to store so you can write like that. You could do that. Appear you could do that, and then for this one, you could either type float or use thesis. Swifty felt double, so I would recommend using double when you can, unless you're using some sort of library that requires you to use some float data. So here's a funny thing. Even if this is the first piece of data, you it sign being float simply because you declared your variable as an integer. You know, you've explicitly said that variable I is an integer data type. You cannot assign a double data type to it. So those were things that I wanted to point out to you. I know it's a lot to absorb. I would recommend getting the recap notes and just reviewing it and also doing the exercises. It's going to help you solidify these things in your head. So far, you've learned about variables and constants and how they can be used to store data. You've also learned about data types said just in string, Boolean and Float. Now all of this is going to be in the swift cheat sheet, which you can grab below as well as the stuff for the next to swift lessons. I also have a worksheet for you to try to practice using swift variables and how did perform math operations on them. So make sure you try that and get some extra practice and not want to turn over to. Are you a beginner to programming or have you coded before in swift or another language? Let me know about leaving a quick comment below, and I'll see you in Lesson six. 10. Lesson 6 - Swift Basics (II): Hi and welcome to Lesson 6. In the previous lesson, you learned how to write some basic Swift code. Well, let me ask you something. How does the user usually interact with an app? Well, It's usually they tap on something on the screen, let's say a news headline. And then the app gives a reaction, such as showing that news article, action and reaction. Well, that implies that when the user takes an action, depending on what that action is, the app needs to react accordingly and run the appropriate block of code depending on what the user is doing. So we need a way to organize our code into bite-sized chunks so that when the user takes this action, we run that chunk of code. And when the user takes that action, we run that chunk of code while Swift has something called a function. And this is basically a block of code where you wrap it up with a name. And when you want to run that block of code, you can just call it by its name. So let's open up a new Xcode playground and see how we didn't declare some functions. All right, so we're going to create a brand new playground here, and we're going to try out these functions. So let's get started with a playground under IOS. Let's choose blank. And I'm just going to save it on my desktop and call it my playground too. All right, so we're going to just go down here, create a new line, and we're going to type in F and C space. Now that keyword is used to declare a new function. Next part of the function is the name of the function. Now, this is important because whenever we want to run the code that is inside this function, we're going to call it by this name that we're going to give it right now. So I'm going to call this function, say hello. Now the next part of the function is a pair of rounded brackets. So find that on your keyboard. Typically it's right above the nine and the 0. So you're going to have to hold down Shift. And I'm going to type those two rounded brackets. Now. Inside those rounded brackets right now, we're not going to put anything in there. But you can't have something called parameters, which is something you're going to learn a little later in this lesson. All right, now next we're going to hit space and we're going to open up a pair of curly brackets or squiggly brackets. Some people call them and you gotta find these on your keyboard to, for my keyboard layout, it's above the square brackets. So I'm going to hold down Shift and type in a pair of squiggly brackets or curly brackets. Go inside it and press enter a couple of times to create a few lines. You're going to write your code for your function in-between these two curly brackets. Think of it as the guts of the function. So whenever you call, say hello, the code in-between these curly brackets, it's going to get run. I'm going to print out in here. Hello. All right, Now let's go outside of the function. And by outside, I mean, after this ending curly bracket, we're going to just call the function by its name, say Hello. And notice that autocomplete already brings this up, but let's type it out just for extra practice. So we're going to use the name of the function followed by the curly brackets. All right, now let's run this line of code. You'll see down here, it's going to execute this print statement and it's going to print out hello. If you don't have this tray at the bottom, you can open it up like that. When you write a function, you're usually writing some code to perform a specific task. In our example before you wrote a function to display the full article. And when the user taps on a news headline in the app, you're going to call that function to display the full article for that headline. Now, let me present another scenario. What if there are 10 news headlines in your News app? Are you going to write 10 different functions, one to display the full article for each headline. Of course not. Furthermore, the news changes every day so you wouldn't be able to write a function to show a news article that hasn't happened yet, right? Instead, you're writing a function to do the work, to present and display a full article to the user. That function doesn't care or doesn't know about what sort of article it's going to be presenting in displaying you as the coder. Basically pass that information into the function. When you call that function, you can do this with something called function parameters. Remember those rounded brackets in the function call? Well, you can specify the parameters in-between those rounded brackets that indicate what sort of data you're passing into the function when you're calling it. In the example below, we declared a function called say hello to. In the rounded brackets you have a parameter called name, and it's of the data type string. Now that kinda looks like a variable declaration without the var keyword. Whenever you call the say hello to function, you're going to have to supply a piece of string data into that function call. Now let's jump back into our playground and see this inaction. All right, Before we jump into an example with parameters, let's first add a comment up here, and let's call this a basic function. Remember, this is something you should get into the habit of doing. And I also want to show you if it wasn't clear how to use the autocomplete feature because trust me, you're gonna be using it a lot. So why don't I type say hello, you're going to notice that pops up right here. Now you can either hit Enter right now or you can press up and down on your keyboard to select a different one. And you can even use your mouse and you can scroll down the list. And some here I'm just going to double-click it. All right, so now let's do a function with parameters. So again, we're going to type in FU and see space for declaring a new function. And this time I'm going to call it, Say hello to. And we're going to specify the rounded brackets just like before. Except that this time I'm going to move my cursor inside the rounded brackets and we're going to put a single parameter in here. Let's call this parameter name colon. We're going to specify the data type. It's just like almost the like declaring a variable, like we did in the previous lesson. Alright, so now we're going to open up a pair of curly brackets and we're going to add some space in there. And here we are going to print out the name that gets passed in. In the way you can do that is just by referencing that parameter name. So we, since we call it name, we can just say print name. So what ever data gets passed into this function when it gets called, we are going to be printing it out into the console. So right now, even if we run the code, it's not gonna do anything. We actually have to call the function. So here below the function, let's type in SAI, and you can see that now autocomplete shows you the second function that we just wrote. So go ahead and select that and press Enter. And this highlighted blue part is telling you that you need to specify a piece of string data along with this function call. So why don't we go ahead and type in Tom there. And then let's run this line of code at this point. So you're going to see Tom there, Right? And that's just a result of us passing this piece of data into the say hello to function. So that's going to come in through here. And then it's going to take that string data and print it out to the console. And that's why we get this result down here. Now what if we wanted to say hello Tom instead? Well, we can't do that. And I'm going to show you a really neat way to do that. So let's erase this name here, and instead, let's print out a string called Hello space. And we can actually insert that name parameter into the string in the way you do that is backslash. And then type in a pair of rounded brackets. And inside the pair of random brackets, you would just put the name of your parameter, variable or whatever you want to insert into the string. Now let's run this function call again. Now you get hello tongue. Now in this example we've done one parameter. You can actually include multiple parameters in to your function. All you would have to do is inside the rounded bracket after the first parameter, just type in comma and now you can require a second parameter. So let's make this one age and this datatype for the age is going to be an integer. So immediately, the playground is going to complain that this function call is no longer valid and it's right, it's missing an argument, it's missing this parameter called h. So what I'm gonna do is just completely get rid of this line. I'm going to type in a y. And you can see here that autocomplete has detected, we've changed that function. So double-click it or press Enter, and we're going to fill in the parameters that are needed. Now here's a neat trick as you're filling in the parameters here. If you press Tab on your keyboard, it just automatically jumps to the next parameter that you need to fill in. So that's a shortcut that's going to help you. So let's type in something like 20 years old, and let's run this code. Now. Again, it just says hello Tom, because we haven't included the h parameter in this print statement. So why don't we modify this piece of text. You are backslash, rounded brackets. Let's insert that age, years old. And now let's run this function again. And now you're going to see down here, hello tom, you're 20 years old. Now you can actually specify more parameters, but I wouldn't go too, too crazy with this in the future as you're going to get more advanced with Swift, are going to learn ways to combine pieces of data together into one parameter. And so you Have a long, long parameter list that you're going to require. But for now, if you wanted to include 2345 parameters, just to play around, feel free to do so it's going to be good practice. There's one thing that I want to mention and that is that you can actually omit these parameter names right here. So it's going to I guess, save you a little bit of typing. Sometimes it can be nice to have them so that it's really clear what sort of data you need to pass in. But let me show you how you could do a function call where you can omit this. All you would need to do is back in your function declaration here. You would just include an underscore space in front of that parameter. So we're gonna do the same thing with the age here. And then we're going to get rid of this line. In fact, Xcode is now, or playground is now telling you that you don't need these things. So let's get rid of this line. And again, use auto-complete. And you can see there's our function visually here. It doesn't look any different. But if you press Enter, you can see that this whole thing is highlighted now. And when you add your parameters, right, it's just going to look like that for your function call. So what you're actually doing here by adding this underscore is you're omitting something called the argument label. Now I'm not gonna get too much into it right now because I don't want to confuse you with a lot of knowledge that you don't need right now, but just know that that's something that you can do. I will link to some resources in the description if you want to read more into it. But if even if you don't, as you're gonna get a little more advanced with Swift and you're going to learn more about functions. You will come across this knowledge anyways. So it's not nothing to, nothing that you need right at this moment. Now you know how to write functions which expects some sort of input data to work with. Another great use of functions is to take that input data, process it, and transform it, and then return it back to us. Now functions can do this using the return keyword. In the function below. It takes an integer input, it adds four to it, and then it returns the result back to us. Now notice that after the rounded brackets There's an arrow followed by the datatype int. Now this describes the type of data that the function will return when you call it. Now let's go back to our playground and we'll try this out. All right, so now let's try out a function with the return value. So why don't we just type in a new common here. Let's return value. And I'm going to create a new function by typing FUN see space. And then I'm going to call this function add 4, 2. And you guessed it, we're going to add a parameter in here. I'm going to call the parameter x. And it's going to be an int datatype. And here is where we get to the return value parts. So we're going to type in a dash, a greater than sign space. And here we indicate the data type of the value that is going to get returned by this function. So since we are simply taking in an integer, we're going to add four to it. It makes sense that what we're returning out of this function is also an integer. So that's what we type in there. And then we are going to hit space and write in our curly brackets there. And I'm gonna open up the curly brackets a little bit so we can type some code in-between them. And what we're going to do here is we're going to create a brand new variable here. Let's just call this sum. And the sum is going to be equal to x, which is the value that gets passed in that integer. And we're going to add four to it. Now, from here you can see that the playground is complaining that we're missing the return in a function that is expected to return an int datatype. And it's right because we need to return the sum. The keyword that we use is actually just return. So type in return space and we are going to pass back the sum. So if you let, let Xcode run, or maybe you can run your code at this point, you're going to get rid of that error. So let's try this out. Let's try calling this function. Add four and autocomplete brings it up. Let's hit Enter. Here. We're going to pass in, let's say 10. Let's go ahead and run this function. At this point, we don't really see anything. I mean, you see some, you see the result in the preview here, but like I said, we're going to pay attention to the console. Nothing gets output here. Well, where did that 14 go? Right? What's actually happening here is it's passing in 10 into this function, right through this parameter. Then it's adding 4, and then it's returning the sum. And we are actually responsible for capturing that data. So in fact, what we have to do here is we have to type in var, let's say result. Equals the execution or the return result by executing this function. So if we print the result and we run this code, we're going to see 14 down there in the console. So just to run it through one more time. What's happening here is we're executing this function. We're passing in 10 as a parameter. Then this code inside this function gets run. It's going to take 10, which we passed in. It's going to add four to it. It's going to assign it to the variable sum. And then it's going to return the data some, right? And that's going to come back here. And that sum gets assigned to result and we're printing the result. Now one question you might be asking yourself now is why do I have to use return values? Why do I have to use this return keyword here? Why can't I just access some right here? Why can't I just say print sum? So why don't you go ahead and try that and run your code. And you're gonna get an error that says Use of unresolved identifier SUM. And if you scroll up here, that's the same error message. But it's basically saying that it cannot find anything called sum. Well, what do you mean? We have some declared right here inside this function. This brings me to my next topic, which is variable scope. You see the code that is inside this function right here, is inside of its own scope. So any variables you declare in here only exist within that function. And that's why in order to get that data out, you have to use the return keyword. What I find helps beginners to grasp this concept is by thinking of the code inside of the function as existing in its own little bubble. So anything that you know, the code that you write here, the variables that you declare it inside that function is in its own little bubble. And in order to get that data out, you're going to use the return statement here. Now another thing I might add is that each function has its own scope or its own bubbles. So if I, let's say declared another function, Let's just call this C. And I, you know, I tried to print some in here. I'm also going to get an error because some exists in this function's scope. I can't access it anywhere else. Each function has its own variable scope. Now I know that this variable scope concept is a little bit abstract, but what's going to happen is that as you're writing more swift code and you're building your apps, you're going to run into issues where you're trying to access this variable inside the scope. And then you realize that you can't. And it's just something over time that you're going to realize and it's going to click if it hasn't already clicked for you. So I guess what I'm saying is that give it some time and don't worry if it's kind of confusing to you right now on what I'm saying is that as you're writing more code and you're building your apps, your writing more functions. These things are going to fall into place for you. So let's erase that test function and let's address this thing. It's so annoying. This variable sum was never mutated, can consider changing to a let constant. So this goes back to what we talked about in the previous lesson. When should you use variables and when should you use constants? Well, I told you that you should default to using constants. And then if you find out that you need to change up that data and you get an error to say that you can't change it up, then you can consider changing that led to a var and using a variable instead. So here, Xcode is warning you that hey, you know, you declared sum as a variable, but in fact, after you've assigned some data to it, you never ended up changing it. So why not use a constant? And so Xcode is being very helpful, not annoying. In fact, let's change that to a let, and we're all good. Now before we jump to the next lesson, one last thing about auto-complete. So I want you to notice when we typed in add four to this right here, this is the return value. So when you're looking through different functions to call, this is very handy to understand what sort of data this function returns. What happens if we try to now call one of these guys, say hello to or say hello. In fact, these guys, they don't have return values, right? So what happens when we try to autocomplete that? Well, it says void. Avoid basically means no return value. So that's what it means. And why, why does void say that? Because in fact, let's go back to the basic function here. In fact, right here, the return value is actually void. It's just that we don't have to type it when it's void. So you can actually specify a return value of void, which is basically no return value and you don't need a return keyword. So that's just a neat little fact. When you don't need a return value, you don't need to specify this part of the function declaration. You can kind of omit it. But the interesting part is when you use autocomplete to call this function, it's still says that the return value is void. All right, so today you learned about how to organize code into functions. You've learned about input parameters, which let you supply functions with input data. You've also learned about return values, which let functions return data back to us. And finally, you've learned about variable scope, which is basically all of the variables and code inside of a function only exist within the scope of that function. Believe it or not, there's still a lot more to functions, but what we've covered so far is more than sufficient for now, I've got a worksheet for you to practice in solidify what you've learned. So make sure you grab that. And I highly recommend that you go through it. And now I want to turn it over to you where two lessons in with one more to go. Do you feel like you've got a grip on things so far? Let me know by leaving a yes or no below. And if you're still confused, make sure you ask your questions right now because if you go on, then you're just going to get lost. We're going to jump in and we're going to help you out and make sure that things are clear in your head. All right, so with that said, I'll see you in the next lesson. 11. Lesson 7 - Swift Basics (III): hi and welcome to lessen seven. So far you've learned some basic swift code and how to organize that code into executed will blocks called the Functions. While in this video you're going to learn how to organize a group your functions into what's known as classes. Now, before we go on, I just want to say one thing, and that is that learning something new is hard. Seriously, I know firsthand because I failed that learning Iowa's programming when I first started. So give yourself a pat on the back for coming this far, especially if you've never coded before. Now I know you might be asking yourself constants and variables functions. Why do I need to know any of this Will I guarantee you that after this lesson and into the next, all the pieces are going to start to fall into place for you because we're gonna move back to our Exco project. I'm gonna point out all the different pieces that you've been learning about in the last three lessons and you're gonna have a eureka moment. You're going to see that Exco project in a different light. So I want you to pay extra careful attention in this lesson because it's the last one before we move back to our work Hard game exclude project. All right, let's do this. So on the screen, I've got two functions right now. They don't really do anything, but one is called Cruz, and one is called Thrust. So let me explain why Imagine yourself as an engineer for NASA and you're writing the code to power one of their rockets. Now, all of the code for cruising you would put inside the cruise function and all of the code that are going to turn on the rocket thrusters. You're gonna put inside the thrust function now, just like how you organize that code into those functions you conferred other organize these two functions into a class because potentially you could have many, many functions, right? So, ah, class, you can use it to group together, functions that kind of serve the same purpose or the same goal. So let me show you how to declare a class. First of all, use the class keyword and then you would give the costs of name. So I'm gonna call this rocket. No, I'm gonna call it spaceship just because I like that word a little more. Now you open up a pair of curly brackets and I am going to put them space inside the curly brackets. And I'm going to highlight these two functions in a press command X to cut them. And I'm going first Command V and their paste it. So what we have now is kind of like three levels of organization, right at the top level. We have this spaceship, Kloss, Inside the spaceship class, we have two functions, Cruz and Thrust. And inside each of those functions, we have the code to essentially carry out those abilities. Now there's one distinction I want to make, and that is that when you move the function into a class, those functions are now called a method of that class. So I know it's a little confusing because nothing's changed except what you call them, right when when there's a standalone thing, they're called functions. But when you put these functions inside a class, they are now called methods of that class. But it's sort of interchangeable. If you say you know the cruise function of the spaceship class, people will still understand what you're saying But I just want you to know that the correct terminology is that Cruz is a method of spaceship. All right, just a little distinction there. Let's illustrate this in the diagram. First we had functions, and then we put them inside of a cross, and now they're called methods. I want to talk about variable scope for a second. In the last lesson, you learned that declaring a variable inside of a function, it only exists within that functions scope. So, for instance, if we declared a variable called name and function eight, we can't access that name. Variable in function beat. Because function B has its own scope, the same goes for the reverse. If we declare a variable and function be, we can't access it in function. Eight. Because that variable would only exist in function. Bees scope. Now get this. The class itself has its own class scope. You can actually declare a variable inside class but sits outside of any particular function. Now this variable exists inside the entire scope of this class. Since function a and function be are also inside the scope of this class, they can actually access that variable. Finally, here's the kicker when you declare her variable inside the class. But it's outside of any functions, like what we've done here. It's actually called a property of that class. Now let's see this in action. So let's go ahead and declare a property of our spaceship here. Now it's going to be inside of the class, right? That's the starting curly bracket, but it's going to be outside of any of these two functions. So I'm gonna put it up here. I'm going to call it a fuel level, and I'm going to assign 100 to it. Now, this fuel level property is inside the scope of the class, just like how these two functions are also inside the scope of the class. So I can actually access the fuel level property from here. See, I can print it out now. It's not going to actually print anything because we need to execute these functions, and we're gonna do that a little later on. But just from the fact that actually, you know, let me run it just to show you that the playground isn't going to throw any sort of errors , right? So it can access this property however, let me declare a very building here. Let's just say bar test is equal to true and make it Boolean right? Um, this variable because it's declared within the cruise function, it only exists inside the scope of that function. You know that little bubble, so I cannot access it from here. It's a print test and you're going to see that X code is going to throw an error. Let's run that. So it's saying that it cannot find test because it only exists within this scope. So now let's go ahead and erase this test cohere. And like I said before, if this scope thing is a little bit confusing, it's going to come with time. I promise you that as you're going to write more code, you're gonna understand this stuff a lot more. There's gonna come a point where these things finally just like Click for You. All right. Now we're gonna take a giant leap, and I'll explain to you how classes are used. Now it's going to require a little bit of abstract thinking. I also want to add that in my six years of teaching IOS app development, this is the single hardest concept to understand for beginners who have never coated before . But once you understand this, then you will have crossed the biggest hump that so many people give up that alright, I'm done talking. Let's do this now. Let's use the same analogies we used before. Suppose we have some data and we have variables and constants as sticky tabs. Now we have functions that encapsulate these pieces of code, and let's say that functions are like file folders. Now we have classes that contain a bunch of functions and variables. And let's say that class is a file box that contains fall folders. Well, at the end of the day, what we have is just a file box full of instructions. It doesn't actually do anything. Some people say, Let's think of the class like a recipe. Some people say, Let's think of the class like a blueprint. What's the common thing here? They all need someone or something to turn the set of instructions into action, someone to take those recipes and turn it into a cake or someone to take the blueprints and build a rocket ship. Now this rocket will work exactly like it was designed to. It can thrust that it can cruise because we've given it functions to do so. But understand that that class doesn't trust her cruise. It's the actual object that gets created from the class that will thrust their crews. Furthermore, once you have a blueprint, you can make multiple spaceships. Each of them will have its own fuel level and ability to thrust or cruise. The blueprint is called a class in the object that are created are called objects or instances of the special class. All right, so who is the person that will take that costs and turn it into an object? Well, that's the device in your hand. It's a mini computer. You write your instructions in X code. X code will turn it into a format that can be understood by your device, and your device carries out those instructions. So here's the tricky part. You need to write instructions to tell the computer to take your classes and to turn them into objects. And furthermore, you need to write instructions to telecommuter how you want it to use those objects. For example, you write instructions like when the user taps the lift off bun. Then you create an object from the spaceship class, then called the thrust function of that object. Then call the cruise function of that object. You know, that could be a nap right there. Now, let's go back to our playground and see how you can write instructions like this. All right, so you just learned that a class with its properties and methods, they don't actually do anything until you bring it to life by turning it into an object or an instance of that kos. So, essentially, when you're writing this code in organizing your code into functions and organizing your functions into classes, you're really designing something, right? Your programming something to be turned into an object to be used. So before we create a spaceship object from this class, I want to first add another property and some code to the cruise and thrust functions so that they actually do something. So up here, right below this property, I'm going to declare another name, property, and I'm going to assign it an empty string so you can actually do that. It's a string, but with nothing inside. But essentially it sets the data type for this name, property and inside the cruise function here. Essentially, I want to print out a statement, but I want to include the name. So I'm gonna say Cruising is initiated four. And then I'm going to insert the name. Remember how we do this? You learned about this a couple lessons ago. I believe our last lesson backslash and then rounded brackets and you put in the variable name and it's gonna insert that into the street. So we're gonna do thrust this. Well, I'm gonna say is I say, rocket thrusters initiated for name. All right, So now we can bring this spaceship class the life by creating a spaceship object from it, or, in other words, an instance of the spaceship class. And the way we do that is we basically type in the name of the class, followed by two rounded brackets. So let's start doing that and you'll notice that auto complete shows us his press enter, and then you can go ahead and put to round brackets like that. Now, that kind of looks like a function call, right? And just like a function call with the return value. How it returns something to you, and you need to capture it using a variable or constant. The same thing is happening right here. By writing this line of code, you're creating a new spaceship object, and it's being returned to you. So you need to keep track of that data using a constant or variable. Yeah, use a very bold because I want to show you how we're going to try assigning something else to this variable. All right, Anyways, I'm gonna call that my ship, and it's going to keep track of that spaceship object that we just created. I want to show you something interesting. Why don't we try assigning another type of data to my ship, For example, in injure 10? Well, you'll see that we can't assign an integer to this variable because this variable is of the data type spaceship. What do you mean? We went through some data types in less than five. Remember, string bull in float double. Well, as it turns out, when you create a new class, this is now a custom data type, so spaceship is actually a data type. So what you've done here with this line is that you've said my ship is a variable that can only keep track of data that is, of the spaceship data type. So essentially, that's what's really happening here. You're declaring a my ship variable that is going to keep track of spaceship data types and you're signing a new object to this variable. So I just wanted you to know that so that it doesn't get confusing otherwise. Now, the next thing I want to show you is how do we access the properties in the methods of the newly created spaceship object? Well, we have a reference to that newly created spaceship object from this variable my ship. And if you've never heard of that terminology before, a reference is essentially what you're variable or constant is it's keeping a reference or keeping track of a piece of data which in this case, is the spaceship object. So my ship is a reference to that spaceship object. All right, so all we do is we type in your variable name or your constant name or, you know, whatever has the reference to that object press dot and this is called dot notation. This is how we are going to access the methods and properties of that object. As you can see, auto complete pops at this menu, and we can you know, you can access the name, the fuel level, the crews and the thrust functions. And, you know, when you get more advanced with swift, there are actually ways to restrict what can be accessed. But that's for the for later, for the feature. For now, I want to set its name. So I'm gonna call, I mean, access the name property. And I can actually say that this name property should keep track of a new piece of data. I'm gonna call this ship, Tom. All right, so I'm assigning the string Tom to the property name for that object, my ship. And next, I'm going to call using dot notation, the cruise function. And when I run this code, you can see cruising is initiated for Tom. But had I not set this line, remember going to use a comment here? We talked about comments in less than five that essentially turns this line of code off and treats it as a note or a remark. So I'm gonna turn that line off, and I'm gonna run the code again. and you can see cruising is initiated for empty string. Nothing. Okay, so that's kind of cool. You could also call my ship. Don't thrust and we could run that. And you can see there goes. I can also just access the properties. I don't have to be a signing things to it. So, for example, let's erase these two lions and let's say, let's print out my ship dot name and let's print out my ship dot fuel level. So let's run that. You can see it's Tom and 100. I like to think that coding an app is like writing a script for a movie. The movie script is your app coat. The character rules are the classes that you've designed but character roles themselves don't do anything. These rules need to be turned into physical actors and actresses, just like we need to turn classes into objects. Then the actors and actresses follow the script to perform your movie, just like how your objects work together to make your app function. So all of this stuff is pretty abstract, but in the next lesson, we're going to put it into practice. But first, let's do a quick recap of what we learned in this lesson because it was quite a bit. Now classes contain methods and properties, and remember methods air just another name for functions. You also learn that classes by themselves don't do anything. They need to be turned into objects first. These objects are also referred to as instances of that class. So remember, a class is kind of like a blueprint, and the object is what's created from that blueprint. You learned how to create a new instance of the class, and you also learn about dot notation, which is used to access the methods and properties of that object. Now, if you need to, I recommend to re watch this video and ask any questions you have in the discussion area below. I also have a worksheet for you to practice and to solidify these concepts in your head. And if things are still a little fuzzy and it's completely normal if they are, I highly recommend for you to download this worksheet and go through it. Now, in the next lesson, we're going to use your newly minted swift skills to bring the war card game toe life. Now, if you're excited about that. Like I am typing UNP pumped into the discussion area below. All right, so let's keep moving and I'll see you in the next lesson. 12. Lesson 8 - Connect Elements: Hi and welcome the lesson eight. You're almost there. Only two more lessons after this one. And in this video we're going to return back to our war card game Exco Project. And I'll explain to you how those swift basics you've learned applied to this project. By the end of this lesson, you'll know how to write code inside the view controller toe access and manage those elements that we've created in this story board. I'll also show you what to do with your app crashes, which is something that actually happens quite often into all of us. So if you're ready, let's do this. So here I have our war card game X code project, and we're going to jump right into the view controller dot swift file. Now that you've gone through this with basics weaken, talk about some of the code in this file. So in this first line, import you I kid, you know what that means? We're basically saying that in this code file we want to use the you I kid library that apple provides to make our life easier. You go down to this line, we have class few controller. So right here we're declaring a class called view controller, and you can see that it has an opening curly bracket and a closing curly Brockett. And this inside is a function you can see the F u N c there. It's a function called viewed and load. Now there are some details that we are going to gloss over right now because it's not relevant for what we need right now. You don't wanna burning you with that information. But, um, pieces of information like this here, Cole and you, I view controller. Essentially, this is something that's called sub classing, which is a way for classes to build off of each other. So you're not always declaring classes from scratch. This is essentially saying that the view controller is building off of another class called you I view controller. And this year I've been control classes. Actually, one from you, I kid, and for this function here, you can see that there's an override keyword, so you don't need to know about that for now. And also this super keyword, which again is something that we don't need to know right now. But essentially, you know, at a high level What you're looking at here is a new controller class with a function inside called Feuded Load. So isn't that really, really cool? Because everything you learned in the last three swift lessons, it directly translates to what you're seeing here. But as you learned in the loss loss in the view controller class by itself is just a blueprint. It doesn't do anything right. You need to turn it into an object first. So now we're gonna jump into the main dot storyboard and take a look at the work that we've done here. So all of these elements that we've added into the view here and that we've configured what are they? Are the objects of the classes? Well, believe it or not, what we've been doing here, we've been creating objects, and you might say that Hey, Chris, From what I've learned, objects are created from classes. Right? But what sort of classes are these guys objects of? Well, let's take a look at this object library here. You see all of these things. These air classes inside the U I kit library. Yes, that library that we import all of these useful causes, like buttons, text fields and sliders and stuff like that. When we drag one of these elements onto the view, we are actually creating an object of that slider class or that button class or that you image you class and take a load of this when you click on one of those elements or objects . Now that you know what they actually are and you go here on the right hand side into this inspector and you can see all of these things that we can configure. Well, what you're actually doing is you're setting the properties for that object. So you see everything maps to exactly what we've been talking about in the last three lessons. This whole storyboard is merely a visual way for us to create these objects and set its properties. In fact, we could just completely omit the storyboard, and we can decide to create all of these image objects these button objects through code, and then set its properties through code and then put them into the view through code. So you completely don't have the touch, the storyboard, But this is more of an intermediate to advanced technique, and I wouldn't recommend that for you right now for beginners. I would definitely recommend to start with the storyboard. So now that you know that thes storyboard elements are actually objects, how do we get references to these objects so that we can call their methods and configure their properties through code through the V Comptroller? Well, that's where ibl that properties come in. Let me show you how we can expose these objects as I be outlet properties so that the view controller connect system. Now, there are several ways to do this. But the easiest way is just to go ahead and select view controller here in your document outline. And remember that this is the visual representation of the view controller object. Click this this button here that looks like to co joining circles. This is actually called the assistant editor And what that's going to do a split your code editor into two different pains. A left side on the right side and I want to make sure on your right side you're looking at the view controller. Furthermore, up here in this breadcrumb sort of navigation, I want to make sure that your say automatic here, If it doesn't go ahead to click it and bring it down from manual or whatever. It was set to go under automatic and select view controller and then find this spot here right after the opening curly bracket of the class press, enter a couple of times to create some space. And then on the left hand side, we're going to expose this left card this first card as an I B L. A. Property. Now, you could do it through here, the store, but what I would actually recommend is to do it through the document outlined. So go ahead and open up your document outlining until you see the card here, you can select the element. It's gonna highlight the different parts. Make sure you've got that left card highlighted. Hold them control on your keyboard, and then, while still holding down control, click and drag. This blue line should follow your mouse cursor as long as you're holding down the control. Keep Dragon over here. You should see this little text that says insert outlet, and then you can let go of your mouse button and then control key. You're gonna get this little menu here, Uh, and then you're gonna be able to name this idea. Let property. So I'm going to call this the left image view like that. And if you've done this with the right element, the type should say you I image view. If this doesn't say that for you, just click. Cancel and then try it again. Uh, the connection type should be outlet, and you can go ahead and hit Connect. And what that's going to do is generate this property for you. Because, you see, there's the var keyword. Here is the name of the property. Here is the data type that this property references, which is you. I image you, Um and this is special because it's got this. I be outlet keyword here, which just indicates that this property references an object in the storyboard not gonna gloss over a couple of things here, such as the week keyword and this exclamation mark here. So that's not something that we need to talk about right now. But the important thing to note is, what you've done here is essentially hooked up that object in the storyboard to this property here inside from few controller. So now that you have a reference to that You image, you object. You can call methods on it. You can configure its properties inside the view controller here now because oftentimes beginners make mistakes when connecting their first I'd be outlets. I'm going to go through some troubleshooting steps and also some steps for you to confirm that you've done this properly. So go ahead in the document outline for this image that you just connected, right? Click it and it should pop up this little menu and you can see under referencing outlets. It says left image view with this view controller here. Now, if yours doesn't say this, then you might have connected the wrong element. So what I would do is maybe check the stack view. You could have accidentally connected this guy, right? Click it and you know, there should be no referencing outlets there. You know same thing with the right card view. If you click this, there should be no referencing outlets. If you by chance accidentally connected another element, Here's how to fix it. Go ahead. You know, when you see that menu here, you have to click this little XTO, break the connection, and then go ahead and delete the property and then you just start over and this time you make sure you have the right elements selected. Hold down control, drag that blue line over here. Let go, and then you can say left image view. Now let's say when I'm typing this out, I accidentally make a typo, and I connected a lot of the times. Beginners will just correct this type of like this and leave it at that. But essentially that will cause a problem down the road. When you run your because what happens, take a look. This right click this and you can see that this image object is connected to a property called left image view with two W's. But what we've done here is that we've corrected it, so it's gonna look for a property with two W's, but it doesn't exist, So your app is actually gonna crash. That's not the way you want to fix your typos. When it comes to connecting ivy outlets, you want to go ahead and break that connection and then just delete the property and you get stall over. Now she show you another way to correct this. So the most important part is that you break that connection, you can potentially just leave that IBL a property that was created. And then you can right click your image that you want to connect to that property under referencing outlets. Click this little circle drag to the view controller Let go and it's gonna pop up some properties that you can connect this image object to. Now it's important you don't connect it to the wrong one. Choose left image view and you can see that this this image right here image view is connected to the left image. You property of our view controller. So that's what you want. Now let's call it, connect the right image. You hold down control, click and drag that blue line. I want to make sure that you don't drag it into that same property because if you do that, you be connecting two elements onto the same. I'd be outlet property, and that could cause potential problems. So you need to drag it into an empty space where it says insert outlet or out like a collection. Let go. I'm gonna call this the right image of you and we're gonna connect it all right. So we've got to We're gonna connect a few more. Uh, let's say we're going to connect the score labels because we're gonna need update them through the code. So let's connect this left player. Score one, and you can see what I did. I created a little more space there. Hold down control, click and drag. Called us the left score label. You can see the type now is different. It's a different class. You I label connect that. And then here is the right one. Right. Score label. All right, Now I want to show you what an app crash looks like. So I'm going to go ahead and just change the name of my IBL that property with without breaking the connection and fixing it here in the storyboard. And as I told you, this is going to cause a crash. So let's go ahead and run the project and we'll see what happens. All right, so right here. You see this red highlighted line? That's gonna be a crash. And we basically see the same thing on the left and right side because we have the assistant editor open. But the main thing is that you need to look down here in the console area. If you don't have this section, just go ahead up here. This will show or hide it. And on this right hand side sometimes if you don't have this, there are two small little buttons here in the lower right hand corner that let you control the left and right sides. So make sure you've got this side here where it shows you all of this text and down here, you see terminating with uncaught exception. And that's just a generic message for an app crash. What you want to do instead is scroll all the way up. And that's where you gonna find a Nair message, which makes a little more sense. So here, you see at the very top terminating up due to uncaught exception. The reason this class is not key value coating compliant for the key right score label. Now, the line I've highlighted here may not make a lot of sense, but what happens is that once you know how to solve this error in the next time you see an error message that looks kind of like this, you have an idea about what's wrong and how to fix it. In this particular case, it's telling you that something is looking for right score label, but it can't find it. And we know exactly what the problem is, right? If we go back into the storyboard right this right, the score label, he can see if you right click that it says this element is connected to an IBL. That property called right score label spelled correctly. But if you look inside our view controller, we don't have a property like that. We only have this one right score Labe without the l at the end. And so that's why the APP is crashing because it's looking to make that connection that we've told it to make. But it can't find, you know, that corresponding on the outlet. So the next time you experience an app crash and maybe you're looking for help online, or maybe you're in our support forum and you're asking for help, make sure that you stroll all the way up into this console and look for that error message , which gives you a hint as to what's wrong if you you know, if you just look at this, it's not really going to tell you any sort of information. Okay, so let's go ahead and fix this by adding that l that was missing. And let's take a look at what we've done here so far. So essentially let me go back to the single editor view just so concealing more clearly. Essentially, what we've done is we've connected the two image view objects from the storyboard and the two labels from the storyboard as well as I be outlet properties here. So from this view controller code file, we can reference those objects using dot notation. We can access the methods of those objects in this properties of those objects as well. Let me just demonstrate for you. So inside the view did load method and create some space. And let's access the left image view. Now hold on a minute. Why can we access the left image view from within the view that load method? Well, this left image view is outside of a function, but inside the class, so it's inside the scope of the class. Remember, this function is also in the scope of the class. So that's why from inside this function, were able to access that left image view property. Now, using dot notation thought. And here I can see all of these methods and all of these properties of the U image you class, let me show you one particular property here called Image. Now, this image is you can read the description known here in the auto complete dialogue that image displayed in the image of you. That means that I can actually set this image property to change the image. That image view is showing. I'm not gonna actually do it. But why I wanted to point this property out is because I want to jump back into the store board and show you if I click this left image, you go over to the attributes, inspector. Here. You see, this image attributes it's basically the image property I just showed. You see, if I change the card here, right, That's just a visual quick way to do the same thing as if I were to do it here by using code. All right. The next order of business is how do we execute some code when this button is tapped on the steel button right here? Well, that brings us toe. I be action functions, and it's connected in the same sort of way as I be Outlet properties. Let's go ahead and open up, Assistant editor and let's create some space here in the view controller side. Now, let me just hide this panel so we can see a little bit more now. Before here, when we were establishing these ibl of properties, we did, uh, we did it up here, But now that we're connecting a function, we're going to do it down here. Still inside of the view control of class. So we have to do it, you know, before this closing curly bracket. But we also don't want to accidentally do it in the side of another function. So this is, you know, the opening bracket of the view did low function, and this is the closing bracket of that view. Did little function. We want to do it right here. This is where we can declare a new function so we can create so space here like that. Go ahead, hold down control. Click on this deal button element. Drag it here and it says, insert action outlet outlet collection. Go ahead and let go and you can see the action. Sorry, The connection type should be action. If it's not, just click on that drop down and choose action and down here want you to notice that it says touch up. Inside. There are different events that this button can trigger. Touch up inside is just the button. Tap essentially means that the user has tapped on the button and then let go of the button while still within the boundaries of the button. If you open this up, you can see there are different events. For example touch up outside, which is actually tapping on the button and the letting go with the finger outside the boundaries of the button. So that doesn't really count as tap. We're gonna leave it as touch up inside and we're going to call this, uh, we're gonna call this method deal topped. We're gonna hit connect, and you're going to see that this essentially a function with this special I be action keyword, which essentially just say is that this functions connected to an event triggered by an object in the storyboard. It's got one parameter called sender, um, which is basically the button. It's a reference to the button that triggered this event. And here is the opening curly bracket. And here's the ending curly bracket. We're going to create some space in the middle, and we're gonna add some code to execute when this button is tapped on. So I'm gonna print deal tapped like that and now we're going to run our project, and we're gonna top on that button and just check the consul to make sure that this is connected properly. One thing before we do that, if you accidentally connected the wrong element to fix it, would you go through the same exact steps as the I B outlet property so you can go ahead and right click the deal button, kill that connection. You can see all of these different events. You kill that connection under touch up inside, delete the I B action, and then just try it again, just like before. If you've accidentally made a table here, don't just don't just change the function name like that because it's going to break things right. This is still connected to deal topped right? And if you don't have that corresponding function in your view, you control of file. It's going to break, so just be wary of that. All right, so let's run the project. All right, so we're gonna click. Let's move this over here. So here, you can see in the console that this triggers. All right, So in this lesson, you learn about how you can use IBL. Let properties to allow your view controller toe access and manage those elements in your story board. You also learn about I'd be action functions and how they could be hooked up to events in this story board. You learned about common mistakes that people make when they hook up there. Ibl Let's on I be actions and how to correct those mistakes. And finally, you learn about app crashes and how to find the detailed error message when you're up. Crash is now highly recommend that you try replicating what we did in this video inside your own Exco project. And if you get stuck or Europe crashes, walk through those troubleshooting steps that we went through in this video, and you should be fine. All right, so thanks for watching. And I'll see you in the next lesson. 13. Lesson 9 - User Interaction: Hi. Welcome the lesson nine. This is a fun lesson. We're going to make the card images change when we click on the deal button. So if you're ready, let's jump right in. So here I've got our war card game X code project. I'm looking at the storyboard and I'm going to go ahead and select that left image view Now in the attributes, Inspector, on the right hand side, I'm going to go to this image property, and I'm just going to change it to a different graphic Assad by choosing something different in this drop down. Remember that what we're doing here is just an easy visual way to do the same thing that we could do through code. So essentially what? I'm changing up this image asset. I am really just assigning a different graphic asset to the image property of this image view. Object. Now let's jump into our view controller and see how it can do that through code. Just as a reminder, we have references to those image view objects, right? We have the left image, you in the right image view. I want you to also note that the type you know, the class is you. I image view. Okay, that is for displaying images. Let's jump down to the deal tapped method. Here. Let's erase this line and let's access our left image view using dot notation. We're going to access the image property, So hit dot type image. And this is the same image property. We were just flipping around in the storyboard, you know, changing that graphic asset. So to do the same thing goes through code, we would just a sign, you know, a different graphic asset to this image. Property of the image. You I want to draw your attention to one thing here on the left hand. The column Right here. We can see the data type that this property expects. So this image property expects you to assign to it au i image Object. This is different from you. I image view you are image view is a element that displays you. I image data and you image is the data that represents the actual graphic assets. So essentially, what we have to do here is we have to create a new u I image object in a sign. It too. This image property eso Let's just do it. And you will probably make a lot more sense than me just explaining it like this. All right, so go ahead, Hit equals. And they were going to create a brand. You you, I image object. Now, keep in mind that you have to type it exactly how I have it right here. Cause class names, lower case and upper case do matter. So it needs to be capital U capital I Capital I and then lower case m A g e. Same thing goes for these property names. It has to be lower case I image. So when you're watching me, type this stuff out and you're getting errors on your own laptop or computer. Make sure that your typing the right casing for your proper names and your class names. Also, another mistake I've seen is that you have to have spaces proper spacing. So make sure that you have a space before and after equal signs because, you know, this is not the same thing. All right, so what we've done here is we've created a brand new you. I image object, and we're signing it to the image property of the image view. However, if we do this, we're really not going to see anything, because this is just an empty you I image object. It doesn't actually have any image data to show. So the cool thing about this you image classes that it's got a method where you can create a new your image object while passing in some input parameter to tell what sort of graphic asset you want it to represent. So let me show you. Let me show you what that is. So I'm gonna open up a pair, uh, been open up the first round of bracket and you can see all of these different functions scroll down or this one. Find this one called named right here. And we are going to simply use that one here. Enter and we're going to be able to specify a graphic asset name. Now we're going to choose one of the ones in here. Take a note. How your spelling this. If you've just dragged my graphic assets and here, then they should be lower case C with no space in between the d and the number. So let's say card five lower case c a R D with the number five has to be exactly like that . Otherwise, it's not gonna find that graphic asset type card five like that. So why don't we run our project right now just to see that appear? All right, so right now it's a three in a tent. When I click deal, it's going to execute this function here, and it's going to set. It's going to create a new U Y image object grabbing the graphic asset here. And then it's gonna sign that to the image property of the left image view object, Which is this guy right here. So clicking deal there that turns into a five, which is really, really cool, cause that's the first time I think where you wrote code to influence what happens in the user interface. So awesome. Now we're gonna do the same thing for the right image view, right? Image view dot image is equal to new. I image right, and we're gonna just you can actually start typing, and it's going to narrow it down for you so you can choose that this I'm gonna choose card . I think our upper limit is 14. If I'm not mistaken. Yeah, So we've got up to card 14. All right, so I'm gonna run that. And this time, let me just put the code on the screen here. This time, when I click on deal, we have the ace on the right hand side and number five. Now, if I click on deal again, nothing is gonna change because it's always just running the same code, right? We need toe basically randomized these numbers so that every time we click deal, we get a different set of cards. So tell you about how to generate random numbers. It's actually quite easy. We're going to declare a new constant. Let's call this like, left number and you know, the data type. It's actually got a method called random that we can use right, and we can specify a range. And we can say the lower range that we have, let's see, is too in the upper ranges. 14. So we want to specify a range between 2 to 14 inclusive who angle here and we're gonna type two dot, dot, 0.0.14 right? No spaces like that, and we are going to then print the left number. All right, now, let's do the same thing with right number. We're going to randomize another one same thing to 14 and then we're going to print the right number. So after you've typed out in, let's run our project, it's not going to change. The image is just yet, but it is going to print the random numbers to the console just so we can see that we're doing this properly and move this over here so we can see and click the deal button. Oops, that's still covering it up. Do it. Oh, right here. I've got that little panel hidden. So click on this. If it's hidden for you, there we go. You can see different pairs of random numbers generated. Now the next step is how do we get these numbers into here? Well, I only have to do. Actually, first thing is, let's comment thes lines out. So we're not printing them out into the console, and I would also want to point out that when you're coming taking out lines of code like this, make sure that you clean it up after when you don't need it anymore, so you don't want to leave too much commented code lying around because it can look messy. And it's not a good practice to keep. Okay, so remember what we what? We learned about inserting variables into strings. So goes back to that instead of five. Here, we want to put left number, so I'm gonna erase five. Race five, put back slash Open of a pair of rounded rockets, an insert left number as a variable. Right. So the string is going to read card, and then whatever left number is now, I'm going to do the same thing here. You raise 14 backslash put into around the brackets, and I'm gonna put right number. All right. So lets you race these print statements. I don't think we need that anymore. Okay, so let's run our project here, See if we get the desired result. Go ahead and click on deal. So yeah, this is really cool. Now, one thing I want to point out is that if you're clicking this your random izing the cards and you're seeing some blank space like you're seeing card, that's just completely not there. What that means is that, uh, it's looking for a graphic asset that doesn't exist in your asset library. so maybe you're double check your range. Make sure that you know you have cards 2 to 14 and make sure that they're named properly. And maybe you might be even be missing that graphic asset completely so chunky of 23456 Let's check that you have all of them because if you're randomize ing and you see an empty card, you don't see the image. It either means that you don't have the graphic asset here or you've spelled it wrong so that you know, when you're trying to create this, you I image object. It's not finding that graphic asset in your asset library. Okay, I can't stop hitting this deal button now. In this lesson, you learned about how to change the image of a U image view using swift code. You also learned about how to randomized numbers and how to insert variables into a street . All right, so remember that you can download the project in the recap notes below. Thanks for watching. And I'll see you in the next lesson. 14. Lesson 10 - Coding Logic: hi and welcome the less intend. By the end of this lesson, you will have finished the War card game project. All that's left to do is to count to score and to update the label elements on the storyboard. Now, doing this is going to involve writing swift code that can take two numbers, compare them and then execute different branches of code, depending on what the result is. In other words, you're going to be writing swift code that can make its own decisions. Furthermore, by completing this project, I'll tell you where to get your certificate of completion for your achievement. And yes, I'll even send you a physical paper copy of it if you want. All right, you ready? Let's do this. So before we dive into our extra project, I want to first start in a playground, and I want to show you what's called a if statement, which is going to allow you to evaluate a piece of data and decide what to do. So the if statement starts with the if keyword, and then you're going to test some sort of condition, whether it's gonna be true or false. And so I've got a constant integer X. It's set to 10 right now, so I'm just going to do a simple check and say, if X is less than 11 so that's my condition. It's gonna make that test. If that is true, then it's gonna run the code in between my curly brackets. So that's create some space in the middle. I'm gonna print Hello. Let's run this code here and it's gonna take Okay, so we see hello in the console. The reason this executes is because this condition is true, right? However, if let's say X is 12 and I run the code again, nothing is going to be output down there. It doesn't run this code because it checks and it fails the check. So here's the cool thing about if statements and that is that you can provide alternatives so you can say if X is less than 11 than print. Hello, Otherwise, and you would use this else keyword and you would specify another block of code to execute print. Uh, goodbye. So if we ran this cold right now, what would you expect to be output goodbye? Because it does this check and it fails. It so it doesn't go in there, and instead it comes into this else part. So let me just set this to 10 and show you so X is less than 11 and that's true. So it comes in here and Prince hello, but it doesn't print goodbye. It just chooses one path that with the other. Now here's some other cool stuff that we can do with an if statement, and that is to test multiple conditions. So we can say else space if and open up another block. So let's say, uh, good afternoon. Oh, I forgot to put the condition here. If X is a say greater than 12 Uh, that would print Good afternoon. Let's make this number a little bigger. So let's say 15. If X is greater than 15 then print. Good afternoon. So what if we made this guy 20 so it would basically start at the top? It would check if excess Lesson 11 and it's not so Then it checks. The next one is X greater than 15. Yes, it is. So it prints. It executes that code in there and it skips the else clause. Now what if none of it is true. So what if I said X is equal to 13 Right? So let's give that a run. It falls down to this else clause because this wasn't true. This wasn't true. So all that's left is this sort of catch old bucket. Now here's the cool part. You can omit different pieces of your if statement, depending on what you want to do. For example, you can remove the catchall bucket. You race that and you execute it. Nothing happens in this scenario because none of these conditions are true and there's no catch all bucket, so essentially no coat gets run now. So far, I've just done less than in greater than. But you can also do a couple of different things you can do. Um, you can do less than or equal to, or you could put the equal sign we could do greater than or equal to you can also do not equal to. So not equal to is actually exclamation mark equals, and that is testing if X is not 11. So let's take a look at this and we get Hello. Now here's a very, very important point, and that is that only one branch of your if statement ever gets executed. So if I had this statement where I was saying Let's say something like that and I ran the code Both of these conditions are true, right? But it starts at the top, and as soon as it reaches a true condition, it will execute that block of code. And that's the That's it, right? You're if statement is done so it ever only picks one path to go down, even if you know this would have evaluated to Troop. Now, this is very different, if you right this because if you did it this way, these air two different if statements. So it would first run this if statement right and tested condition to see if it should run this block coat. And then it treats this as a separate if statement. And it's going to test this condition to see efficient run that walk of coat. So that is one clear distinction to make doing it like this. If and then else, if combines these two conditions into a single statement, so it's it's going to be like two different paths, and it's gonna choose one path now instead of having to different branches like we have here. You can also do three branches or four branches. You can just keep changing these else if, uh, things if you want. You know something like that, you know, that just really make sense. But eso you could change as many of them as you want, but just keep in mind that it's going to start at the top, work its way down, and as soon as it hits a condition that's true. That's the branch it's going to take and not gonna execute all your other branches. I wouldn't go too crazy with having a whole ton of else's because there's actually another , um, something called a switch statement that is more suited if you have a lot of different options. But an if statement is good. If you want to just test a couple of branches, and what else can I show you here? So let's talk about the different types of comparisons that we can do. We can do as you've seen greater than you see in less than you could do greater than or equal to. You could do less than or equal to, and you can test equality. Now notice that equality is double equal sign. OK, so this is testing. If X is equal to two, we don't use a single equal sign because remember, from the your basic swift lessons, a single equal sign is assignment. If you write this, you are trying to assign the into your to to the constant X right. And this is an error because X is a constant, so we can't change it after anyways. So if you want to compare to see if it X is equal to two, you would use a double equal sign. And if you wanted to compare if you wanted to test that X is not equal to two, you would say exclamation equal. And this is testing If X is not equal to two now, this stuff can get pretty crazy because let's say you had another constant here, and we're not gonna need to do this with our war card game, but I still want to show you just it's good to know. So if you wanted to test ah condition with two different variables, you can either say end or or so end is double M percent like that So for me, that would be a shift. And the seven I would get the and percent so your keyboard layout might be a little different. Eso I can say you know why is equal to five and X is greater than or equal to 11. Then that would be true. Now, when you use an end operator like we have here, both sides of this must be true. Only then will it come into this branch. So if we had something like, why equals the six like that? We ran this code, then it would jump down to here, right? Because this is not true. And that kind of like cancels the whole thing. The whole thing in value is the false. On the flip side, let's say we had something like or which is actually represented by thes two double pipes for my keyboard. That would be shift and back slash. I get this sort of symbol. So for your keyboard, it might be a little different, but this represents or and when you haven't or operator, either this evaluates true or this evaluates to true, and that would be sufficient for it to go down this path here. So as you can see, if I run this code right here, we're going to get hello. And that is because even though this is not true, this is true. And that's enough because we're using. Or here's the crazy part, and that's that. You can use brackets to chain these things together so you can do something like this. Yeah, you know, so you can say, like, if X plus y is equal to 10 and you know, either this one or either this one is true. Then come down here so you can express some pretty complex logic depending on wearing placed these brackets. So let's try to run this code here and we get good afternoon. But how would we make this work so X? And why half the equal to 10? Why has to equal to six. So if we just did that and we change this to four, that would actually bring us into Hello. So why does this evaluate to this branch? Well, because X plus y is equal to 10 right? Is it? Six plus four is 10. And because we're using the and operator, this side must also evaluate to truth Now what does this? I'd say, Well, since his using it, or either this must be true or this must be true. So X is not greater than 11 right? It's for that fails. But why is equal to six? So that's true. So essentially decide is true and this side is true. And so that's why we're going down this path here. So now we're going to implement an if statement inside of our X Code project. Now let's look inside the view controller that swift inside the deal tapped, we so far have been changing the image. But we have all the data we need to determine if the left side is the winner or the right side is the winner. See, we have left number and right number, right? And based on what you've just learned on the playground, we can just compare these two numbers so we can say if left number is greater than right number, then right then, left side winds or player wins right else. If right number, let's actually keep it consistent. So left numbers less than right number, then we have right side winds and then we do have another scenario right where left number equals right number. So we can just use an else. And we can say, uh, tie. Now, I'm not gonna address this particular scenario because I'm not exactly sure what to do. But if either left side wins over the right side wins, we can increase the score, and then we can update the labels. So if you remember all the way up here, we actually haven't declared any properties to keep score. So why don't we go ahead and do that? Var left score is equal to zero and of our rights for secret zero. So they both start at zero. You scroll down here and we're going toe. Say left score and we're gonna use plus equals one. Essentially, that takes whatever number eyes currently inside left scored. I'm gonna add one to it, and we're gonna then a sign, or rather, update the label. So we do have a reference to the label because we haven't ibl that property called left score label. You can see it's a type of you label. And if we use dot notation, we can access the properties and methods of that score label object in the storyboard and it actually has a text property that expects a strength, so we're going to assign a string to it. The problem is that left score is an integer. So if I try to put left score see, it's an int. If I try to assign left score toe, update the text of the label, we're going to get an error because it says it cannot assign a value type of int to a type of strength. Because remember that text properties expecting a string data. So what we can do is we can actually create a new string object like that, and it just has a special way where you can pass in an integer and you can represent that integer as a straight. So that's essentially what's happening here. We are creating a new string object, and we're passing in this inter, and it's going to essentially treat that indigent as a string or change or convert that data type. Now let's do the same thing with this side, so we're going to say right score is plus equal, one increasing that scored and they were going to say, right score label thought text is equal to new string object, and we're gonna pass in. Right score. All right, so let's run our project now and just take a look at what we've got. We got our card game here, and King is bigger than three. So we have that increased score. Nine is bigger than seven. So we have to now gets one on the scoreboard. Aces bigger than queen. So, you know, cool works. Now, don't forget to go back and write yourself some comments. Get into the habit of doing this. So we've got randomize. Some numbers update the image views. Compare. Did you run the numbers? And you know, you can get as granular as you want with this. Yeah. Now, the last part I want to show you is about running this app on your own phone. So in order to do that, you would just plug in your phone with a cable, plug it into your computer, and if it's the first time you've ever done this, you'll probably get a pop up. Like if you have X code open asking, Do you want to use this phone for development? And you have to click? Yes. When you do that, um, it's going to set up your phone for IOS development so that you can run this project on it . And also, if it's the first time you've ever plugged in your phone or your iPad to your computer, it's gonna ask. It's gonna ask on your phone. Do you want to trust this computer and you have to click yes or trust whatever shows up on your phone. So those are the two things that have to happen. And then once you do have your phone connected and it's got the problem, permissions and everything, if you pull this drop down, down, you're going to see here. I don't have a device connected right now, but you're going to see your device here. It's gonna be like your name. Whatever you've named your device, essentially, you're gonna see it here. You're gonna want to choose that. Okay, so this pops up for me because I don't have a device connected, but you're gonna want to choose that, and then you're going to want to just click, run, and essentially, instead of launching the simulator, it's going to launch this app on your phone, and then after that, you can stop your project. Disconnect your phone and you'll still have that app on your phone. Now, the thing is, when you do it this way, Apple intends for you to do it only for testing purposes. So I think it gives you about seven days before you before won't launch anymore. And you're gonna have to connect your phone again and kind of like, run your project on your phone, too, to give you another seven days. If you do have an Apple Developer account, though, and this is like a paid account, Apple charges you ah fi every year for you to publish ups into the APP store. Then you'll be able to keep your app on your phone for a lot longer. You'll also be able to send that app for other people to other people's phones for testing purposes and also the publish ups into the APP store. Not bad, right? Look at how far you've come. Seriously, give yourself a pat on the back. You've just gone through four hours of I was training, not including the exercises, and you've built their first app that you can show people to celebrate this huge milestone . I want to give you a certificate of completion. Just visit the link below, or check out the description and get your certificate and get your name up there on the wall of success stories. Now, in terms of what to learn next, I have several options for you. Number one. You can visit youtube dot com slash code with Chris to see all of the other free content and tutorial Siri's that I have that you can watch Number two. If you have a nap idea. Make sure you go and get my free seven day APP action plan, which is going to help you put together an actionable list of learning objectives that build your app. You can get that by going to code with chris dot com slash action plan and number three. If you have some budget to spend, you can check out my paid courses, which actually continue from the 10 lessons that you've just watched and continue building your skills and building EPPS and to check those out, visit cold with chris dot com slash beginner course. And lastly, I just really want to thank you for learning with me. You know, I never imagined myself teaching IOS But I'm having so much fun every day. And I feel so fulfilled hearing your success stories. So if this training has helped you out in any way, please reach out and message me and let me know if it weren't for people like you, I wouldn't be here today, so thank you again. All right. I'll see you in the next lesson. 15. Conclusion TUS: Congratulations. You've made it. Thank you so much for learning with B. I really, really appreciate it. For more great tutorials and courses, visit my website at code with chris dot com or visit my YouTube channel at youtube dot com slash code with Chris again. I really appreciate you learning with me. And I hope that we can continue our journey together. All right, bye for now.