Here's my freshly cloned copy of the starting app for the Auto Layout Module. 1
And if you run the app, you'll notice that it's basically the completed version of our Dicee app. 2
Now, when I rotate, however, then the problem starts. 3
It doesn't really render itself properly on any of the orientations other than the original one. Although, 4
all functionality is still intact and it's working, 5
it doesn't look good when we change the screen size, 6
for example, if we run it on a different simulator device with a different aspect ratio or if we turn 7
it to landscape. And you can check this out by going to Hardware, Rotate Left, Rotate Right, 8
or simply just setting the Orientation here. 9
But, essentially, this is our starting point, and I want us to have the same starting point, 10
rather than using the completed version of Dice from the last module. This way, we have the same screen 11
to work with, and you'll be able to follow along much easier. Throughout all the apps that we've been 12
building so far, 13
we've always had this niggling little yellow warning here. And if we click on it, it takes us to the problematic 14
area which is, of course, our design in our Main.storyboard. And in particular, it's concerned with 15
this Roll button because, say, if I orientate my phone into landscape, then you can see that that Button 16
has completely disappeared, and there's no way for the user to interact with our app anymore. All they 17
can do is just look at a pretty logo. 18
So in order to address these issues and others, such as our user interface completely being cut off, we 19
have to learn more about Auto Layout. And instead of starting out with our Main.storyboard, which 20
has quite a few components on it, 21
instead, we're gonna head over to our LaunchScreen.storyboard. And the LaunchScreen.storyboard works 22
exactly the same way as the Main.storyboard. 23
They are both our Interface Builders. So we can build our interface on it. 24
And this one is the screen that flashes up for a couple of seconds before our main screen shows up. 25
So this is where people usually put their logos from their company or a tag line. 26
And because the interface here is much simpler, we can get started here, learning about size classes and 27
orientation. 28
We have the same problem here as our Main.storyboard. 29
When we rotate the orientation, part of our background is completely cut off. 30
It's still pretty much in the vertical orientation. 31
If you click on it, it's just staying exactly the same. 32
And our logo is somewhere down here which is completely invisible because it's off the screen. 33
We're able to see this by using this area here which is where we can specify our different size classes. 34
Each of the icons here represent a different size class and that's why you'll see iPhone 4s, iPhone 35
SE, 36
but there's no iPhone 6, 7, or 8, even though you might own a 6 or 7. 37
So why is that? 38
Well, it's because each of these separate size classes represent a particular group of devices. 39
The iPhone 8, 7, and 6 all have the same size screen and aspect ratio. 40
So they are grouped into the same iPhone 8 size class. Whereas the iPhone 6, 7, 8 Plus all have the same 41
size and orientation, so they have a different size class. 42
It just means that when we're using these size classes to take a look at our canvas, we don't have a 43
whole bunch of devices that are unnecessary. 44
We only have one for each size. And back in the days, when it was a lot simpler, when all we had was the 45
same 3.7 aspect ratio screen, 46
so for the 3, for the 4, for the 4s, then we could have just a single canvas. 47
But these days, there's a whole bunch of different devices, one for every size and need. 48
So that's why they've created these size classes. And previously, when we were creating our I Am Rich 49
app and I mentioned that if you wanted to run your app on your own device, but you had a different device 50
size to the one that's by default on the canvas which is our iPhone XR, and then I told you that you 51
could simply select your size class and update the design as needed. 52
So if you had an iPhone 4, for example, then you could simply drag and drop the logo, so that it's in the 53
middle of the iPhone 4. And this way, when you run it on an iPhone 4 or 4s, then it would look perfect 54
for your particular screen size. But, of course, we can't do this for everybody on the App Store. 55
We can't adjust our size as they are running it. So that's why we have to define rules for how to lay 56
out these elements, rather than manually adjusting it for one particular screen size. 57
Now down here, the area that we've been using to adjust our canvas size in the Interface Builder is called 58
the size class area. 59
And notice how if I give it a little bit less space, it becomes this sort of dropdown list, and if I give 60
it a little bit more space, then it actually shows me or the possible size classes. So you can use that 61
to see which device is currently being selected, which interface style, so light or dark mode, and which 62
orientation. 63
So while you're designing your User Interface, you can use this area to quickly check what it looks on 64
different devices and different orientation. 65
And if you need more space in your canvas, then you can simply click here for it to disappear. 66
So now that we've seen different size classes and we know how to design our app manually to fit different 67
size classes, then it's time to learn more about the automatic rules or constraints that we can place 68
on our elements to make them automatically layout itself to look good on all devices and orientations. 69
For all of that and more, 70
I'll see you on the next lesson.