What's up everyone, I'm super excited to teach this lesson. This is the Window Shopper app. It's really the first full-fledged app you're going to build, and we are going to build it as if a professionals building an app that's going to be published on the App Store or for a company. So we're going to consider all the little things that need to go into an app and we're not going to cut any corners, and create a new Xcode project. Single-view App is what we are going to do, and we're going to call this window-shopper, click "Next", and I'm going to place it right here. So the idea behind this app is you see an item that you want to buy, and you want to calculate how long it's going to take you to work to buy that item. So if your hourly wage was $10 an hour and you wanted an item that costs $100, you're going to have to work 10 hours to get it, so we want to run that math for the user. It's actually a really useful app. I can think of many times and I would have liked to have had an app like this. So let's just go ahead and get started and build it out. So first thing I like to do whenever we're working on a project is I like to grab the assets. Let's go to Assets, click that folder there, and then as you can see, there's some asset files here. We're just going to copy all these or rather select them all and drag them over here. Perfect. There's our assets. So the first thing we can start off right away is just building up the user interface. Sometimes it's really hard to figure out where do I start in that one. Start with the data? Do I start with the functions that are underneath the hood? If you can't think of what to do, just jump on the user interface because at least you should be doing something and this is relaxing, helps get your brain in the flow of the app anyway. So here's our view controller in the main storyboard. Already, as I'm looking at this, this view controller is bothering me, the name of it because it doesn't represent anything. So let's actually on this folder here, let's go to a new group and we're going to call this controller. If you're thinking why you see that or we going they're, versus your interface builder then switched over there, and what I'm doing is I'm building out a project like I would really build it out as I'm developing an app. As I see things that I want to fix, I want to fix them. So what you're seeing is mark price's real development experience, I don't have these all listed out in a bunch of steps, do this, do this, do this, teach this, teach this. No. I have the app that we just built, the teacher version of it, and now we're going through as if I'm really building an app. So first things first is let's drag and drop this controller, this viewcontroller.swift into the controller folder, and then once in here, right click the view controller and go to rename, and we're going to call this MainVC for main view controller. I'm going to save this, now go into my main storyboard here. We know that we're going to need an image as a background here, so I'm going to type an image here at the bottom right inside the object library, and well I'm just going to make this full screen here. We're just going to support iPhone in this app. We will do constraints, but we're not going to support iPad and set all this constraints as well. What we're going to do is we're going to pin it from each of the corners here, make sure that constrain to margins is off, click add four constraints, and on the image, we're going to select Window Shopper BG. Even though it's okay and the right aspect ratio right now, I am going to change this to aspect fill in the case that it did go to iPad we would want to make sure that it doesn't stretch once to fill up in the proper aspect ratio. So that's looking good, not bad. We've got a logo here and two text fields, we got to place it. It's pretty small, so not that many controls. So let's go ahead and throw another image view on here, put it like so, and let's select the image. We'll say Window Shopper icon, of course it's stretched. So let's go to Aspect fit, and then we'll just scale it, eyeball it. It doesn't have to be perfect. I'm going to put it right about there because I know there's going to be a status bar up here, maybe right there. Looks good to me and we can right bring these in here slightly, we don't need all this extra space. There we go. That's fine. Cool. I'm going to click the "Pin" button here, and I'm going to go ahead and give it a fixed width and height, and this should be a square, this would be my guess, 60 by 60. Yeah. Looks good. So 60 by 60 and from the height, let's say 35 from the top, I'm going to click add three constraints and then I'll click the Align menu here and we will just horizontally in container, so it's going to stay right there in the middle, and that's great. These other two controls are UITextField, so this is typing the word text and you'll see a text field and text view. Let's do the text field one, and what I'm going to do is change this from this rounded one to just this one with the dot dot dots on it. Let's move it out, move it out. This is hard to work with. We've got some settings, we can say yeah, we can change the font color, maybe set a background color on here. But if we look at our image here, it has a quite a few custom things on it. For instance, the background on here, it's like a white with an opacity, and then we've got some white text that's centered for the placeholder, and then it's got rounded corners and stuff. We want this to be reusable, and imagine if you wanted a text field just like this across multiple apps, we wouldn't want to be setting all the stuff in interface builder. So you're going to start coming to find that writing code, writing custom classes for views and code is very important because you can reuse these, and if you want to make them really shine, you can clean them up and then put them in their own framework. More on bundle or there's many different ways of packaging it, and then you could redistribute it, or maybe even make it like a cocoa pod and make it available to other people to install on their project. So I think we're going to need to write some custom code for this background. So let's go ahead in getting started doing that. First, let's go ahead and create a new folder or group, and we're going to call this views. Sometimes I wonder why they call it groups because like Windows or Microsoft has a patent on the word folder. So Xcode can't say the word folder. They say group, I don't know. It's really weird. In the views here, somebody research that and get back to me. Views, New file, and we're going to go ahead and do a cocoa touch class, and we want to inherit from UITextField. So let's call this currencyTextFild because we wanted to show currency, because wage is currency and item price is currency. Subclass of UITextField. That looks good. I will just click "Create". Wonderful. I'm going to get rid of this for now. This draw rect boilerplate code. What we want to do is we want to make it, so it looks really nice. When you're on the app, so we want it to have the white background, etc. So what we'll do is, we'll just do the awakeFromNib function and call super.awakeFromNib. So basically, when this TextField comes up from the interface builder file when the app is loaded, it will run this code. Okay. So we're going to do is all programmatically, so this can be reused. Again, we don't want to have to go into every control and interface builder and then click and drag and type stuff. It's a lot of extra work, we want it to be reusable. So let's do it the right way, which is with code. So we're going to say background color, I know because I talked to the designer. In fact, I asked him as like, "Hey man, this text field here, bro, okay, like what are they? What's the color and opacity?" He told me, "Yeah, these are white text field, so they are pure white and they're only 25 percent opaque." So I know what to set it as now. So that's why I know what we're going to put in here. What we're going to do, is we're going to say background color equals, start typing the word color, and you're going to see this color literal and you literally, all you have to do on this is clicking and you've got your color literal. What we're going to do, is I'm going to click Other, we're going to set it to white, and then what we're going to do is we're going to set this opacity to 25 percent. Magically, you can now set colors in here. Isn't that pretty cool? Let me just show you how they did it in the past. In the past, you might have to do something like this UIColor and then, let's say, RGB. You might have tapset 25.0 divided by 255.0 and then you'd have to do that for all these other values here. You no longer have to do that. If you just want to color, all you have to do is color literal and you can insert it right here in the code, which is trippy, but I runtime and knows exactly what that is. So very cool stuff. X-code is becoming even more visual. Maybe one day it'll all be drag and drop code. That'll be interesting. So cool. So we've just set the background color. So it's white with a little bit of transparency, and then let's go ahead and set the radius of the corners. We've done this in the past, layer.cornerRadius equals 5.0. We need to set the text alignment of the text, so it's in the center instead of at the left, and just to show you, let's save it here. So we have texts here. So if I was to say, $13, it's over there on the left-hand side, and it's black too, which isn't the right color and then, of course, placeholder text important to wage and that's also like a gray, that's not what we want. So we got to fix a few things that are there by default. So no big deal. We'll do it here in the awakeFromNib function. So textAlignment is going to be equal to.center, so let's just center it. Then what we'll do is, we'll say, we need to set a placeholder text instead of custom color on it, and there's no way of doing that from the standard placeholder. So no matter what, we have to use code if we want to set the color on a placeholder, that's a fact. So what we're going to do is, we're going to say, if placeholder equals nil. Okay, so placeholder is a property of the textField, that's why I have access to it and that's why it's purple. So if it's nil, there's nothing in it, then let's just go ahead and set it to an empty string, and you'll see why in a minute here, but what we needed to do is initialize it with an empty string, otherwise, we can set a color on it. So what we're going to do is create a variable called or a constant called place equals NSAttributedString and we want the one that has string and attributes, like so, and the string is going to be placeholder, and then the attributes are going to be.foregroundColor type UIColor.white, like so, or we could have also done the color literal, either way, like so. Now, here's where this nil checks coming into place. So notice how on this NSAttributedString, I'm using the implicitly unwrapped optional, or basically, I'm force unwrapping this optional. So placeholder is optional. There may be a value on it, there may not be. So if I had not set it to this empty string, if it's empty, this would have crashed our program because we're force unwrapping an optional. So always know that if you're going to unwrap something, it has to have data in it beforehand. So this is our safety check right here. A lot of people will miss that and be like, ''Mark, why are you doing this? That's improper practice.'' Well, it's not improper practice so long as you're initializing it like so here. We also could distort it in another variable name and then run that instead. But this is just fine here. So there's our attributed string and what we're doing is we're setting the property foreground color on it. So the foreground color is what's going to make it white. There's many different things you can do with attributed strings. You can do decoration where there's an underline or a strike-through on it. Basically, you can do all the cool stuff you see with text on the Internet like with web development, you can do here on iOS with attributed strings, which has a little bit more features than the regular standard string. Then what we're going to do is, we're going to say attributed placeholder, this is a property of the UITextField, equals place. So we're going to set it to the attributed string we just created. So again, if this is set here, you will override the regular placeholder. It will override it and it will use this one instead, the attributed placeholder. All right. Then lastly, let's set the text color. This is a property of the UITextField and we're just setting the standard colors. We set the placeholder color, but with the regular text color, it does have a property and all we have to do is do that color literal again. Oops, I forgot the equal sign. There we go. Color, literal and white. White's default, so that works out great for us. So this all looks good here. Our changes aren't noticeable here, but let's see if they're actually noticeable when we run it. So the first thing we need to do is select our text field here and change the class to a currency textField. All right. Then, I have changes to an iPhone 7 simulator and I'm just going to run it. Well, it's yelling at us here because this was supposed to be a space, just adding a space character. So if it's nil, let's add a space character just so it can run because the real use case is, it's actually going to have a placeholder in it. So there we go. So it's up and running just fine. It looks great actually. It looks just like we would expect it to look. We should probably put some text in there to see just to make sure everything is doing what it's supposed to do, and maybe let's just write one quick refactor. So this works and we're adding a space in here. But we can, I think, write a little bit better code. So what we can do here, let's close this here. What we want to do is, basically, check if the placeholder is nil and if it is, then, in any case, we will just use a temporary variable to set an attributed string like so. So what we'll do is, we'll say, if let, let's just say p equals, we'll say placeholder, like so. So I'll do an if let statement here, and what we'll do is, we will command x and command and paste here. Instead of same placeholder exclamation point, now, we'll say p, because it will never even get in here if it's nil, and now we can actually get rid of this. We don't even have to insert the empty space. I think this is a little bit more elegant input solution. What we did was, we wrote some code. We tested, it worked, but then, we thought of a better solution and we refactored it, and this is a very common practice in iOS development. So if let p, so this is a text, equals placeholder. So if it's nil, none of this will run, but if it's not nil, then we'll go ahead and make it an attributed string like so. So let's go ahead and run this again and make sure it's doing what it's supposed to be doing. Okay, perfect. It's doing exactly what we want, no crashes. We've written a better application now. So one more thing I want to do is go to the main storyboard here and let's just center this like so. Then what I want to do is just put some text in it just to make sure it all looks correctly so, or at least placeholder text. So what did the mockup image say? It said your hourly wage. So placeholder text will say your hourly wage. Notice here it's on the left-hand side, but at runtime, it should be in the center. Perfect. So a couple of things. This is really annoying, right? You've probably seen this a lot before but at runtime, it looks great. But here in interface builder, it looks awful. If you're working in interface builder a lot, it really stinks that you have to pretend in your mind what it's going to look like. So what I'm going to do in the next video, is I'm going to blow your mind. I'm going to show you how you can get Interface Builder looking exactly like it looks at runtime. So you never again have to be like, "Oh, what's it going to look like? Where do I position it?" Nope, we'll make it look good. So that's it for now. Stay tuned for the exciting next episode. See you soon.
