1
00:00:05,610 --> 00:00:06,850
It what's up everyone.

2
00:00:06,860 --> 00:00:14,360
Mark Price read slopes dot com and we have been diving into the world of laying out our views and controls

3
00:00:14,450 --> 00:00:17,390
and we've done things programmatically so far.

4
00:00:17,900 --> 00:00:21,550
But now we want to talk about the way that is Apple recommended.

5
00:00:21,560 --> 00:00:25,550
And the way that we'll be building all of our apps and that's using the constraint system with auto

6
00:00:25,570 --> 00:00:31,100
layout and again auto layout means that it's automatically laying things out for you even though you

7
00:00:31,100 --> 00:00:33,070
got to do a lot of legwork to set it up.

8
00:00:33,320 --> 00:00:35,430
In the end it's a more elegant solution.

9
00:00:35,510 --> 00:00:39,680
And so we're going to do that in this video for our welcome screen.

10
00:00:39,680 --> 00:00:42,730
We're going to get all the things laid out as they need to be.

11
00:00:42,940 --> 00:00:43,240
OK.

12
00:00:43,250 --> 00:00:47,930
So what we have here is our code that I no longer want.

13
00:00:48,130 --> 00:00:52,780
OK I want to take that out and we'll leave our outlets for now.

14
00:00:52,970 --> 00:00:54,000
We may get rid of them later.

15
00:00:54,020 --> 00:00:55,070
That's OK.

16
00:00:55,070 --> 00:00:57,690
And so we've gotten rid of the programmatic code to move things around.

17
00:00:57,710 --> 00:01:00,750
And let's go back to our main storyboard here.

18
00:01:00,900 --> 00:01:01,440
OK.

19
00:01:01,790 --> 00:01:07,850
So we've got some fundamental problems with our layout namely it's staying one size and it's not moving

20
00:01:07,850 --> 00:01:08,840
as it should.

21
00:01:08,840 --> 00:01:16,190
And so what I want to do is go back to the iPhone 7 Leo and let me give you a important rule.

22
00:01:16,230 --> 00:01:23,040
Protip always build out your entire user interface for a screen in one layout at first.

23
00:01:23,210 --> 00:01:25,510
So we're picking just pick one and stick with it.

24
00:01:25,580 --> 00:01:30,770
And you typically want to do either an iPhone 7 depending on which device just a phone device.

25
00:01:30,770 --> 00:01:32,520
Don't start with the iPad and work your way down.

26
00:01:32,590 --> 00:01:37,280
So usually with a smaller device you could even go as low as the for us but I like sticking with the

27
00:01:37,280 --> 00:01:38,580
iPhone 7.

28
00:01:38,690 --> 00:01:39,260
OK.

29
00:01:39,490 --> 00:01:42,620
Or whatever the current standard device size is at the time.

30
00:01:42,830 --> 00:01:47,990
Build out your entire layout in that screen first then set constraints and then as you go to other screen

31
00:01:47,990 --> 00:01:52,700
sizes bigger or smaller then you can make constraints for those specific screen sizes.

32
00:01:52,700 --> 00:01:54,360
So things look perfect.

33
00:01:54,410 --> 00:01:57,990
So constraints how do they work.

34
00:01:58,070 --> 00:02:00,860
Well let's first read the apple documentation.

35
00:02:01,010 --> 00:02:01,680
OK.

36
00:02:01,970 --> 00:02:09,980
And what it says about constraints is this auto layout defines your user interface using a series of

37
00:02:09,980 --> 00:02:11,270
constraints.

38
00:02:11,270 --> 00:02:15,070
Constraints typically represent a relationship between two views.

39
00:02:15,200 --> 00:02:20,870
Auto layout then calculates the size and location of each of you based on these constraints.

40
00:02:20,870 --> 00:02:27,180
This produces layouts that dynamically respond to both internal and external changes.

41
00:02:27,200 --> 00:02:27,970
OK.

42
00:02:28,490 --> 00:02:30,350
And if we look at this image here.

43
00:02:30,660 --> 00:02:36,220
OK you're going to see these little blue lines that say 20 20 20 20 20 what does all this madness means

44
00:02:36,230 --> 00:02:36,650
we're all.

45
00:02:36,730 --> 00:02:39,800
I'll explain this image and then we'll actually go and do something similar.

46
00:02:39,830 --> 00:02:43,970
So if you can see there's a super view or that light gray view.

47
00:02:44,180 --> 00:02:47,870
OK that represents let's say the main view of the view controller.

48
00:02:47,870 --> 00:02:51,410
So when I type in view in the code it's referencing that Super view.

49
00:02:51,470 --> 00:02:53,650
And then let's say we've got a UI view.

50
00:02:53,680 --> 00:02:55,470
Image is that dark grey image.

51
00:02:55,500 --> 00:03:03,440
OK so what these constraints are saying is hey I want the left side OK or the leading side of this view

52
00:03:03,890 --> 00:03:08,670
to be 20 points from these super views leading side.

53
00:03:08,810 --> 00:03:09,130
OK.

54
00:03:09,140 --> 00:03:11,670
So the leading side of the image view that dark gray.

55
00:03:11,720 --> 00:03:15,280
Or let's just say the dark gray the leading side of the dark gray view.

56
00:03:15,380 --> 00:03:20,580
I want to be 20 points from the leading side of the super view.

57
00:03:20,600 --> 00:03:21,570
Same with the top.

58
00:03:21,680 --> 00:03:30,130
I want the top side of the dark gray view to be 20 points from the top side of the super view.

59
00:03:30,250 --> 00:03:30,520
OK.

60
00:03:30,520 --> 00:03:33,370
Or the like review and then on the right hand side.

