In this video, we are going to start our Swoosh app and we're going to learn a little bit about user interface and interface builder, some of the caveats that come with that, and how you should overall set up your project for user interface, and we're going to build a custom control. So we've got some designs here as you can see, and the idea behind this app is it's an app where you can get with other people and play basketball games, pickup games. So we're not going to build on all the features and location and things like that but it's always important at least for me and in teaching to see real-world apps and how you might actually build things for a consumer facing application. So we're going to do everything for this app, and of course in this course as you might do professionally we're not going to cut any corners. So what we'll do is we'll create a new project. Single-view application is what we want. It's just going to have one view that goes to other views. Click Next. We're going to call this App-Swoosh, and you can fill in your own information here which is fine if you have a team that's great, you may not have a team which is fine. Of course Swift is very important. Click Next and what I'm going to do is I'm going to put this in it's proper folder. So courses and lessons and you can put yours wherever you want Swoosh App-Swoosh. I'm going to put it in right here, perfect. So here's my project ready to go. Here we have the default project information. Nothing is overly important to play with at this point in time but there are some things that you can do. You can make it sport upside down or turn off landscape, or turn it on and we're just going to leave all these things as default here. So you're going to notice a few files here in your project the AppDelegate, which of course is the starting point file for your application. We aren't going touch that. We'll leave that as is. It's given us a default ViewController.swift. This is the code for the very default ViewController that your app loads with and of course all apps have a default ViewController. So that's there and that's important to understand. Then we've got our Main.storyboard, and this is where the default ViewController has been placed for us. We let that happen automatically and we could have created all this from scratch, included a storyboard, and all those different things, and dragged a ViewController on here but the defaults are all fine for now because we want to get up and going building an app. So better view here which is the main view and that's where you're going to drag and drop other views on. You can hover over this little icon here at the bottom right, this is the object library. This is where we'll actually drag some views onto the screen. Before we can drag views, we've got to look at our layout design here, and see what we're actually supposed to build. So we're going to build this first screen here, it's the Welcome Screen, and notice how there's a logo, there's some text here, there's a background image, there's more texts here, and there's a button. So I'd say 1, 2, 3, 4, 5, 6. Six elements on the screen probably that we need to build. Of course, we don't have the assets in our project get for the Swoosh logo or for the background so we're going to need to grab those now as well. So what I'm going to do is I'm going to go into my Dropbox folder here and we're going to go into courses and lessons, iOS 11, app designs, and here's the smooshed designs. The assets have been exported for us already. One thing I want to point out here is that we've exported these assets with an @2x and @3x although it looks like we missed it for the logo here which I'll add that as well to. But basically, when it comes to graphics in iOS development, if you just implement one graphic, it's going to be used for all screen densities. So the non 2x and non 3x that's your lowest resolution file. Those are used on older phones like the iPhone 4 and 4s but as phones gain more resolution, the bigger images are necessary. So always no matter what, have an @2x at least which is usually double the size of the @1x. It doesn't have to be, you can just make it bigger and it will use it automatically. But it's good for you to make it double and the @3x is full of those brand new devices like the iPhone 7+ which have ultra resolutions. That's important as well too in providing all three graphics files. If you don't, what you'll notice is you'll notice some blurriness on the images if you don't which will make your projects not look so nice in your apps. So what we're going to do here is we're going to enter code project here in Xcode we're going to click the Assets folder. What I'm going to do is just select all these things here Command A and I'm just going to drag them over here. Notice how it didn't add all the @2x @3x on here it just dragged in the names of the files. Well, it's because it recognizes that file format and places them in the appropriate spot and that's all you have to do if you want to support a really high resolution device like the iPhone 7+, all you have to do is the @3x and @2x, and it put it into the slot automatically and at runtime it will choose the appropriate image, no code is necessary which is really awesome. So again, you do the @2x and @3x, and then the file type. So looks like we're good to go there. The next thing we want to do is start building out our user interface. So let's go to the main storyboard and to build out and graphic on the background, we need to use an image. So I'm going to type in image here at the bottom and this is called an ImageView or UI ImageView. What we're going do is drag it onto the screen like so, and there's our image view. Then what I'm going do is hover over this icon right here in the middle. This is the attributes inspector, and we're just going to select an image, and welcome screen BG. Now here's our image, and notice how we're viewing currently as an iPhone 7 at least mine and yours may be different. So if we wanted to see how it looks on different devices we can click that, and it will change the device that you're viewing it on. Notice here on the 7+ it's not going the full screen. We're going to have to address that later on. So we're going to work out the iPhone 7 right now though so it looks nice. So what we're going to do is using the iPhone 7 we're going to build all of our interface elements, and then in the subsequent video we'll actually go and figure out how to get it working on all the screen sizes. So we've got the image here, we've selected the image. One thing I do want to say is on this content mode, scale to fill is not ever usually what you want. What that's going to do is it's going to scale your images to fill up the space but it may stretch them and as we know stretched images never look good on apps ever, ever, ever. So what we really want to do is aspect fill. It'll keep the aspect ratio and fill it up in the entire screen. So that's what we're looking for here. So I just saved my project I do that very often. So the next thing I want to do is I probably get the rest of the controls on here. So the image that says Swoosh and these here. So what I'm actually going to do is I'm going to keep it side-by-side with my project like this so I can just. So I can look at it while I'm working on it. So what I'm going to do is, these controls up here, I'm going to go ahead and hide or show the navigator. So I'm going to hide the navigator here so I have more space on my screen. I'm going to work with it like this for right now. Okay. So first things first is I want to throw another ImageView on here, so right at the top. This will be our Swoosh. So I'm going to select the image here and do Swoosh Logo. As you can see, right now, it's scaled to fill. It's smashing the image which, of course, doesn't look right. So even if you eyeball it like this, okay, that looks good, you still want to do Aspect Fit or Aspect Fill because it'll be perfect then. So let's play with Aspect Fit for a second. So notice how Aspect Fit, it scales the right aspect ratio but it gets bigger or smaller depending on the size of my box. If I go to Aspect Fill, you can see that it's keeping a massive aspect ratio here in my app and filling up the entire space which is not what I want. So in this case, I want Aspect Fit so it fits within the bounding box. Okay. Right now, we're just going to eyeball it. Here's what I was telling you about earlier, and I'm glad we pointed this out here by not having the other at 2x and at 3x images. Since we don't have at 2x and at 3x images, we're using the default low-resolution one and it's blurry. So if we want that to look really nice, we're going to need the 2x and 3x images that will add to the project here. So let's go ahead and put this right here. Okay. So Swoosh. That looks okay. Looks good enough for now. The next thing we want to do is add some text. We're going to do a label here. Okay. Of course, ours doesn't look anything like that, so I'm just going to make it bigger and eyeball it for now. Okay. I'm going to center it. So with this label selected, I'm going to hover over the center icon here and center the text. The next thing I'm going to do is I'm going to change the font. I never ever use the system font because it's just ugly. So we're going to go to "Custom", and we're going to use the Avenir. Now, Avenir is actually a font that Apple uses for most of all their marketing material, and it looks really nice. The style, I just want a regular medium style. Okay. So that's good for now. What we'll do is we'll increase the size until it gets about the size that we want. I may adjust this in just a minute here. I want to change the color, click on "Color" here. What I'm going to do is I'm going to change the color to white. Okay. You can play with any of these controls here to get white. I just click this sliding icon here and drag it over. So what we want to do is just mimic what's on the screen, so "GO ALL IN". Okay. In the image to the left, it's at the bottom of the basketball player, right there on the left-hand side, and this one's about right there. I'm okay eyeballing it. It's it's fine for now. It doesn't have to be pixel perfect. In fact, here's a pro tip. Okay. This is a very important pro tip that you should let your designers know if you're ever working with designers. It is not ideal practice to have pixel perfect designs in iOS development. So if you have a designer come at you and say, "I want these pixel perfect", and he makes the little marker that says 16 pixels, things like that, that's not ideal because with iOS development, what you want to do is work with auto-layout which gets it about near-perfect what you want but never quite there because it needs to adjust for different screen sizes. So you should always let your designer know, "I will make it look really nice and based on your designs but I cannot guarantee pixel-perfect". One is it might be two times the work to do that and you have to write custom code to get there, and so they're going to pay a lot more money. Okay. Don't ever commit to pixel-perfect on a contract project. Two is it'll take a lot of time. Okay. It's often not worth it. So just let your designer know, explain it to them, but there's your pro tip. So "GO ALL IN". Okay. So what next thing I want to do is make sure that's selected, and I'm going to Command D to duplicate. You could also Command C and Command V to paste. What I'm going to do here is we're going to write the text that we need, so "ON GOING ALL OUT". Okay. Cool little catchphrase that Evan created for us, and I was going to make it smaller. So "ON GOING ALL OUT". Now, what's interesting is on the image over here, it's lined up completely. So the "O" is over here, yeah. So we need to make this a little bit longer and bigger. So what I might do is just increase the font size until it's about right. Let's make sure it's centered which it is. It's a little bit too big say 23. That's a little too small. Well, like I said, it's not going to be pixel perfect but it'll be close enough. I'm okay with that, so we'll put it right about here. I want to make the bounding box a little bit smaller just so we don't have extra wasted space. Okay. So "GO ALL IN ON GOING ALL OUT". Here, what we could possibly do is just make this bold and that might actually heavy. Yeah. That almost made it quite perfect there on the edges there. Okay. So "GO ALL IN ON GOING ALL OUT" sounds so inspirational. I can also use the arrow keys on the keyboard to move things around and move it up. This is slight bit more. I'm liking that. So next thing I want to do is get this text here in the middle. So again, Command D to duplicate, and I'm just eyeballing it. Again, not doing pixel perfect here. What we're going to do is type in the word so, "Find a team in your city and dominate the league." Okay. The reason why I typed the words first before I change the sizing and things is so I can actually size it up, and it will fall into place a little bit easier. So I'm going to change this back from heavy to medium. Then, we're just going to reduce the font size. In fact, one of the things we're going to need to do is have two lines here. So see where it says lines, just click it up by one until it has two on there. Okay. We're going to put that right there. You know what? We didn't make it larger so it shows two lines. There we go. Okay. It wasn't showing two lines because my label was not large enough. As you can see, it's now large enough. Notice how there's too many words, so we need to get rid of "dominate". Okay. Also, the words need to stretch out across the whole thing, so let's make the font bigger. It's a little too big. It's still smaller there. We're just playing with things here. What I want to do is I want to get "the league" to be the only thing that's showing. There we go. That's a little bit long. Yeah. So it's a little bit long but I like the font size. Well, maybe what I should do is make these a little bit bigger. I'm curious now to make this a little bit bigger to get them touching the edges like so, and to make sure this one is lined up properly. Make this a little bit bigger. There we go. It works for me. I like it. Good enough. Okay, perfect. This is looking really good. Now the last thing we want to do is add a custom button on here. Okay, and so what we're going to do is type in B-U-T for button, and of course it doesn't look anything like we would expect. So just drag it there, and put it towards the bottom. So obviously it's an ugly button. So let's go ahead and drag it to the left here, on this side of the screen, and drag to the right and let's make it a little bit bigger, as per the designs, and there's some things we can do right now. So, what I can do is instead of saying the word button on it, as you can see at the top right, I say, "Get started." Let's go ahead and change this from system font, to custom, and then let's go to Avenir. All right, and let's just do the medium font, and change the color to white, like so. Okay and then what I want to also do, is scroll down a little bit on this button here, and see how background that has a red slash. It's a clear color, there's no background, but I instead want to do, is I want to make this black. Like so black color. I just changed the color to black and then what I would like to do, is click this icon here, and change the opacity. Just eyeball it to a good color there, where you can see the background, and I just changed it to 40 percent opacity, and now it's starting to really look like the designs. This is really cool. Now we don't have a border on here yet. So we need to solve that next, but this is looking pretty close. So I'm going to save it, and the next thing we want to do is actually create the border. So what we're going to do, is open up our navigator, this button at the top right. We're going to go into our folder here, Apps Swish, right-click, and we're going to add a new group. I'm going to call this group "Views". This is we're going to put custom view code. So it's segregated from different types of code like view controllers or services. Inside the views folder here or group, I'm going to right-click and go to new file. What we want to do is a Cocoa Touch class. Okay, Cocoa Touch is the framework that manages things like buttons and views and we don't want to create an empty Swift file. We want to actually use the pre-built custom Cocoa Touch class, and we don't want accustom [inaudible]. So what we want is a UI button. Okay, we want accustom UI button and we're going to call this border button. The advantage of making this a class, means that we can reuse this button over and over and over again. Re-usability is very important in programming. We always want to keep the DRY principle. Okay, I want you to burn this into your brains right now. The DRY principal, don't repeat yourself. If you find yourself writing code over and over and over again the same code, it means there is always a better way. So creating classes, is one way to make reusable code. So less code means less bugs, and less work. So the DRY principal. Don't repeat yourself. So we've got our border button here, subclass of UI button. Of course it feel that in first automatically when we started typing, and UI button is part of the Cocoa Touch framework. I'm going to click "Next", and I'm just going to click "Create", and here's our border button. It says only override draw if you perform custom drawing. Well, we're not going to override the draw rect function, because we're not doing custom drawing. All we're going to do, is add a border which is part of the default layer inside of any UIView. So you would override draw rect. Okay this function right here. You would implement that function only if you had to do custom drawing. If you wanted to draw a little stars inside your button or things like that, any type of custom drawing that you might want to do. So what we're going to do, is we're going to use the awakeFromNib function. Okay, awakeFromNib. We're also going to write super awakefromNIB, and you'll learn more about this but in the super class basically or calling super is calling the parent class. So it's calling UI buttons, awakeFromNib function because Apple, when they've written this code for us, they already haven't awakeFromNib function which has lots of coding in there already possibly and so we want to make sure that that code is called, and per the Apple documentation, when you override the awakeFromNib function, they want you to call super. Call it first. So the code on that Apple is calling. The Apple has written in their function. All we're going to do here, is access the layer property. So layer.boarderWidth equals 3.0 or we're going to say layer.borderColor, equals UIColor.whitecolor.cgColor. Okay, a lot going on here I know but what we're doing here is every UIView, UI button inherits from UIView, it gets some of the properties and features from a UIView, has a layer property. Okay, this is stuff that the Apple engineers have written for us and like a border width. Unfortunately, that's not available to us in the interface builder. So we have to do it programmatically. So border width and border color, allows us to set a border width and color of any view. It could be an image view, it could be a UIView, it could be a button. Any of those things that you can add borders to, and because it all inherits some UIView. If we command, click this right here, and pull the documentation and it talks about the different functions and things that are available to it. In fact, anytime you want to look at the code underneath, you can command click, and go look at them. All the code underneath is available for you to look at. So if you ever want to see what functions are available to you, you can command click and jump to the definition. Pretty cool stuff. Anyway, so we've got what we need here. All right, we've created a custom button called border button and in the awakeFromNib function, which is going to be called the moment that your interface builder ViewController comes to life, onto the screen. This is going to be called right from the beginning and then we need to do one more thing, let's go back to our main storyboard, and on this button here, instead of it being a regular UI button, we want to click this icon right up here, the "Identity Inspector", and we want to change the class from UI button, to border button. I just type in the letter B, and it appears right there. Now, you're not going to see anything here in the interface builder, but when we run this project, we should see a white outline on this. So what I'm going to do, is from my devices here, I'm going to choose an iPhone 7 since that's what we're working with here in the Interface Builder, and we're going to run it. Here it is on my screen. It's a little bit big. If you want to change the size of the Interface Builder here, press Command 1, or Command 2, or Command 3 to make it different sizes and cool. So, I think our borders are probably a little bit thick. I probably should have done a two instead of a three, and I think maybe our buttons a little thin but as you can see, it looks pretty close to the designs, which I think is pretty cool. So let's make those few minor adjustments real quick. Again we're eyeballing all this, which is fine. So make it a little bit larger there, and in the code, the Border button, all right, let's just set this to a two. Now, let's try something different. Let's run this on an iPhone 7 Plus, and see what happens. As you can see, it's now loaded a second simulator here and we're going to keep this one on this size because it's really massive. I'm sure if I make it bigger, it doesn't even fit on the whole screen, which it doesn't, no. So here's something interesting. Let's move this one off the screen. Look at this. On the iPhone 7 Plus, we got this big white space here. That's not good at all right? So you actually can't ship an app this way. The way we just built an interface, it's not complete because it only works on one type of device screen and we could have easily have seen the problem. Let's go back to our storyboard here. If I had clicked on this device down here, for the iPhone 7 Plus, you can see that there's white space, or if I click on the iPad there's an even bigger white space and so this problem has always existed in iOS, and here's the reason why. Currently, we're not utilizing Auto Layout. Okay, iOS, all the apps that are laid out that seemed to rotate, and look good on any device, they use something called Auto Layout, and Auto Layout will allow us to pin things to the edges of the screen or pin things to other components on the screen. So it looks good on any type of screen, and we haven't done any of that yet. So, we're going to call this video done. What we've done so far, is we've dragged some controls onto the screen. We've created our own custom class using the awakeFromNib function. We have initialized code. We've set code that will change the border, and the border width of the button. Now things are looking pretty good, but we have some user-interface problems. So we're going to need to address those next. So that's it for now, moving on and forth.
