0
1
00:00:00,120 --> 00:00:06,350
Here's my freshly cloned copy of the starting app for the Auto Layout Module.
1

2
00:00:06,540 --> 00:00:13,690
And if you run the app, you'll notice that it's basically the completed version of our Dicee app.
2

3
00:00:13,740 --> 00:00:17,550
Now, when I rotate, however, then the problem starts.
3

4
00:00:17,640 --> 00:00:24,970
It doesn't really render itself properly on any of the orientations other than the original one. Although,
4

5
00:00:24,990 --> 00:00:28,860
all functionality is still intact and it's working,
5

6
00:00:28,860 --> 00:00:32,190
it doesn't look good when we change the screen size,
6

7
00:00:32,190 --> 00:00:38,580
for example, if we run it on a different simulator device with a different aspect ratio or if we turn
7

8
00:00:38,580 --> 00:00:44,640
it to landscape. And you can check this out by going to Hardware, Rotate Left, Rotate Right,
8

9
00:00:44,790 --> 00:00:48,740
or simply just setting the Orientation here.
9

10
00:00:49,440 --> 00:00:54,780
But, essentially, this is our starting point, and I want us to have the same starting point,
10

11
00:00:54,930 --> 00:01:01,260
rather than using the completed version of Dice from the last module. This way, we have the same screen
11

12
00:01:01,350 --> 00:01:07,760
to work with, and you'll be able to follow along much easier. Throughout all the apps that we've been
12

13
00:01:07,760 --> 00:01:09,140
building so far,
13

14
00:01:09,140 --> 00:01:16,610
we've always had this niggling little yellow warning here. And if we click on it, it takes us to the problematic
14

15
00:01:16,610 --> 00:01:24,050
area which is, of course, our design in our Main.storyboard. And in particular, it's concerned with
15

16
00:01:24,050 --> 00:01:30,890
this Roll button because, say, if I orientate my phone into landscape, then you can see that that Button
16

17
00:01:30,890 --> 00:01:36,950
has completely disappeared, and there's no way for the user to interact with our app anymore. All they
17

18
00:01:36,950 --> 00:01:39,050
can do is just look at a pretty logo.
18

19
00:01:40,040 --> 00:01:47,780
So in order to address these issues and others, such as our user interface completely being cut off, we
19

20
00:01:47,780 --> 00:01:54,860
have to learn more about Auto Layout. And instead of starting out with our Main.storyboard, which
20

21
00:01:55,100 --> 00:01:57,450
has quite a few components on it,
21

22
00:01:57,650 --> 00:02:04,310
instead, we're gonna head over to our LaunchScreen.storyboard. And the LaunchScreen.storyboard works
22

23
00:02:04,310 --> 00:02:06,800
exactly the same way as the Main.storyboard.
23

24
00:02:06,860 --> 00:02:12,770
They are both our Interface Builders. So we can build our interface on it.
24

25
00:02:12,770 --> 00:02:20,480
And this one is the screen that flashes up for a couple of seconds before our main screen shows up.
25

26
00:02:20,480 --> 00:02:25,760
So this is where people usually put their logos from their company or a tag line.
26

27
00:02:25,790 --> 00:02:31,910
And because the interface here is much simpler, we can get started here, learning about size classes and
27

28
00:02:32,000 --> 00:02:33,820
orientation.
28

29
00:02:33,980 --> 00:02:37,530
We have the same problem here as our Main.storyboard.
29

30
00:02:37,670 --> 00:02:43,580
When we rotate the orientation, part of our background is completely cut off.
30

31
00:02:43,610 --> 00:02:46,900
It's still pretty much in the vertical orientation.
31

32
00:02:46,900 --> 00:02:50,540
If you click on it, it's just staying exactly the same.
32

33
00:02:50,540 --> 00:02:57,350
And our logo is somewhere down here which is completely invisible because it's off the screen.
33

34
00:02:57,470 --> 00:03:06,020
We're able to see this by using this area here which is where we can specify our different size classes.
34

35
00:03:06,020 --> 00:03:13,900
Each of the icons here represent a different size class and that's why you'll see iPhone 4s, iPhone
35