61
00:03:33,700 --> 00:03:41,240
OK it says I want it to be 20 points I want the dark Grays trilling view or trailing side to be 20 points

62
00:03:41,240 --> 00:03:45,030
away from the trailing side of the light gray view or the super view.

63
00:03:45,170 --> 00:03:46,100
OK.

64
00:03:46,190 --> 00:03:51,050
And what's interesting here is if you have a constraint on the left side and a constraint on the right

65
00:03:51,050 --> 00:03:55,170
side your view is automatically going to stretch to that with.

66
00:03:55,190 --> 00:03:57,500
OK so you wouldn't have to set a size here.

67
00:03:57,500 --> 00:04:02,720
In fact if you set a size Let's say you say a hard coded value of 50 points wide your constraints would

68
00:04:02,720 --> 00:04:03,720
actually break.

69
00:04:03,860 --> 00:04:07,460
And the reason why is you've set some rules some relationships.

70
00:04:07,460 --> 00:04:12,550
The left side goes here the right side goes here and the math for the size is automatically calculated.

71
00:04:12,900 --> 00:04:13,200
OK.

72
00:04:13,200 --> 00:04:16,010
And looking at it further here you see that 8.

73
00:04:16,070 --> 00:04:16,610
OK.

74
00:04:16,730 --> 00:04:24,740
Well this 8 is the spacing between the bottom of the bottom side of the top dark great view and the

75
00:04:24,740 --> 00:04:27,180
top side of the bottom part great view.

76
00:04:27,230 --> 00:04:30,290
OK so it's saying it's eight points away from that.

77
00:04:30,560 --> 00:04:36,020
And if you look at the bottom view the bottom dark great view it's 20 from the left 20 from the right

78
00:04:36,080 --> 00:04:37,360
and 20 from the bottom.

79
00:04:37,530 --> 00:04:44,660
OK so which means that this dark view its height is going to stretch automatically until it reaches

80
00:04:44,770 --> 00:04:46,490
the the other view.

81
00:04:46,490 --> 00:04:47,460
Same with that view.

82
00:04:47,480 --> 00:04:49,270
Its height is going to stretch automatically.

83
00:04:49,270 --> 00:04:56,220
And so what you can see here is a completely filled out constraint hierarchy and it's complete in there

84
00:04:56,230 --> 00:04:57,920
everything is accounted for.

85
00:04:57,980 --> 00:04:59,020
See that 8 there.

86
00:04:59,240 --> 00:05:02,880
If we did not specify the date this whole thing would be broken.

87
00:05:02,890 --> 00:05:05,770
Do you know why I want you to look at this image here.

88
00:05:05,770 --> 00:05:07,310
Look at that 8 right there.

89
00:05:07,630 --> 00:05:11,980
And ask yourself why would this break if I didn't have it there.

90
00:05:20,670 --> 00:05:21,450
What do you think.

91
00:05:21,450 --> 00:05:22,800
What do you think it is.

92
00:05:22,800 --> 00:05:29,370
Well the reason why it would break is because there's no longer any type of height being specified for

93
00:05:29,370 --> 00:05:30,800
those two dark gray boxes.

94
00:05:30,810 --> 00:05:31,760
OK.

95
00:05:31,950 --> 00:05:36,140
Unless you had hardcoded a height in there like I said I want each one to be 100 high.

96
00:05:36,400 --> 00:05:37,060
OK.

97
00:05:37,150 --> 00:05:38,930
Which we didn't.

98
00:05:39,480 --> 00:05:45,010
Then there's no information to specify the height and so it's going to break it's going to.

99
00:05:45,120 --> 00:05:47,640
First off you might get a warning from interface builder.

100
00:05:47,640 --> 00:05:54,210
And secondly if your lights are going to be random it's not going to be the height that you desire.

101
00:05:54,270 --> 00:05:56,160
It's not going to automatically space it for you.

102
00:05:56,190 --> 00:06:03,540
OK so when you set relationships OK here's the rule when you set relationships all the relationships

103
00:06:03,540 --> 00:06:06,600
have to be fulfilled or you have to set relationships for everything.

104
00:06:06,600 --> 00:06:11,140
So when you say any type of constraint or relationship you have to set all of them.

105
00:06:11,460 --> 00:06:16,740
And so that eight there is basically saying by I want these to be 8 apart and then it does the math

106
00:06:16,770 --> 00:06:18,160
automatically for the height.

107
00:06:18,180 --> 00:06:18,510
OK.

108
00:06:18,510 --> 00:06:23,200
So we have a complete set of relationships here with the constraints.

109
00:06:23,220 --> 00:06:27,990
And so whenever you get confused I want you to go back to this image and look at it and see what is

110
00:06:27,990 --> 00:06:28,940
going on here.

111
00:06:29,120 --> 00:06:29,730
OK.

112
00:06:30,090 --> 00:06:32,080
So what does that mean for.

113
00:06:32,660 --> 00:06:36,750
What I like to do when I'm building our interfaces with constraint as I like to kind of say aloud just

114
00:06:36,750 --> 00:06:37,770
like I'm doing right now.

115
00:06:37,800 --> 00:06:42,600
This needs to be here and here and here and so starting and I usually start from the top down.

116
00:06:42,750 --> 00:06:46,390
So the top most icons is probably this.

117
00:06:46,390 --> 00:06:49,080
This image OK this background image.

118
00:06:49,080 --> 00:06:54,120
Notice how there's this other image these controls are not actually some views of this image.

119
00:06:54,120 --> 00:06:55,860
You don't set subdues on image views.

120
00:06:55,860 --> 00:06:56,880
OK.

121
00:06:56,880 --> 00:07:01,550
So these are not subdues but it can be in the background and cover all the space.

122
00:07:01,590 --> 00:07:06,990
But my point is this background image is really going to happen not a whole lot to do with any of these

