[MUSIC]

Hi, my name is Pasan, and I am an iOS developer.

Over the next few videos, we're going to spend some time getting

familiar with the basics of Auto Layout, the primary positioning,

and sizing mechanism for iOS, Watch OS, TV OS, and Mac OS apps.

When Auto Layout was first released, there was a lot of frustration and

apprehension around it.

Why did developers have to move from a system that worked perfectly at the time?

Why was Auto Layout so confusing?

And why did it rarely ever work beyond the simplest of used cases?

Auto Layout has come a long way since its release, and

is now a much more robust system with better Xcode support.

Many developers are still skeptical having been burned by their initial experiences.

Over a series of videos, we hope to dispel all those feelings and

get you comfortable with using Auto Layout.

We're going to start all the way from the beginning with a history lesson

to help understand some of the motivations behind Auto Layout, and

then we'll work our way up.

We won't cover the entirety of Auto Layout here as there's a lot of ground to cover,

but I linked the relevant content where you can learn more.

Now, before we start with actual Auto Layout,

I'd like to give you an idea of why Auto Layout

is absolutely the way you should be sizing and positioning your views.

Hopefully, this isn't as relevant anymore.

But in the recent past, if you Googled Auto Layout tutorials, you would, and

you still may encounter a lot of people complaining about it, and

that might effect your mindset from the get-go.

But understanding why the old way isn't going to cut it anymore

will be a lot more appreciative of Auto Layout going forward.

Let's start by creating a brand new Xcode project.

I should note that all this content is written at the time of Xcode 9 and iOS 11.

If you're watching this in the future,

then look in the teacher's note section for any updates or changes.

We're going to build a really simple layout without Auto Layout

to get a frame of reference.

Pun intended, if you know what I'm talking about.

So we'll create a new single view app, and I'm going to call this,

Springs, AndStruts,

and we'll hit Create.

In Main.storyboard, in our storyboard scene,

we're going to click on the file inspector in the utility's panel.

This is the first icon from the left.

Now, if we scroll down, there is a section.

Make sure we're in our scene.

Okay, and then we get the contextual menu here.

And if you scroll down, you'll see the section, Interface Builder Document.

We're going to uncheck the box that says, Use Auto Layout.

The moment you do this, you should see a pop-up asking you to disable a feature

known as trait variations, and create a document that limits you to designing for

a single device family, like the iPhone,

instead of universal layout that targets the iPhone and the iPad.

Now, in addition, if you read the fine print,

you'll see that this affects how we use segues as well.

They are no longer adaptive.

So this should be your first indication of the flexibility that Auto Layout offers.

Okay, so we'll Disable Trait Variations.

Without Auto Layout, we have to create different layout documents for

varying device sizes.

Right now, we're designing for the 4.7 inch iPhone,

which at the time of this recording, is the iPhone 8.

If you look at the very bottom of the Xcode window, inside of the storyboard

scene or inside of the storyboard editor, you'll see a menu down here.

Now, this is the document outline.

So this down here is the menu I'm talking about.

Right now, over here on the left side of the menu, it says, View as iPhone 8.

There's some other symbols there, WCHR.

We're gonna ignore those for now.

So you can click on these.

And as you can see, you can change the device we're designing for.

This is a canvas for the iPhone 10.

And you can also change the orientation.

We're going to keep it at the 4.7 inch iPhone, or the iPhone 8.

Our design here is going to be very simple.

So we're going to drag a view onto the scene from the object library,

gonna place it in the middle.

And let's give it a different background color.

So we'll select the view, and then we'll go to the attributes inspector.

And under Background, let's change it to something random, so

that we can differentiate it.

Now, let's position and size this view using the Size Inspector,

which is the second icon from the right in the utilities area.

Okay, so we're going to give this an X value of 25, a Y value of 44.

So that puts it up there a little, okay?

We're going to give this a width of 160, and a height of 300.

Now, our four different views.

So I'm going to select this hit commands C to copy,

and then I'm going to paste it three times.

Let's space them out, so they look a bit like this, and

then let's modify these values.

So the next X value, we're going to say is at 191, Y 44.

And then this one, the bottom left is at X 25,

Y 352, oops, messed with the wrong things,

X 25, Y 352, okay?

And the last one is at X 191, Y 352.

Let's go ahead and give each of these different background colors.

Well, it doesn't matter what you pick.

So we'll just go ahead and

pick some recently used colors here, and gray.

And then let's hit Other, and we'll get a blue.

Let's pretend we're back in 2008.

There's only one iPhone to make apps for.

So by positioning a view like this, using a hard-coded coordinate point,

we don't need to worry about other layouts in portrait.

What you see here is where the final view is positioned.

Now, making sure you select iPhone 8 from the simulator menu or

the simulator options.

Let's run this app.

Now, when the simulator comes up,

you might have to resize that a bit to fit on the screen.

There we go.

And as you can see, the layout is pretty much identical.

So back in the day, you didn't really have to worry about your layout changing in

portrait mode, because you only had a single device to worry about.

Okay, well, what if the user rotated their phone?

Now, you can rotate the simulator by using the command and arrow keys.

And when you do this, you'll see that the layout breaks immediately.

So, what do we do here?

Because iPhone rotation was initially the only layout and

sizing problem we had to worry about on iOS, the solution was relatively simple.

Every view has an autoresizing mask property that determines

how that view should behave when the containing view is resized.

