How to use Auto Layout for beginners in Swift - iOS 2021

[Music] let's come back to another Swift tutorial today we're gonna be taking a look at Auto layout particularly an introduction to Auto layout so if you're not familiar Auto layout is a layout engine provided by Apple for their various platforms to automatically layout items on the screen based on constraints and rules and have those items be laid out across different devices different screen sizes so you can imagine with iPhones there are these iPhones with the notch there are smaller iPhones bigger iPhones there's also iPad so Auto layout helps us out with that tremendously so let's start by creating a new Xcode project we're gonna do a single view app call it what you'd like I'm gonna call it test for this video save it where you'd like and let's expand our Xcode window to give ourselves some more room to work and let's head over to our storyboard which is main dot storyboard and we're gonna be working in here for the remainder of this video so first and foremost we're just gonna drag on a UI view and set a color to it we're not gonna focus on the various elements since this video is kind of around Auto layout so let's come up here and hit this icon to get our library let's search for a UI view let's plot that on the screen and let's give it a nice bright color and after doing that what I want you to do is we want to run this app on two different simulators to see the problem we currently have and what auto layout will do so let's come and pick any simulator for that matter we just want to make sure we have two different simulators so once we run it on here we'll see that as this storyboard looks we should see a rectangle like so now what I wants to do is go and change this and let's pick like an iPad something bigger let's pick this iPad pro and let's run it on here and you'll see something a little different you'll see that this rectangle is much smaller and it's up here and the reason for that is because we haven't supplied any constraints to this rectangle so it's basically using the sizing of an iPhone and just kind of plopped it where it seems appropriate from this side this size perspective so Auto layout allows us to add constraints to give the system rules to layout our items so those rules are things like in absolute width and height it could be relative positioning for example if we had another view here how much space should there be between the top of that second view and the bottom of this blue view you can also do things like proportion we want this blue view to be 50% of the width here it also deals with things like alignment centering and horizontal horizontal and vertical centering so with that being said and me rambling on let's actually apply constraints and see them in action so to apply constraints it's pretty simple we select all we want to apply constraint to and we can use these icons down here and they're very very like small and they don't stand out and Apple should have probably make them made them stand out more but there's a couple of things we can do so once we have our view selected like so up here like so you can come down here and hit this and we get this panel open up opened up and in here we can specify constraints so these four things that you see here specify as these arrows and lines kind of exemplify how much space you want between items in this view so because there's no other item in relation to this blue view on our screen this automatically defers to the screen size so let's say we do something like 20 20 20 20 and then we can hit enter or hit this button to apply constraints well see that our entire view jumps and it looks like we have 20 from each side of the screen now it also looks like we have some more space here and here in relation to here and the reason for that is not because we enter the number but there's this concept of safe area which on these devices is the size of the notch up here and the size of this little home bar down here that is present on the iPhones with a notch and the reason that exists is so we don't overlap that content and things aren't covered under the knotch but that's why this doesn't look as even but let's actually run this in our iPad which we still have selected and see what it looks like so in our iPad it's also 20 from the top 20 from each other side similar to this now why is that that's because we applied a rule to this view regardless of the screen size that you're on you want this thing to be 20 from each side you've pinned it to the sides of the screen now if we change this to an iPhone for sake of showing an example basically what you see here is what till get on the iPhone cool like so now let's take a look at some more constraints so let's say let's run table runner this before we actually do more constraints I can actually select it and see how we can get rid of constraints so once we select this here in this sidebar there's this little ruler icon and this is where all the sizing for this item that selected shows up and we can see we have our four constraints here and they're actually called trailing leading top and bottom trailing and leading is kind of big picture shows is left and right so Apple kind of just gave it to it gave that name to it but you can take a look at the picture and kind of understand what it means but what we can do is simply click on a constraint delete it delete it delete it and delete it and we see our view didn't actually move but there are no longer constraints on here so if we run this again on like a big iPad it might look messed up and in theory should yeah it does like so because this is showing the iPhone size here not the iPad size so it just kind of plopped it in so let's look at some more constraints so what if we want to have an explicit width and height and we want to Center this we can add an explicit width and height and we can do that by just specifying it but in that case we can't specify it like left right top and bottom per se because those constraints are conflicting at that point what I mean by that is if we say this is a hundred by a hundred a square and then we also say we want this to be ten from the right and from the left top and bottom the layout engine is gonna basically think hmm well you want this to be a hundred by a hundred but you also want it to be pinned to the side so which one is it right you can't have conflicting constraints that's a super important principle that is very tough at the beginning because you have to mentally wrap your head around what a constraint is actually doing so let's click on this blue rectangle again come down here click on this and we see we have with it height in here we can edit these and once we do edit them this check box will get checked automatically let's do 220 and 220 and we can hit apply and we'll see our we'll see this change in just a second our blue rectangle the reason it didn't change is because we've given them the rectangular width and height but how does lay auto-layout know waiter on the screen we want to put it well in it if it in fact does not know so if we come up here you'll see we have this little red error indicator for the view controller and if we click it we'll see that it's telling us that we're missing constraints this view it needs a constraint for the x position and the Y position in other words it needs to know where to put it on the screen so auto layout itself is very good at trying to deduce what constraints are missing and/or conflicting and it'll yell at you and tell you with these various errors so what we said we're gonna do is we're gonna Center this in the larger containing view and we can do that by coming down here and instead of selecting this we're gonna select this one oh just kidding we're gonna select this one and we can do horizontally and vertically container if we check this and keep this as is we're gonna see that this view will get smaller and get centered in our containing container like so the error is all disappeared we can come back here now if we run this and I believe we still of iPad selected up here we'll see that we have a 200 by 200 square and it's centered now similarly if we run this on an iPhone we'll also see we have a 200 by 200 square centered in the middle now notice the size actually didn't change but in this case it takes up more space obviously because the device is smaller but that's the purpose of auto layout the last example we're gonna do is we're gonna add another view and we're gonna show relative positioning in other words the positioning of one thing to another with constraints so let's come up here and grab another view let's drag it in again we're gonna give it a different background color we can select this let's give it a different color let's go with this one and let's apply some constraints so again let's come down here now we're just gonna do this one so we're gonna say this is 20 from the left 20 from the right zero from the bottom and we want this to be let's say 20 from the blue one the blue rectangle above so how do we know that this 20 specifies from the specifies 20 from the blue one and the way we do that is we hit this drop down and we see that in here we have view safe area and view so we can actually name our elements up here and it helps us in our constraints the entire white background is called view but this blue one by default is called a view also so let's actually give this a name and we can do that by selecting it the blue square hitting enter on this and typing in a name so we're gonna call it blue view hit the red rectangle again come down here to add constraints again and hit those drop down it was see there's a blue view in here and it's automatically checked cuz auto layout is smart enough to understand that's the closest thing so we probably want to have relative spacing to it we'll do 20 20 20 10 and if we hit apply forward constraints or add four constraints we'll see that we now have the red rectangle expanded and 20 from the top here so let's again run this on iPhone and iPad to see what they look like as expected on the iPhone it basically looks like what we had here and if we run it on an iPad we'll see that there's Red Square in theory rectangle should be much bigger which it is so this red is 20 from each side and it's 20 from the Blue Square which is centered and a fixed width and height so that's kind of Auto layout in a nutshell there's a lot of other constraints you can apply but these are by far the most common ones to put together an application the last thing I'll actually mention here which is kind of cool / important is right now we see this as an iPhone with a knotch how do we see this in different devices so we don't have to keep running it to make sure our layout looks good and the way you can do that if you haven't noticed down here is we have this selection option and we can actually change this in real time to see what it looks like so we can pick a iPad we can also change orientations we can pick a let's see let's hit this again you can change orientation let's see we can do split screen what it looks like there's other iPhones in here that seem to have disappeared but in other words in this menu we can go ahead and select different screen sizes and devices and we can actually visually see the storyboard here what our layout will look like with the current constraints we have instead of running our application and every single simulator which quite honestly is not an efficient use of time so yeah that's about it that's an intro option 2 autolayout I would really encourage you to play with this because it's something that you get down once you use it more and more thank you so much for watching if you found the video helpful please leave a like below it helps out the video and channel a lot by all means leave comments I'd love to help you guys out as much as I can I love hearing from you all subscribe if you're new I do regular videos on swift development iOS other software engineering and technology in general and yeah I'll catch you guys in the next video

Channel: iOS Academy

Views: 37,921

Keywords: swift, ios, app development, xcode, learn, tutorial, iPhone, iPad, tableview, getting started, beginners, Apple Developer Program, make app, apps, bootcamp, app millionaire, #autolayout

Id: 3y23UebzCYw

Length: 13min 49sec (829 seconds)

Published: Tue Feb 04 2020