123
00:07:06,990 --> 00:07:09,210
other views because we need it to cover the whole screen.

124
00:07:09,300 --> 00:07:14,180
And so its relationship is only going to be with the parent view right here.

125
00:07:14,580 --> 00:07:17,940
So what we're going to do is we're going to set some constraints.

126
00:07:17,940 --> 00:07:23,550
And what I find the easiest way to do is click this little square icon right here add new constraints

127
00:07:23,700 --> 00:07:29,910
and I've got the background image selected and you just click it and all we're going to do is click

128
00:07:29,910 --> 00:07:32,400
this this this and this.

129
00:07:32,400 --> 00:07:37,440
And what we're saying is I want it to be zero points from the top of the super view.

130
00:07:37,530 --> 00:07:38,540
Zero points on the left.

131
00:07:38,540 --> 00:07:41,320
Zero points are from here and points from here.

132
00:07:41,630 --> 00:07:42,200
OK.

133
00:07:42,390 --> 00:07:45,660
And why do we want that what we wanted to touch the edges of the screen.

134
00:07:45,690 --> 00:07:49,270
No matter how big the screen gets we want it to always be zero.

135
00:07:49,290 --> 00:07:52,370
We want it to always be right next to it hugging it right at the zero.

136
00:07:52,590 --> 00:07:53,680
OK.

137
00:07:53,730 --> 00:07:55,120
Why would we not set a width and height.

138
00:07:55,140 --> 00:07:58,340
Well because the screen sizes can change we don't know if the user has an iPhone 7.

139
00:07:58,350 --> 00:08:02,220
If they have an iPad and so we would not want to set width and height because then it wouldn't look

140
00:08:02,220 --> 00:08:08,370
good on all the devices but this will sending it zero from every edge to zero from the top zero from

141
00:08:08,370 --> 00:08:10,890
the left zero from the bottom and zero from the right.

142
00:08:10,890 --> 00:08:12,320
We want it hugging at all times.

143
00:08:12,360 --> 00:08:16,080
And last I'm going to do is click add for constraints.

144
00:08:16,080 --> 00:08:18,940
So if I run this now OK.

145
00:08:19,210 --> 00:08:20,390
Actually may not even need to run it.

146
00:08:20,390 --> 00:08:27,060
Let's actually click and look at the devices here and sure enough we don't have to run anything look

147
00:08:27,130 --> 00:08:27,400
that.

148
00:08:27,450 --> 00:08:30,080
It's working on these different screen devices.

149
00:08:30,090 --> 00:08:33,100
So the constraints have already been applied to these previews here.

150
00:08:33,210 --> 00:08:33,960
OK.

151
00:08:33,960 --> 00:08:35,780
So that's one way you can quickly check it out.

152
00:08:35,790 --> 00:08:38,240
It's just by swapping between these views here.

153
00:08:38,430 --> 00:08:44,070
You used to have to x 7 you'd have to run OK run your app to see what it's going to look like but now

154
00:08:44,310 --> 00:08:49,860
as of X code 8 you can click these devices here and see what it's going to look like on the screen size.

155
00:08:49,860 --> 00:08:52,160
So clearly those constraints are correct.

156
00:08:52,530 --> 00:08:56,790
And just to show you what it would look like if we had different constraints are going to go back to

157
00:08:56,790 --> 00:09:02,280
my iphone 7 click that here and what I've done is I click the ruler over here.

158
00:09:02,340 --> 00:09:07,500
So this the size inspector and I'm going to scan it just going to delete these constraints and selecting

159
00:09:07,500 --> 00:09:09,310
them and deleting the ones I just added.

160
00:09:09,430 --> 00:09:11,780
Ok deleted deleted deleted deleted.

161
00:09:12,000 --> 00:09:12,680
OK.

162
00:09:12,930 --> 00:09:14,380
So it's all broken now.

163
00:09:14,450 --> 00:09:16,100
And look at even kind of messed up my screen.

164
00:09:16,110 --> 00:09:18,700
It kind of threw the background off of the edges here.

165
00:09:18,720 --> 00:09:22,030
As you can see it's tried to fix that there.

166
00:09:22,030 --> 00:09:26,290
Now let's set those same constraints again so I've deleted the constraints but let's set some different

167
00:09:26,290 --> 00:09:26,620
ones.

168
00:09:26,620 --> 00:09:29,810
Let's say I wanted a little bit of background to show.

169
00:09:29,870 --> 00:09:34,930
So what I could do is I could say I want it 15 from the top 15 from the left 15 from the right and 15

170
00:09:34,930 --> 00:09:35,740
from the bottom.

171
00:09:35,900 --> 00:09:37,840
Let's add those constraints.

172
00:09:37,990 --> 00:09:42,560
And as you can see you can now see the green OK.

173
00:09:42,710 --> 00:09:45,880
So those constraints are instantaneous and are you seeing how it works.

174
00:09:45,980 --> 00:09:47,330
We just set a relationship.

175
00:09:47,330 --> 00:09:53,960
We set the relationship from the the top side of the image view to the top side of the super view the

176
00:09:53,960 --> 00:09:59,180
leading side of the image view to that from the leaning side of the suit preview the trailing side of

177
00:09:59,180 --> 00:10:03,920
the image view and the trailing side of the review and the bottom side of the image to the bottom side

178
00:10:03,950 --> 00:10:04,690
of this preview.

179
00:10:04,700 --> 00:10:09,620
So we said a relationship we wanted at 15 points from each ad edge.

180
00:10:09,770 --> 00:10:10,830
Of course that's not what we want.

181
00:10:10,850 --> 00:10:11,940
Let's put them back to zero.

182
00:10:11,990 --> 00:10:17,390
And so the edit constraints you can click the size inspector here and then double click the constraints