When we rotate the phone, the container view,

the view that these four views are embedded in, changes its size.

And using autoresizing tasks, we can dictate how any subviews respond.

So back in our scene, let's clear out all this, okay?

Let's select this first view.

And again, we're going to go back to the Size Inspector.

Now, the third section here labeled Autoresizing is what we're concerned with.

An Autoresizing mask consists of two components.

Fixed offsets from the superview,

which are represented by the I-bars that you see here.

And then flexible sizing allowances within the view,

represented by these arrows inside the box.

This autosizing solution was commonly referred to as springs and struts.

Where springs refer to the flexible width allowance,

while struts were the components that kept the views a fixed offset away.

With springs and struts, we're essentially saying we want a view to be a fixed offset

away in a certain direction.

So take the first view.

When we rotate the phone, we always want this red color view to be the top left.

So in the Autoresizing section, we can specify that this view is always

a fixed offset away from the top left by making sure these two I-bars are selected.

We'll repeat this to specify an offset for all the other views as well.

So, for the second view, for the green view,

we need to be offset and pinned, sort of, to the top and right.

Deselect this one.

And then the gray one is left and bottom.

And then finally the blue one is right and bottom.

So we'll disable these.

And you could see here what that looks like.

Okay, now, if we stop and run the app again.

So our portrait layout should look the same, nothing changes there.

And when we rotate, okay, our layout looks somewhat better, but

the spacing isn't what we specified.

So, let me do it in this direction.

So they're pinned to where we want to, but they're sized differently, and

there's some spacing issues.

There's no spacing between the views in the Y direction.

But in the X direction, horizontally, there's this ton of space.

So the issue here with Autoresizing masks is that you can tell the views how to

resize or how to react, but not by how much.

Okay, so let's hit stop, and we'll go back again and

get rid of the Autoresizing masks that we put on, Right?

So deselect all of them.

And what we're gonna do instead is create outlets, For each of these views.

Right, so we had the Control drag over,

and I'll say redView,

greenView, keep the naming simple.

GreyView, is that how you spell grey?

I always forget, and blueView.

Okay, now instead of using Autoresizing masks, we're going to position and

size these views in the view will layout subviews method.

I'm going to go back to the standard editor and

navigate to the ViewController, since that's where we're adding our code.

And in here, we'll add that method in, so it's called viewWillLayoutSubviews.

And we'll first call super.

Okay, since we want to alter our layout when we switch orientations,

we're going to detect if we're in landscape and switch our layouts.

We can get the orientation of the current device by writing let orientation

= UIDevice.current.orientation.

This returns an enum with a series of values that describes orientation.

So we want to check if its either UI device orientation dot landscape left, or

dot landscape right, and then alter our layout.

So we say, if orientation == .landscapeLeft,

or orientation == .landscapeRight, then we'll change our layout.

So now is where we write a lot of repetitive code.

For each view, we're going to modify the view's current frame rectangle.

So we'll say redView, or, right, that's our first one.

So I say, redView = CGRect.

So I'll say redView.frame.

Since the frame is a rectangle,

we'll define a new rectangle to occupy a size and position.

In here, we'll say x: 20, y: 20, width is 307, height is 161.5.

The next one is the greenView's frame.

And again, we'll pass in a new rectangle.

And this one is x: 340, y: 20,

width: 307, height: 161.5.

Next is the greyView.

And we can copy-paste this.

The x value here is 20, y is 193, and the width and the height are the same.

And then finally, we have the blueView.frame =,

and we'll paste this again.

And finally, the only values we have to change here is the y value, so y: 193.

Okay, let's run this again.

So if you run the app in, hold on.

We'll make sure you run it in portrait, there we go.

Now, if you run the app here in the original portrait orientation,

it looks okay.

This is what we specified.

And then if you rotate the app,

you can see that we've managed to maintain the layout.

But if we rotate, again, back to portrait, you'll see that it's broken.

So to fix this, we need to add an else clause to our layout code.

So we'll say else over here, and then we're going to copy all of this,

paste it, and again, change the values.

So x: 25, y: 44,

width: 160, height: 300.

Again, I'm going to copy-paste this frame.

And then for the greenView's frame, I'll paste this here.

The x value is 191, y is 44, width and height are the same.

So this is for the greyView.

The x value is 25, y is 348, and then everything else is the same.

And finally for the blueView, x, oops, scroll back up.

x is 191, y is 348, and everything else is the same.

So now, again, if we run our app and rotate the phone,

we can keep rotating, and everything works okay, right?

Actually, not really.

So let's hit stop, and we'll switch the simulator over to the iPhone 8 Plus.

Or better yet, let's do it to a 5S,

which is the smallest screen size that we have available with this version of Xcode.

So on an 8 Plus, if you run it, and

you can try it first, you'll see that there's lots of white space.

But on the 5S, which I'll need to resize, once this loads,

you'll see that the views don't even fit on screen.

So if we want to do this the old way using springs, struts, or

manually setting view coordinates, we need to have of

if else clauses to catch each device size and orientation.

While the old way of laying out views does get the job done,

we'd have to write a lot of code to achieve it.

At the time of this writing, there are five different iPhone screen sizes we need

to support with just ten layouts, if we include orientation changes, and

none of that includes iPads for universal apps.

So hard coding coordinate points is simply not a feasible approach.

So that's the old way.

Let's see what Auto Layout brings to the table.