0
1
00:00:00,300 --> 00:00:06,180
Now, while we've been building our apps thus far, some of you might have already noticed that when you
1

2
00:00:06,180 --> 00:00:13,290
rotate the apps or when you try to run the app on a different screen size, often our beautiful designs
2

3
00:00:13,290 --> 00:00:21,270
gets completely corrupted, and they look terrible when in landscape or when run on different devices.
3

4
00:00:21,660 --> 00:00:28,530
So even though our Dicee app works perfectly, when we try to rotate it, bits of it gets completely cut
4

5
00:00:28,530 --> 00:00:35,220
off, and we can no longer really interact with our app properly. So we can't really upload our app as
5

6
00:00:35,220 --> 00:00:36,630
it is that the App Store.
6

7
00:00:36,810 --> 00:00:42,600
We, first, have to learn about the rules that we can put into place in order to make it look great on
7

8
00:00:42,720 --> 00:00:44,870
all orientations and screen sizes.
8

9
00:00:45,570 --> 00:00:52,770
And these rules allow the iPhone to figure out how to layout each element as it gets rendered on a different
9

10
00:00:52,770 --> 00:00:56,490
screen of a different aspect ratio or size.
10

11
00:00:56,490 --> 00:01:01,920
So for example, if we have three buttons: a blue one, a red one, and a green one, then we could tell the
11

12
00:01:01,920 --> 00:01:08,370
blue button that whenever it gets laid out on screen, it always has to be 10 pixels from the top and
12

13
00:01:08,370 --> 00:01:10,220
10 pixels from the left.
13

14
00:01:10,260 --> 00:01:13,170
So it's pin to the left corner.
14

15
00:01:13,170 --> 00:01:19,680
And when we have our red button, we're going to tell it to be centered in the app, so vertically and horizontally
15

16
00:01:19,680 --> 00:01:20,690
in the middle.
16

17
00:01:20,700 --> 00:01:26,340
And finally, for the green button, It's going to be centered only in the vertical axis,
17

18
00:01:26,340 --> 00:01:30,720
so this one., and it's gonna be pin 10 pixels from the bottom.
18

19
00:01:31,050 --> 00:01:37,200
So by implementing these various rules, we can tell each of our User Interface Elements how it should
19

20
00:01:37,200 --> 00:01:44,510
be displayed even when the size of the phone changes or when the aspect ratio of the screen changes.
20

21
00:01:44,520 --> 00:01:50,410
So in this module, we're going to be doing a full exploration of all things to do with Auto Layout,
21

22
00:01:50,700 --> 00:01:56,490
the rules that enable our User Interface Elements to know how they should be laid out. And in the process,
22

23
00:01:56,490 --> 00:02:03,120
we're going to learn about size classes and how to define those in the Xcode Interface Builder, as well
23

24
00:02:03,120 --> 00:02:09,810
as understanding the rules or the Constraints that we can set to specify how components should be laid
24

25
00:02:09,810 --> 00:02:15,090
out on the screen. And then we're gonna learn about how to use Alignment and Pinning and a combination of
25

26
00:02:15,090 --> 00:02:22,230
these to design how our app should look in landscape and in portrait. And then we're going to learn about
26

27
00:02:22,230 --> 00:02:28,800
how to use Containers, so views that can wrap other views to get more fine grained control over what
27

28
00:02:28,800 --> 00:02:30,220
things should look like.
28

29
00:02:30,270 --> 00:02:35,520
And finally, we're gonna learn about something called StackVews to stack our components vertically
29

30
00:02:35,520 --> 00:02:38,100
and horizontally on the screen.
30

31
00:02:38,100 --> 00:02:39,930
There's a lot to learn in this module.
31

32
00:02:39,930 --> 00:02:45,620
And once you're ready, head over to the course resources where you'll get a link to the AutoLayout-
32

33
00:02:45,630 --> 00:02:52,980
iOS13 starting repository on GitHub, and then go ahead and clone it to your local system.
33

34
00:02:53,190 --> 00:02:57,050
And once you've done that, head over to the next lesson and we'll get started straight away.