183
00:10:17,870 --> 00:10:22,250
and set to zero and then click off click it again.

184
00:10:22,250 --> 00:10:30,620
It's kind of a hassle but that's how you edit them and just editing the constant to zero zero zero and

185
00:10:30,620 --> 00:10:32,520
zero.

186
00:10:32,520 --> 00:10:33,930
And one more thing I want to show you here.

187
00:10:34,010 --> 00:10:38,310
You can actually see the relationships right here in the vertical space constraint.

188
00:10:38,360 --> 00:10:41,710
The first item is Bottomley out guide top.

189
00:10:41,980 --> 00:10:42,460
OK.

190
00:10:42,530 --> 00:10:48,800
So this is on the super view and it's saying the bottom layout guide of the super view and its top and

191
00:10:48,800 --> 00:10:56,020
it's making it equal to the bottom image to the background image dot bottom.

192
00:10:56,170 --> 00:10:57,060
OK.

193
00:10:57,080 --> 00:11:04,200
And so these layout guides they are the layout guides for an application or your top most level.

194
00:11:04,400 --> 00:11:08,130
And so you'll be working with those at the at the highest level when you have other views.

195
00:11:08,180 --> 00:11:12,080
You'll see the other views here like if I wanted to position two things in correspondence with each

196
00:11:12,080 --> 00:11:13,610
other and we'll talk about that as we get there.

197
00:11:13,610 --> 00:11:17,190
So what we've done is we've got it working on our screen sizes.

198
00:11:17,210 --> 00:11:18,240
Image looks great.

199
00:11:18,480 --> 00:11:19,220
OK.

200
00:11:19,760 --> 00:11:25,640
So the next thing I want to do is this swish image as you can see it's not lining up in the middle and

201
00:11:25,640 --> 00:11:26,310
on the screen side.

202
00:11:26,330 --> 00:11:27,930
So let's do that next.

203
00:11:28,280 --> 00:11:33,620
So what I want to do is I want to pin this so I click the constraint button here and what I want to

204
00:11:33,620 --> 00:11:37,050
do is I want to pin it from the top.

205
00:11:37,100 --> 00:11:37,410
OK.

206
00:11:37,410 --> 00:11:40,380
And as you can see it's currently 20 points from the top.

207
00:11:40,400 --> 00:11:43,010
Now this is really important the numbers over here.

208
00:11:43,240 --> 00:11:43,660
OK.

209
00:11:43,670 --> 00:11:46,030
They're not guaranteed to stay that way.

210
00:11:46,070 --> 00:11:50,870
Those are just the numbers that are there when you're working with an Interface Builder.

211
00:11:50,870 --> 00:11:55,640
So if you want this swoosh image to be 20 point if you wanted to look like it is here we need to make

212
00:11:55,640 --> 00:11:57,920
it 20 points from the top just like we have it over here.

213
00:11:57,920 --> 00:12:02,470
These numbers will change with auto layout and so where they can change.

214
00:12:02,470 --> 00:12:07,700
So we want to hard code them over here so what we want to do is the swish image we want to type in 20

215
00:12:07,700 --> 00:12:12,430
and just press tab OK so we want this to be 20 points from the top.

216
00:12:12,440 --> 00:12:13,940
Now what's the next thing we need to do.

217
00:12:13,940 --> 00:12:18,970
We want to always in the center and we probably don't want to pin it to the left or pinnate to the right

218
00:12:19,010 --> 00:12:22,550
because then that will stretch out our image and we don't want our image stretched out that would look

219
00:12:22,550 --> 00:12:24,830
silly.

220
00:12:24,830 --> 00:12:32,840
One thing we could do is we could give it a fixed width and height but that still doesn't pin it in

221
00:12:32,840 --> 00:12:33,440
the center.

222
00:12:33,440 --> 00:12:35,070
So that's not going to work either.

223
00:12:35,090 --> 00:12:36,470
So I think there's a better way.

224
00:12:36,470 --> 00:12:38,530
So we're going to add one constraint.

225
00:12:38,830 --> 00:12:40,850
OK and it's OK for now.

226
00:12:41,120 --> 00:12:46,440
You know as you can see right here it's it's kind of in the middle are it's always from the top I mean

227
00:12:46,490 --> 00:12:47,920
but it's not in the middle yet.

228
00:12:48,200 --> 00:12:50,340
And so how do we do that.

229
00:12:50,360 --> 00:12:56,360
Well what we can now do is click the alignment menu so as you can see right here there's an inline button

230
00:12:57,080 --> 00:12:57,770
you click it.

231
00:12:57,800 --> 00:13:01,640
And what we want to do is we want to center it horizontally in the container.

232
00:13:01,640 --> 00:13:02,960
Now this is still a constraint.

233
00:13:03,050 --> 00:13:07,130
Even though it's not in the constraints I mean this alignment is creating a relationship with the parent

234
00:13:07,190 --> 00:13:12,680
container or the super view and it's saying we want this to be aligned horizontally so now that I've

235
00:13:12,680 --> 00:13:16,600
clicked that if you see here and the different images OK.

236
00:13:16,880 --> 00:13:18,850
It is now always in the center.

237
00:13:18,860 --> 00:13:20,470
So what did we do again.

238
00:13:20,490 --> 00:13:26,090
We we pinned it from the top we said a constraint to the top 20 points from the top and then we also

239
00:13:26,090 --> 00:13:32,090
set an alignment constraint which keeps the always centered horizontally in the container.

240
00:13:32,330 --> 00:13:34,080
So that's looking really good.

241
00:13:34,160 --> 00:13:35,910
We have a few more to do here.

242
00:13:35,960 --> 00:13:38,510
What do you think do you think you could do this one on your own.

