[MUSIC] And in this exciting lesson, we're going to learn how to work with auto layout and multiple screen sizes, namely iPad versus iPhone. What a lot of new developers do is they'll just make one set of designs that look okay on iPad. But it's mostly for iPhone, but they want to support iPad only. But that's not the Apple way. The Apple way is to build a user interface that accentuates the larger screen size and makes the experience even better. And so I'm going to pull open a couple of images here, okay? So this app is called the Dev Profile, okay? And notice here, there's some differences between the phone version and the pad version, okay? So the phone version, these icons right here are lined up here in the middle, centered in the middle of the screen. This icon or this image here is a little bit taller looking. At least when you compare them side by side, it's taller. Versus, and you can see there's more space between this computer and the bottom, than there is right here and here on the iPad. These three icons are on the right-hand side of the screen. And then on the iPhone, these are squares. But on the iPad, these are rectangles. And one more thing on the iPad, there's a button called Customize Dashboard. And on the iPhone, it doesn't exist. It's hidden altogether. And this is a lesson that a lot of courses and lessons out there neglect to teach, and that's how to use basically traits for the different devices. So basically being able to build a layout for, let's say a compact width, which is an iPhone versus a regular width regular height, which is an iPad, and then varying for those different traits. And so you can do lots of things with that. You can hide and show things. You can have bigger font sizes for bigger tablets and things, bigger devices and things like that. Okay, so that's what we're going to work on. Create a new Xcode project. Single View App is fine. And I'm going to call this dev-profile, and this all looks good here. And then let's go ahead and just put it in the app-dev-profile here, and click Create. Awesome, so that looks good to me. Let's go back to my terminal, Cmd+space for the spotlight. And then ls here, and we've got this new project dev-profile. So now we're in here. And let's see, git status. So we've got our changes here. So, git add -A, git commit -m initial xcode project. And then the last thing I want to do is actually just create a branch. So, git checkout -b. And we're going to call this lesson-01. Boom, okay, so we're all set up, ready to go. And again, you don't have to use version control in this if you want. But I recommend that what you do is whenever you create a new project, go into GitHub, create a new project. Especially if you're learning and want to get a job, having these projects on there will help you get exposure, and let people look at your code and your work. So what we're going to do first is we're going to build out the iPhone screen here. What I typically like to do is look at both the profiles, or both the iPad and the iPhone layouts together like we did, and kind of just think about what I'm going to have to do differently for an iPad. Because what we'll end up doing is, we'll build the iPhone first, but it lets us think ahead. So I already know that this image might be a little different. I know that these icons might be a little different, and these ones here, and this one here. So it's just something worth thinking about as we're building the iPhone layout. So let's go ahead and do the iPhone first. So what I'm going to do is zoom out here, so I can keep this image open at all times, like so. It's not letting me move it, as usual. That's okay, we'll just move this right here, and we'll move this over here. And now this is looking real nice, okay? Cool, and so actually, let's open up our Navigator here again. And let's go into our main storyboard. And we've got a blank canvas here, that's great. So the next thing I want to do is just bring over all the images that are required for the project. I've got them here in a folder. Now you have them as well. And all we're going to do is go into the Assets folder, and we're going to drag all those in. So Cmd+A on the images that are on my other screen here, and I'm just going to drag them in. And I've given you 1x, 2x, and 3x images for everything, cool. So back to the main storyboard. Let's go ahead and build out this layout. So first things first, is I know this is an image back here. And so what we're going to do, I mean, this could have been a view that we set a grading on and put an image in the middle. But the way our designer did it was, he gave us a single image, okay? So let's open up the right-hand side here by clicking this top right icon over here, Utilities. And I'm going to type in the word image to bring up an Image View. And we're simply going to drag it up here to the top. And I'm just going to eyeball this, I'm not going to make it pixel perfect. And what I'm going to do is go ahead and pin this from the top, from the left, and from the right. And I will give this a fixed height for now. I may change it later if we need to. But for right now, give it a fixed height. I'm just assuming it will work on both iPhone and iPad. Again, you don't want to over stress out about supporting both screen sizes at the same time. Build it out for iPhone first, and then go on to the iPad. So give it a fixed height. Let's say 150, since it's a more even number, and that looks good. Now the next thing is, I'm going to select this image here. And let's just go ahead and get the background. It's just this Devslopes BG here. And of course, we have a problem. It's stretching it. So instead of Scale to Fill, how about Aspect Fill? Now you notice when we do Aspect Fill, it goes out of the edges here, okay, which isn't good. We don't want it to do that. We want to cut it off. And so whenever you're working with Aspect Fill, if your image goes beyond the bounds, all you have to do, you can do this via code or here in Interface Builder, is go down to Clip to Bounds and click it. And what's going to happen is anything that's out of the bounds is going to be clipped. And this is a common problem that a lot of new developers have is this Clip to Bounds. What do I do, how do I? It's going off the edge, and they think something's wrong. That happens a lot with stack view. Sometimes images like to bleed out in stack view. And you think your stack view's broken, but it's not, it's just your Clip to Bounds. So we're going to turn that on, so it clips it, cool. That was easy. So next thing we'll do is this little icon here on the left-hand side. So I'm going to do another Image View. This might be like a profile, right, on a profile screen or something. So let's just say 150 by 150. That's a little large, say 120 by 120. That still seems a little big. How about 110 by 110? Again, I'm just eyeballing this, I know it is a square. But just eyeballing it and dragging it around here, and that looks about right. So I'm going to change the image on this. And this one is a profile image, so that's not it. Let's look for our devslopesProfileLogo. There it is, perfect. And let's just go ahead and do Aspect Fill. It's not going to stretch because the image is a square. But I always keep it on Aspect Fill anyway, in case it ever did change. So we've got this image here. Let's get the label on the screen that says Devslopes. And notice how it's not actually here in the center on the image. If it's in the center, it just doesn't look quite right. It looks like it's almost a little lower. But for the time being, I'll put it in the center, just to keep things easy for now. We'll go back and adjust later. I'm going to go change my font to Custom. And I'm going to go to Avenir. I just like that font, Avenir. And let's just change it to Medium. And I'm going to change the font size a little bit, and we're going to make this say Devslopes. I'm not going to write any code in this lesson. This is all about supporting iPad and iPhone using just the constraint system, okay, in the different size classes. So Devslopes, that looks good. And also, I'm not going to go in the code and show you how to do these rounded corners. You already know how to do that. Which is you can either reference an IBOutlet, or create a custom view and then set layer.cornerRadius. And then it'll set the corner radius on this image here. So you can do that on your own for practice. And then I'm going to put three more images, these icons here. These could be buttons as well. I guess we can make them buttons. Let's make them buttons, why not? Make three little buttons, like so. And we'll take out the word button, and what we'll do is we'll put the image here. And this image is probably going to be the camera icon. Do we have a cameraButton? Yeah, cameraButton, here we go. Let's make it a little bigger. I'm holding down Shift so it stays in the square, okay, it maintains the aspect ratio. And all I'm going to do is Cmd+C, Cmd+V. Or I can Cmd+D to duplicate, same thing. I got three buttons. That's the camera. I think this other one is the favorites. Yeah favorites, so let's type in favoriteButton. And this one is InboxButton, okay, like so. And of course, it probably makes sense to put those in a stack view, but we'll get to that in a minute. So whenever you start seeing grid things like this, immediately it comes to mind, stack view. Stack view, because it just it makes things really easy to work with here on this. I'm not sure yet if we want to use a stack view, because we may have to manipulate the text and its position and stuff. So anyway, we'll see. Let's go ahead and get these other four images on here. So we've got an image here. And of course on iPhone, it's a square right? So let's round, let's guess, it could be we want 150 by 150. Could we fit four in there? Maybe let's do 130 by 130, just to be safe for now. And what we'll do is, we'll set the image on this one. So this one is data, and it's stretching the graphic a little bit. So let's say Aspect Fill, okay? And then of course, turn on Clip to Bounds, because it's bleeding. That looks good to me. And then let's go ahead and Cmd+D to duplicate. And we've got another image right here. And this one is going to be data, not data. This one is video, code, videos image. That is not right. I think it's just image. Images Image, that's a weird name. Blame it on the designer. We can yell at him later, okay? So now we can probably put these two in a stack view, just to make sure we start tying up the loose ends here. We gotta tie up some loose ends. So let's select this and this, and let's put them in a stack view. And of course, you're like, it's broken again. What do I do again, Mark? The stack views are so scary. Well, it is really annoying that it does this, but we'll fix it. So what's happened here is stack views, they like to do the thinking for you, right? Remember they do constraints for you. And so without putting some type of limitations on the stack view, we have weird things that happen like this. And so what I want to do is maybe set a max width on this one image here. Let's set a max width, and this is how you do it. So let's click the pin button on this image. So I've gotta select the image itself here, Data Image. Click the pin button, and let's set a max width. Not 500, but let's set it to what we had at, let's say 130, okay? Wow, is that really that small? Okay, maybe we should say 140 on that. That looks a little bit small. Okay, 140, and notice how when I double-clicked on that constraint, so select your image. And see that constraint there, the width equals 140. So with stack views, you don't typically want to set a fixed width or fixed height. You can, and it'll work in most cases. But sometimes it'll break. So what's actually better to do is set a less than or equal to, or greater than or equal to. So we want the value to be less than or equal to 140, in case it's on an iPhone SE and it's really small. We don't want to set a fixed width of 140. We want it to be able to scale down on its own. So with stack views, you can set a fixed width and fix height. Apple actually recommends doing a less than or equal to, or greater than or equal to, not to actually do the equal to itself. And that's fine, so that looks okay. But of course, this is really long, and so we can set one more constraint on it. So what I want to do is, I'm going to select this image, Data Image. Click the pin menu. And I'm going to click this icon here called Aspect Ratio. So we've set a max width. Okay, and so if you have a max width with an aspect ratio, it'll keep it in as a square. Okay, which is what we want here on iPhone. So click Aspect Ratio. And you may notice, well, it didn't do anything, Mark. Well, that's because the aspect ratio is the one that is the way it looks right now. So the 14 to 25, but we don't want that. We want a one-to-one ratio, a nice little square. So double-click the Aspect Ratio constraint, and we're just going to type in 1:1. And it's going to put it into a square. I hope this isn't overly confusing to you. So if I can recap this, when you're working with a stack view, remember stack views add the constraints for you. Okay, but it didn't look the way we want it. It's smart thinking, wasn't smart enough for our app. So we just set a few limitations on the stack view. One is we say, hey, don't let it be any wider than this. And then we also forced it to a square, okay, using a one-to-one aspect ratio. That way it always stays a square. Okay, and so we got those constraints there. But of course, this one didn't really obey. What I'm going to do first is, I'm going to go to my stack view and I'm going to change the properties. because most of the time, you don't need to set those same constraints on every single thing in there. Sometimes you might have to, but sometimes you don't. And when do I not use constraints, and when do I use constraints? Or when do I use stack view adjustments here in these items here? It's just going to have to play and feel around with it. So what I'm going to do is make sure my Distribution says Fill Equally, okay? And notice how it made the other ones match. So what happened was this first image, it has limitations, right? We set a one-to-one aspect ratio and a max width. Well, when we say Fill Equally, then it has to adopt those on the other items in there. And so then we don't have to go and add those constraints because it's doing it for us automatically, which is really nice. So now that we have the stack view looking about the way that we want, okay, we're going to go ahead. And well, we should pin from the top down. We're not ready to pin it yet. So let's go ahead and start pinning these items. So we have pinned this, I believe, this image up here, yep. So the next thing to do is to pin this. So what I'm going to do is I'm just going to pin it from the left margin at 0 with the margins on. And we'll say a 100 from the top, just to keep it equal. And we'll give this a fixed width and a fixed height, so it doesn't do anything weird. And then this label here, I'm just going to pin it itself to this image right here. I had them in a stack view when I was building this out and I just couldn't get the height and positioning the exact right way that I wanted. You can try it with a stack view. But again, when stack views aren't giving you the look that you want, you just set the manual constraints, which is no big deal. So what we're going to do is, I'm going to select this and this, okay? And I'm going to click the Align menu, and I want to give these guys vertical centers here. Now the Devslopes label is going to adopt to the devslopes logo image, because those already have constraints on them. >> So when I click Vertical Centers, it'll move Devslopes just slightly there. So these will now always be in the vertical center to each other, always the same. Now what I'm going to do is click the Devslopes logo, and I'm going to just pin it to the left. So pin it to the image here by 8, and yeah, looks good. I don't think we need to, yeah, there's no red there. So I think that's not going to move anywhere. It's going to stay at the center of this image here, and it's going to stay just to the right of it because we pinned it over there to the right. So that's looking real nice. And then the next thing is holding Shift, select these three buttons. And click the stack view, ta-da! And let's go over to the attributes, and let's go ahead and Distribution > Fill Equally. And let's just add some spacing. No big deal, just some nice, nice spacing. Very good, okay, yeah. Working with stack views in Interface Builder is kind of like painting like Bob Ross. Where you just kind of go on the canvas and you just splash things on, and you put a little inspiration in it give it a little touch. >> Give it a little touch, give it a little push, caress it very gently. >> And I know that's a little annoying for those of us who are more scientific, us programmers, or people who are more into math, because we want everything to be perfect. But when it comes to stack views, some things just aren't perfect. It's just the way that it is. But the benefit of it not being perfect is it looks good on multiple screen sizes without having to write tons of code, which I think is more important. It's about the user experience more than anything else. So that looks good. We've gone ahead and made it equal. I just want to go ahead and pin this in the center of the container like so, and then I'm going to pin it to the top of this. Let's see this devslopes image here, 24. Let's just say 20. Let's say, let's just leave it at 24. I like that, so 24. Well, okay, so that's going to stay right there in the middle, which is looking really good. Okay, now we have this bad boy here, the stack view. So let's do something similar, it spin it 24 from the top, similar to the other one. And in this case, I will pin it to the edges. So let's make sure margins are on. And I'm going to say, let's say 8 from the left, and 8 from the right. Perfect. And let's go ahead and add some spacing to this stack view. So we have the nice spacing in the middle. Notice how it shrinks down automatically. Okay, this is really important. Remember when I went in here and I said it's a width of less than or equal to 100? We've basically given it permission to shrink itself down, which is what we want. If I had just set max width, this would not be doing what we wanted to do. In fact, we'd probably have something broken right now. So again, when working with things inside a stack view, you can use fixed width and height. But sometimes it can break, and so it's better to use greater than or equal to, or less than or equal to. And that's a good, let's say 15 spacer, and I'm okay with that right there. This is awesome. This is really coming together. All right, and so yeah, this is looking good. And then let's go ahead and Cmd+D to duplicate this. And I feel like it just did something naughty. It did, it just pasted junk out here in the no man's land, okay? All right, Interface Builder, you just keep acting weird. So I just Cmd+C that stack. I'm going to Cmd+V in here, and just drag this down, like so. It was just acting weird. And in our stack view here, we had a spacing of 15. So we want this to be 15 away from the stack view above it. So I'm going to go ahead and pin it 15 from the top. And again, similarly, 8 from the left, 8 from the right. And boom, I like it. Then we don't have enough spacing on the bottom, I'm okay with that. What we could do, so it's less than or equal to 140, we can make it smaller. I could say 130, we can give that a shot. So if I said less than or equal to 130, no, it's still not enough. Yeah, okay, you're probably asking, why is this not working? The reason is stack views add the constraints automatically. So it will decide on its own if it wants to shrink it or not. So one thing we could do is reduce the space here, and the space here, to move these up. But I don't want to, I'm okay with the way it looks. If the designer really cares that much, he can come yell at us later about all this here. So let me make sure that this is all looking good. So if I go to iPad here, it should look almost identical. Okay, cool. So here's the problem with the iPad, right? It's like, well, Mark, these images are too big. We need to change the images too. Actually, let's do that here. We're looking at it and we're like, the images are too big. Yeah, I know it looks like the iPhone, right? But I don't know, it just doesn't feel like the right experience. And it's not, this is not the right experience. It's the right experience for iPhone, but not the right experience for iPad. So I just change this image to the video one, and this one is the code one. So I'm going to type in code. Is it Code, Data Image? Code, yeah, there we go. Again, these aren't very well named. You can blame that on Evan Liang, our designer, next time you see him. Okay, so there's four images, it's not looking great. And it's definitely not looking according to our designs, if you remember correctly, right? Okay, this is a better user experience because the icons are better utilizing the space. And this is over here, better laid out. You don't need it here. And then we've got this extra button that an iPad calls for, where you can customize your dashboard. Where maybe you couldn't do that on iPhone because there's not enough screen space. So we have a few things to fix here. But we've done so far is we've built out the layout for iPhone, and all is looking well and good. So we're going to call this video done. And in the next video, we're actually going to use what's called size classes. Size classes will allow you to specify specific traits for different screen sizes, that effect that screen size only and not other screen sizes. And that's how we create wonderful user experiences without having to write any other code under the hood. You can hide stuff and turn things off, but you don't have to write extra code, which is really nice. So that's it for now. Let's support iPad.