36
00:03:13,900 --> 00:03:14,560
SE,
36

37
00:03:14,690 --> 00:03:20,250
but there's no iPhone 6, 7, or 8, even though you might own a 6 or 7.
37

38
00:03:20,390 --> 00:03:21,170
So why is that?
38

39
00:03:21,380 --> 00:03:29,850
Well, it's because each of these separate size classes represent a particular group of devices.
39

40
00:03:30,050 --> 00:03:35,980
The iPhone 8, 7, and 6 all have the same size screen and aspect ratio.
40

41
00:03:36,380 --> 00:03:43,610
So they are grouped into the same iPhone 8 size class. Whereas the iPhone 6, 7, 8 Plus all have the same
41

42
00:03:43,610 --> 00:03:47,060
size and orientation, so they have a different size class.
42

43
00:03:47,060 --> 00:03:53,390
It just means that when we're using these size classes to take a look at our canvas, we don't have a
43

44
00:03:53,390 --> 00:03:56,900
whole bunch of devices that are unnecessary.
44

45
00:03:56,900 --> 00:04:03,890
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

46
00:04:03,890 --> 00:04:07,030
same 3.7 aspect ratio screen,
46

47
00:04:07,040 --> 00:04:12,680
so for the 3, for the 4, for the 4s,  then we could have just a single canvas.
47

48
00:04:12,680 --> 00:04:18,030
But these days, there's a whole bunch of different devices, one for every size and need.
48

49
00:04:18,050 --> 00:04:25,610
So that's why they've created these size classes. And previously, when we were creating our I Am Rich
49

50
00:04:25,640 --> 00:04:32,810
app and I mentioned that if you wanted to run your app on your own device, but you had a different device
50

51
00:04:32,810 --> 00:04:41,690
size to the one that's by default on the canvas which is our iPhone XR, and then I told you that you
51

52
00:04:41,690 --> 00:04:47,660
could simply select your size class and update the design as needed.
52

53
00:04:47,660 --> 00:04:54,620
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

54
00:04:54,620 --> 00:05:01,640
middle of the iPhone 4. And this way, when you run it on an iPhone 4 or 4s, then it would look perfect
54

55
00:05:01,730 --> 00:05:07,660
for your particular screen size. But, of course, we can't do this for everybody on the App Store.
55

56
00:05:07,670 --> 00:05:15,170
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

57
00:05:15,170 --> 00:05:21,840
out these elements, rather than manually adjusting it for one particular screen size.
57

58
00:05:21,890 --> 00:05:28,760
Now down here, the area that we've been using to adjust our canvas size in the Interface Builder is called
58

59
00:05:28,760 --> 00:05:30,690
the size class area.
59

60
00:05:30,860 --> 00:05:38,120
And notice how if I give it a little bit less space, it becomes this sort of dropdown list, and if I give
60

61
00:05:38,120 --> 00:05:44,720
it a little bit more space, then it actually shows me or the possible size classes. So you can use that
61

62
00:05:44,720 --> 00:05:52,310
to see which device is currently being selected, which interface style, so light or dark mode, and which
62

63
00:05:52,340 --> 00:05:54,380
orientation.
63

64
00:05:54,380 --> 00:06:00,530
So while you're designing your User Interface, you can use this area to quickly check what it looks on
64

65
00:06:00,530 --> 00:06:02,820
different devices and different orientation.
65

66
00:06:03,020 --> 00:06:10,190
And if you need more space in your canvas, then you can simply click here for it to disappear.
66

67
00:06:10,190 --> 00:06:16,850
So now that we've seen different size classes and we know how to design our app manually to fit different
67

68
00:06:16,850 --> 00:06:24,320
size classes, then it's time to learn more about the automatic rules or constraints that we can place
68

69
00:06:24,380 --> 00:06:31,280
on our elements to make them automatically layout itself to look good on all devices and orientations.
69

70
00:06:31,790 --> 00:06:33,190
For all of that and more,
70

71
00:06:33,260 --> 00:06:34,300
I'll see you on the next lesson.