243
00:13:40,020 --> 00:13:40,710
Give it a shot.

244
00:13:40,710 --> 00:13:41,900
I want you to pin this.

245
00:13:41,970 --> 00:13:48,250
So it's always it's always in the center and it always just looks good the way it's supposed to look.

246
00:13:48,270 --> 00:13:48,870
How would you do it

247
00:13:56,710 --> 00:13:57,540
well.

248
00:13:58,030 --> 00:13:59,200
How I'm going to do it.

249
00:13:59,540 --> 00:14:00,730
If you did it hopefully you did.

250
00:14:00,790 --> 00:14:05,190
The deposit video and do it listen to me trust me you want to do these things you don't want me to do

251
00:14:05,220 --> 00:14:08,680
you don't want to just follow along otherwise it's not going to sink in your brain.

252
00:14:08,680 --> 00:14:11,680
So what we want to do here is probably something similar.

253
00:14:11,710 --> 00:14:17,970
So what I can do is something new I could click this this pin button here and see how it says 85 it's

254
00:14:18,010 --> 00:14:20,810
what it does is it finds the next view that's above it.

255
00:14:21,070 --> 00:14:24,000
OK and that's the view it's talking about but that can be confusing.

256
00:14:24,070 --> 00:14:25,440
Maybe there's a hidden view.

257
00:14:25,440 --> 00:14:25,960
It's hard to say.

258
00:14:25,960 --> 00:14:32,320
So one thing we can do is we can control drag from this component and selects some holding control and

259
00:14:32,320 --> 00:14:34,010
I'm dragging to the swoosh.

260
00:14:34,380 --> 00:14:35,200
OK.

261
00:14:35,680 --> 00:14:41,500
And this is really interesting so we can we can set some values here so we can have equal with equal

262
00:14:41,500 --> 00:14:41,760
heights.

263
00:14:41,770 --> 00:14:42,610
I don't want that.

264
00:14:42,730 --> 00:14:44,890
But this is interesting.

265
00:14:45,370 --> 00:14:48,340
Vertical spacing vertical baseline spacing what is all this.

266
00:14:48,340 --> 00:14:52,330
Well what if we what if we pinnate to trebling.

267
00:14:52,420 --> 00:14:55,710
OK what if we pin this to the trailing side of this whoosh.

268
00:14:55,720 --> 00:14:58,170
I'm just I'm just curious to see what happens.

269
00:14:58,180 --> 00:14:58,900
OK.

270
00:14:59,470 --> 00:15:06,710
So if we click on our go all in here can we now have this trailing swoosh alignment.

271
00:15:06,910 --> 00:15:07,740
OK.

272
00:15:07,870 --> 00:15:14,140
And what this has done is it's taken the go all in trebling and it has now aligned it with the trailing

273
00:15:14,170 --> 00:15:14,830
of the swoosh.

274
00:15:14,830 --> 00:15:16,160
But that's not what we want right.

275
00:15:16,180 --> 00:15:17,470
That's that's silly.

276
00:15:17,480 --> 00:15:18,790
It's pinning the edges here.

277
00:15:18,970 --> 00:15:27,180
So what we want to do is delete that click click your size attribute here delete that last hold down

278
00:15:27,180 --> 00:15:28,110
control again.

279
00:15:28,940 --> 00:15:38,410
Click swoosh and let's actually look at this here oh we can now I'm sorry let's go.

280
00:15:38,780 --> 00:15:40,490
We can now pick some other things here.

281
00:15:40,490 --> 00:15:45,080
So there's a top center vertically last baseline that's interesting or the bottom.

282
00:15:45,230 --> 00:15:48,650
Well I think that I would want to pin this to the bottom of the swoosh.

283
00:15:49,070 --> 00:15:49,980
OK.

284
00:15:50,580 --> 00:15:57,590
So it's double click the constraint go all in Dot bottom is equal to swooshed up Bottom Well that's

285
00:15:57,590 --> 00:15:59,100
not exactly what I want.

286
00:15:59,150 --> 00:16:04,010
What I really want is go all in dot top.

287
00:16:04,010 --> 00:16:08,220
I want to pin that to swoosh dot bottom.

288
00:16:08,570 --> 00:16:11,840
And notice how it's saying if there's an 85 distance here.

289
00:16:11,850 --> 00:16:13,920
OK that's not what we want.

290
00:16:14,000 --> 00:16:15,440
We don't want to eighty five distance.

291
00:16:15,440 --> 00:16:18,800
In fact if we are we don't want it.

292
00:16:18,800 --> 00:16:25,820
What I'm saying is what I'm saying is see these orange lines here it's saying right now we're eighty

293
00:16:25,820 --> 00:16:26,930
five points off.

294
00:16:26,960 --> 00:16:31,710
If I update the frame OK it's going to readjust this to zero.

295
00:16:32,000 --> 00:16:41,650
So if we go to our editor and we go to our update frames OK so command alt equals.

296
00:16:41,990 --> 00:16:43,670
It has now moved it up here to the top.

297
00:16:43,670 --> 00:16:45,260
And that's not where we want it.

298
00:16:45,260 --> 00:16:46,680
We actually did want to 85.

299
00:16:46,700 --> 00:16:47,920
That's what I was trying to say.

300
00:16:48,110 --> 00:16:55,550
So in our constraint here this top space the swoosh we can now say a constant of 85 and it's going to

301
00:16:55,550 --> 00:16:56,640
move it down there.

302
00:16:57,080 --> 00:16:58,310
So what did we do.

303
00:16:58,500 --> 00:17:04,190
OK we control drag from the swoosh to there or excuse me from the gall in to the swoosh which gave us

304
00:17:04,190 --> 00:17:04,850
a constraint.

305
00:17:05,000 --> 00:17:07,160
And then what we did is we switch what type of constraint it was.

306
00:17:07,160 --> 00:17:08,930
Now I don't typically do it this way.

307
00:17:08,930 --> 00:17:13,390
There are some people that do they like to control drag constraints and they come in here and edit.

308
00:17:13,460 --> 00:17:17,230
So we want to go all in dot top to be equal to the swooshed bottom.

309
00:17:17,270 --> 00:17:19,790
And then you can adjust things there and you set the constant manually.

310
00:17:19,790 --> 00:17:25,710
I don't like that it just takes too much time but that's just one way of doing it OK.

311
00:17:25,970 --> 00:17:28,780
And every time I I don't teach it someone's like why don't you do it that way.

312
00:17:28,820 --> 00:17:30,070
Well it's a little bit slow.

313
00:17:30,140 --> 00:17:31,460
That's why I don't do it that way.

314
00:17:31,670 --> 00:17:33,240
So we pinned it from the top here.

315
00:17:33,380 --> 00:17:38,620
But we also need to center it vertically because if you notice here it's not centered vertically.

316
00:17:38,660 --> 00:17:39,350
All right.

317
00:17:39,650 --> 00:17:44,170
So we can do the same thing we did before we can take our go all in.

318
00:17:44,270 --> 00:17:49,090
Click the align button and center horizontally in container.

319
00:17:49,550 --> 00:17:52,820
And now if we look over here go all in is now in the center.

320
00:17:54,930 --> 00:17:56,640
So this one.

321
00:17:56,640 --> 00:17:56,900
All right.

322
00:17:56,910 --> 00:18:02,040
This is almost the same set up as this one right here which is kind of this makes it kind of easy.

323
00:18:02,430 --> 00:18:05,280
So what I could do is something similar.

324
00:18:05,310 --> 00:18:11,310
So what I want to do is click this pin button and notice how we have a problem 140 that seems way too

325
00:18:11,310 --> 00:18:12,520
high.

326
00:18:12,580 --> 00:18:14,880
This does not seem a 140 pixels away from here.

327
00:18:14,880 --> 00:18:20,310
Well the problem is these two are overlapping each other which is not good at all actually.

328
00:18:20,460 --> 00:18:27,500
In fact what I'm going to do is an overlap it will let me select it.

329
00:18:27,590 --> 00:18:31,330
It's not come on little fella.

330
00:18:33,650 --> 00:18:34,330
That.

331
00:18:35,110 --> 00:18:40,280
And I'm just going to move it.

332
00:18:40,430 --> 00:18:45,750
So they're not touching which they're not.

333
00:18:45,880 --> 00:18:46,780
Let's see if that fixes it.

334
00:18:46,790 --> 00:18:52,100
So now if I clicked the on going all out now it's how it's now one point away.

335
00:18:52,430 --> 00:18:55,930
You know what we could actually make ZERO points away from the view.

336
00:18:56,000 --> 00:19:00,500
So what just happened or why was it 1:44 work since there was overlapping it couldn't recognize the

337
00:19:00,500 --> 00:19:01,730
top constraint.

338
00:19:01,730 --> 00:19:03,250
And so it was going up to the swoosh.

339
00:19:03,260 --> 00:19:06,960
So here's the flipside of not using the controlled drag.

340
00:19:07,040 --> 00:19:10,330
You have to make sure that this is correct it's pointing to the right thing above.

341
00:19:10,340 --> 00:19:12,270
Otherwise yours or your friends would be wrong.

342
00:19:12,290 --> 00:19:15,650
I could clearly tell that this was not a 100 or 40 points away from go all in.

343
00:19:15,650 --> 00:19:17,440
It was obviously pointing to swoosh.

344
00:19:17,450 --> 00:19:20,500
So I moved I made it so these frames did not touch each other.

345
00:19:20,510 --> 00:19:24,780
So what I'm saying is I want ongoing all out to be zero points from go all in.

346
00:19:25,010 --> 00:19:25,820
OK fine.

347
00:19:25,970 --> 00:19:28,180
Easy easy easy.

348
00:19:28,380 --> 00:19:28,670
OK.

349
00:19:28,670 --> 00:19:29,300
Perfect.

350
00:19:31,220 --> 00:19:35,170
Now let's click the align menu and do it horizontally in container.

351
00:19:35,600 --> 00:19:38,660
And if we look at the different size here it looks good to me.

352
00:19:38,690 --> 00:19:39,250
Ongoing.

353
00:19:39,260 --> 00:19:40,940
All in all right.

354
00:19:41,300 --> 00:19:43,730
Cool cool cool.

355
00:19:43,740 --> 00:19:45,070
Assume something similar here.

356
00:19:45,110 --> 00:19:47,060
I'm going to click the pin menu.

357
00:19:47,060 --> 00:19:50,480
Fourteen point five from the top that's a little bit odd.

358
00:19:50,480 --> 00:19:56,460
Some of the change that the 15 from the top 15 from ongoing all out and I will again click the slide

359
00:19:56,460 --> 00:19:59,560
menu and horizontally and container.

360
00:20:00,470 --> 00:20:05,120
And that's interesting it actually kind of screwed up our constraints here which I'm not overly happy

361
00:20:05,120 --> 00:20:05,640
about.

362
00:20:05,840 --> 00:20:12,820
So what I'm going to do let's see here dominate the league.

363
00:20:13,220 --> 00:20:15,440
Yeah that's that's no good.

364
00:20:15,440 --> 00:20:17,560
So what I want to do is add another constraint.

365
00:20:17,570 --> 00:20:19,740
So exco did this automatically they made it.

366
00:20:19,820 --> 00:20:20,570
They messed it up.

367
00:20:20,570 --> 00:20:21,950
Now your designer is angry.

368
00:20:21,950 --> 00:20:23,150
Well we had it right before.

369
00:20:23,150 --> 00:20:27,740
Well what we probably should do is put it back the way it was and it was about the same width as these

370
00:20:27,740 --> 00:20:28,100
I believe.

371
00:20:28,100 --> 00:20:30,480
So what I'm going to do is I'm going to control drag.

372
00:20:30,560 --> 00:20:32,960
Find your team to on going all out.

373
00:20:33,200 --> 00:20:42,630
And I want to have equal with both of these to have equal with oh this one expanded to bugger.

374
00:20:43,380 --> 00:20:43,710
Yes.

375
00:20:43,710 --> 00:20:44,590
Not good.

376
00:20:45,640 --> 00:20:48,060
Let's fix that.

377
00:20:50,770 --> 00:20:51,270
OK.

378
00:20:51,660 --> 00:20:55,060
So what I'm going to do we're going to start at the top here.

379
00:20:55,440 --> 00:20:55,670
OK.

380
00:20:55,680 --> 00:20:58,770
So ongoing all and what I'm going to do is I'm going to get a fix on here.

381
00:20:59,090 --> 00:20:59,330
OK.

382
00:20:59,330 --> 00:21:05,290
So currently the width is to 160 so I'm going to click the pin menu here and for the with a mess at

383
00:21:05,320 --> 00:21:06,510
260.

384
00:21:06,610 --> 00:21:07,500
OK.

385
00:21:07,860 --> 00:21:11,480
Now what I'm going to do is control drag from going all out to go all in.

386
00:21:11,520 --> 00:21:15,810
Now we're going to say we want it to have it but with this and this one since we had already done that

387
00:21:15,990 --> 00:21:17,590
had equal withs as well too.

388
00:21:17,810 --> 00:21:18,480
OK.

389
00:21:19,050 --> 00:21:22,650
You're probably getting confused a little bit and that's OK we're going to I'm going to explain some

390
00:21:22,650 --> 00:21:23,330
more of this here.

391
00:21:23,340 --> 00:21:25,110
Obviously are going all out.

392
00:21:25,110 --> 00:21:27,540
We didn't center horizontally in the container.

393
00:21:28,110 --> 00:21:29,440
So we need to do that as well to

394
00:21:34,860 --> 00:21:39,570
equal his top space bottom space aligned center extra super view.

395
00:21:39,620 --> 00:21:41,500
Well yeah that's correct.

396
00:21:41,690 --> 00:21:43,510
Oh let's update our frames.

397
00:21:43,520 --> 00:21:46,160
So it was command alt equals right.

398
00:21:46,640 --> 00:21:48,790
Yes I remember Ed..

399
00:21:49,370 --> 00:21:53,970
And then it was updated frames.

400
00:21:54,250 --> 00:21:54,830
There it is.

401
00:21:54,840 --> 00:21:56,310
See how it's great out now because they're all updated.

402
00:21:56,330 --> 00:21:56,900
OK.

403
00:21:56,990 --> 00:21:59,350
It just updates it towards actually going to be at runtime.

404
00:21:59,360 --> 00:22:00,740
So cool.

405
00:22:00,940 --> 00:22:02,870
It's really coming together.

406
00:22:02,930 --> 00:22:08,300
So are you with me so far all we've done is set relationships so if you're confused I want you to think

407
00:22:08,300 --> 00:22:09,130
relationships.

408
00:22:09,130 --> 00:22:12,960
OK we've pinned the swoosh from the top with Senator horizontally.

409
00:22:12,960 --> 00:22:15,420
We can go all in to swoosh.

410
00:22:15,530 --> 00:22:16,100
OK.

411
00:22:16,250 --> 00:22:21,380
You know if I click go all in top space to swooshes 85 We're just saying we want to eighty five points

412
00:22:21,380 --> 00:22:23,050
away from the bottom of swoosh.

413
00:22:23,060 --> 00:22:24,870
So go all in dot top.

414
00:22:25,200 --> 00:22:26,280
OK.

415
00:22:26,330 --> 00:22:31,630
I want it to be equal to the bottom plus 85 just a relationship.

416
00:22:31,640 --> 00:22:37,150
How far do you want these two edges to be with a constant or a spacer 85 eighty the spacer and then

417
00:22:37,150 --> 00:22:37,900
same here.

418
00:22:38,060 --> 00:22:40,680
OK we've said we want it to be zero.

419
00:22:40,790 --> 00:22:43,600
So tops base the goal in zero.

420
00:22:43,610 --> 00:22:47,960
So we want both edges touching each other that's great horizontally in the container.

421
00:22:48,240 --> 00:22:50,700
That's great line center X is what that means.

422
00:22:50,720 --> 00:22:52,030
And the same thing here.

423
00:22:52,040 --> 00:22:53,360
OK we've done the exact same thing.

424
00:22:53,360 --> 00:22:54,410
Pretty cool.

425
00:22:54,920 --> 00:23:01,330
Last thing is the button as you can clearly see the button is not responding as we want it to.

426
00:23:01,350 --> 00:23:06,940
Now maybe with this button we wanted to be we want it to be the full bottom of the screen just because.

427
00:23:07,050 --> 00:23:09,160
So this one's a little bit easier.

428
00:23:09,390 --> 00:23:11,270
All we need to do is click this pen button.

429
00:23:11,610 --> 00:23:12,390
OK.

430
00:23:12,810 --> 00:23:17,930
So we want it 20 from the bottom and this is really interesting.

431
00:23:17,970 --> 00:23:21,350
Why is it Saens 0 from the left as you're from the right.

432
00:23:21,360 --> 00:23:23,730
Even though I have spacier right there's some space here.

433
00:23:23,730 --> 00:23:24,980
Shouldn't it be like 20.

434
00:23:25,320 --> 00:23:29,020
Well there's actually a feature called margin's OK.

435
00:23:29,050 --> 00:23:34,500
And margins keep things from the edge and so it's about I think it's 15 or 20 pixels and it keeps it

436
00:23:34,800 --> 00:23:41,160
I think is 20 pixels and it keeps it from the left and from the right edges and only from the left on

437
00:23:41,160 --> 00:23:43,310
the right by the way up from the bottom or top.

438
00:23:43,510 --> 00:23:47,190
And there's this button here there's this checkmark concern the margins if I turn it off.

439
00:23:47,190 --> 00:23:48,450
It says 16 and 16.

440
00:23:48,450 --> 00:23:51,300
So clearly I have 16 space here and 16 space here.

441
00:23:51,300 --> 00:23:56,100
I said that in if I turn it on it's setting it to 0 and 0.

442
00:23:56,400 --> 00:24:01,100
And so see the margins on it's fine for now because it's this invisible line here.

443
00:24:01,140 --> 00:24:04,840
We want to these the margins and it just it will look fine.

444
00:24:05,070 --> 00:24:08,770
Nothing you need to worry about you could take it off and then program it 60 and then you could just

445
00:24:08,770 --> 00:24:09,660
select these here.

446
00:24:09,810 --> 00:24:12,430
Whatever either or doesn't matter.

447
00:24:12,430 --> 00:24:14,340
However you want to design your app.

448
00:24:14,460 --> 00:24:19,140
You may want to use margins especially when it comes to things like TVO as if your apps for CVO you

449
00:24:19,140 --> 00:24:23,010
might have some bleading content because some screens have overscan then you would definitely want to

450
00:24:23,010 --> 00:24:24,410
use margins.

451
00:24:24,570 --> 00:24:25,590
So something to consider.

452
00:24:25,590 --> 00:24:30,390
But for now we want to zero from the margin over here and zero from the margin over here and 20 from

453
00:24:30,390 --> 00:24:31,710
the bottom is fine.

454
00:24:31,950 --> 00:24:34,650
And one more thing we're going to have to do.

455
00:24:34,650 --> 00:24:39,840
We're going to have to set a fixed height on this because remember there's no relationship on the Get

456
00:24:39,840 --> 00:24:42,430
started button to this league over here none at all.

457
00:24:42,750 --> 00:24:44,690
And so we have to have four relationships.

458
00:24:44,690 --> 00:24:46,140
I told you about this already.

459
00:24:46,140 --> 00:24:51,990
We have to have a full relationship and every single constraint must be defined every Remember here's

460
00:24:51,990 --> 00:24:53,710
the rule again in your face.

461
00:24:53,840 --> 00:24:54,430
OK.

462
00:24:54,690 --> 00:25:01,770
Every auto layout view or view that supports auto layout must have a position or relationship and must

463
00:25:01,770 --> 00:25:02,480
have a size.

464
00:25:02,490 --> 00:25:08,640
OK so same with frames position and size in correspondence with other views or they must have their

465
00:25:08,640 --> 00:25:09,790
own fixed with her height.

466
00:25:09,810 --> 00:25:15,420
If it's missing a relationship in our case there's no relationship from the bottom side of started or

467
00:25:15,420 --> 00:25:17,460
this label up here find a team.

468
00:25:17,460 --> 00:25:22,540
So we need to set a fixed height and 51 is an odd number and I don't like it.

469
00:25:22,540 --> 00:25:24,150
So I'm just going to set it to 50.

470
00:25:24,180 --> 00:25:30,150
So zero from the left margin is zero from the right margin 20 from the bottom and a fix had a 50 because

471
00:25:30,270 --> 00:25:34,070
there's no relationship defining the top.

472
00:25:34,800 --> 00:25:35,510
Wonderful.

473
00:25:35,520 --> 00:25:40,150
Now if I go to my different devices as you can see the button is right where it needs to be.

474
00:25:40,410 --> 00:25:40,800
OK.

475
00:25:40,800 --> 00:25:41,760
This is pretty cool.

476
00:25:42,000 --> 00:25:44,610
So this is a lot better than programmatically writing this.

477
00:25:44,610 --> 00:25:46,760
And of course it goes so much faster once you have it down.

478
00:25:46,770 --> 00:25:50,910
I'm explaining these things to you so it's taking a long time but if I was doing this on my own it would

479
00:25:50,910 --> 00:25:53,120
have probably taken me one minute.

480
00:25:53,190 --> 00:25:55,050
I could have done this all in one minute.

481
00:25:55,440 --> 00:26:00,430
And of course there's other problems too like princes This is a little bit too small an iPad the techs

482
00:26:00,430 --> 00:26:03,730
would be bigger and we can we can talk about that in just a little bit.

483
00:26:03,750 --> 00:26:08,130
So this is good for this video here what we've done is we worked with auto layout I've talked about

484
00:26:08,130 --> 00:26:14,160
how relationships work how it's much better than working with programmatic positioning of frames and

485
00:26:14,280 --> 00:26:15,150
what we just did here.

486
00:26:15,150 --> 00:26:20,100
You're going to do for most all of your apps even though our def slopes app that we use and is in the

487
00:26:20,100 --> 00:26:25,590
hands of many thousands of people it uses these exact same constraints for ninety nine point nine percent

488
00:26:25,590 --> 00:26:26,340
of all of our screens.

489
00:26:26,340 --> 00:26:28,110
So good stuff to know.

490
00:26:28,110 --> 00:26:30,600
Critical stuff to know actually and that's it for now.

491
00:26:30,600 --> 00:26:32,380
Marc price a dev slopes dot com.

492
00:26:32,400 --> 00:26:33,410
Let's move on and forward.