1
00:00:05,730 --> 00:00:07,280
Hey what's up everyone.

2
00:00:07,280 --> 00:00:13,040
Welcome back to class Mark Price here at Dev slopes dot com and we've done some amazing things so far

3
00:00:13,370 --> 00:00:18,350
we've learned about Atalia we've learned about programmatically moving views with their frames and their

4
00:00:18,350 --> 00:00:19,730
positions and their size.

5
00:00:20,000 --> 00:00:23,640
And in this lesson we're going to talk a little bit more about auto layout but we're also we're also

6
00:00:23,640 --> 00:00:27,740
going to introduce stack views which is a very very important principle.

7
00:00:27,770 --> 00:00:33,260
So I'm here in my project directory here and what I'm going to do is create a new branch so get check

8
00:00:33,260 --> 00:00:34,360
out Dasch B.

9
00:00:34,460 --> 00:00:35,670
And this is for my sake.

10
00:00:35,790 --> 00:00:40,760
You can do something similar if you desire or need lessons 0 4 because that's the lesson that we're

11
00:00:40,760 --> 00:00:42,110
on here.

12
00:00:42,110 --> 00:00:43,270
Very cool.

13
00:00:43,310 --> 00:00:48,110
And let's actually let's see what we've got here in our directory we've got our X co-prophet what we

14
00:00:48,110 --> 00:00:50,940
can do is we can say open app swoosh.

15
00:00:51,160 --> 00:00:55,790
It's called Project and I should open up X code for us automatically.

16
00:00:55,810 --> 00:00:57,430
You make sure it's the beta though.

17
00:00:57,470 --> 00:00:59,410
It is sweet.

18
00:00:59,420 --> 00:01:03,770
So sometimes it gets confused at Lowe's regular x Hoad or the beta but all you have to do is have an

19
00:01:03,800 --> 00:01:09,950
open and then the X code proj and it will open up X code for you automatically which is really cool.

20
00:01:09,950 --> 00:01:15,460
Also if you are familiar with X code you may be wondering hey Mark doesn't X code have get built in.

21
00:01:15,460 --> 00:01:18,180
Why are you doing all this committing and stuff you know from the terminal.

22
00:01:18,230 --> 00:01:22,020
I do everything from the terminal and and I'm not going to get on a soapbox here.

23
00:01:22,040 --> 00:01:22,640
Well yes I am.

24
00:01:22,640 --> 00:01:29,050
But the reason why is it gives you full full power you're not limited by Tool and codes.

25
00:01:29,050 --> 00:01:32,390
Nice but I've always done it with a terminal and then I switch back between web development and Iowa

26
00:01:32,450 --> 00:01:34,330
development and doing it from the terminal.

27
00:01:34,370 --> 00:01:38,450
All the same and I don't have to learn a bunch of new tools so that is why I do it from the terminal.

28
00:01:38,450 --> 00:01:40,070
You're welcome to do however you want.

29
00:01:40,070 --> 00:01:41,240
I'm not your mother.

30
00:01:41,520 --> 00:01:41,840
OK.

31
00:01:41,840 --> 00:01:47,750
So what we got here so far in our app is the main storyboard here and it supports all the device screen

32
00:01:47,750 --> 00:01:52,730
sizes if I click down here the view as I can change it around and you'll see that it works.

33
00:01:52,760 --> 00:01:56,180
And so what we want to do in this video is let's just build out our other two screens.

34
00:01:56,180 --> 00:01:59,600
We're not going to connect them or show them yet but we're just going to build them out so we can talk

35
00:01:59,600 --> 00:02:02,610
more about constraints while it's fresh on your brain.

36
00:02:02,900 --> 00:02:08,820
And so I'm going to go find those designs if I don't have them open already which I don't.

37
00:02:09,250 --> 00:02:10,140
OK.

38
00:02:10,490 --> 00:02:16,130
So the flow is going to be we go from the Welcome screen to the league screen and then from the league

39
00:02:16,130 --> 00:02:18,140
screen to this finished screen.

40
00:02:18,140 --> 00:02:21,610
So let's go ahead and do the league screen first.

41
00:02:21,620 --> 00:02:27,000
So what I'm going to do is here in the object library I'm just going to grab this view controller.

42
00:02:27,110 --> 00:02:28,190
OK we're going to drag it on.

43
00:02:28,190 --> 00:02:30,320
This is a whole new screen.

44
00:02:30,440 --> 00:02:33,700
And when I see a screen it is a view controller.

45
00:02:33,890 --> 00:02:34,530
OK.

46
00:02:34,610 --> 00:02:37,850
But it manages a bunch of views.

47
00:02:37,850 --> 00:02:39,220
It's unique it's not a bug.

48
00:02:39,230 --> 00:02:41,350
And you know I can't put a bug in.

49
00:02:41,390 --> 00:02:46,410
If you notice if I type in button here I can't drag a button on this white canvas here because there's

50
00:02:46,430 --> 00:02:47,020
nothing there.

51
00:02:47,060 --> 00:02:53,300
All the views that you place have to be on top of your controller here in the Interface Builder.

52
00:02:53,450 --> 00:02:56,340
And so I'm going to leave it here just as is floating for now.

53
00:02:56,360 --> 00:02:57,600
And let's go ahead and build it out.

54
00:02:57,610 --> 00:03:02,320
I'm the type the word image we're going to put on an image view when we've done this before.

55
00:03:02,320 --> 00:03:04,780
We're just going to put it on the edges here.

56
00:03:04,820 --> 00:03:08,480
And what we're going to do is go to our pen menu here at the bottom right.

57
00:03:08,550 --> 00:03:13,760
OK add new constraints and we're going to add it to all four corners of the edges because we want it

58
00:03:13,760 --> 00:03:15,780
to hug to the corners of the screen.

59
00:03:15,830 --> 00:03:20,870
We want it to be full screen no matter what device it is or when to click add for constraints.

60
00:03:20,870 --> 00:03:21,700
Great.

61
00:03:21,800 --> 00:03:23,620
And what we're going to do is select the image.

62
00:03:23,630 --> 00:03:29,540
And of course this one was the desired league game and what we're going to do is instead of scale to

63
00:03:29,540 --> 00:03:33,730
fill say aspect fill We don't know the difference right here.

64
00:03:33,950 --> 00:03:36,950
But it does make a difference depending on what device size you have.

65
00:03:36,950 --> 00:03:41,900
So it's very important to put aspect fail you don't want your image stretched especially with UTLA because

66
00:03:41,900 --> 00:03:46,880
it will move things automatically and at runtime you may notice some differences you don't like aspect

67
00:03:46,880 --> 00:03:48,800
feel always or aspect fit.

68
00:03:49,110 --> 00:03:52,420
OK so let's look at that design again purview.

69
00:03:52,870 --> 00:03:53,220
OK.

70
00:03:53,240 --> 00:03:54,950
So what we have here is the logo.

71
00:03:54,950 --> 00:04:00,080
We've got some text or desirably three buttons here and then a fourth one here.

72
00:04:00,080 --> 00:04:04,340
Now what I want you to do is I want you to think about how you would build this using constraints.

73
00:04:04,470 --> 00:04:05,080
OK.

74
00:04:05,090 --> 00:04:09,190
Now if you want Pozza video you can go ahead and do that how would you build this using constraints.

75
00:04:09,530 --> 00:04:13,530
And then what I want to do is I want to show you a little bit better of a way to do it.

76
00:04:13,670 --> 00:04:14,980
I was going to use constraints.

77
00:04:15,010 --> 00:04:19,010
OK but we're going to work with the stack you stack he was introduced with iOS 9.

78
00:04:19,020 --> 00:04:20,030
And it's amazing.

79
00:04:20,070 --> 00:04:23,360
And what it does is it builds the constraints for you in a lot of cases.

80
00:04:23,370 --> 00:04:29,020
You know always going to use a stack view but you should always use one whenever you can and stack is

81
00:04:29,030 --> 00:04:32,240
another step away from pixel perfect so constraints and Ottaway.

82
00:04:32,240 --> 00:04:33,800
It was one step away from it stack.

83
00:04:33,800 --> 00:04:35,580
These are like two steps away from it.

84
00:04:35,600 --> 00:04:40,280
So if you can get your look with a stacked view great if you're finding that you can achieve the look

85
00:04:40,280 --> 00:04:41,170
that you want with the stack.

86
00:04:41,240 --> 00:04:44,480
You're going to have to not use it and instead use constraints.

87
00:04:44,480 --> 00:04:47,120
So let's go ahead and get this going here.

88
00:04:47,120 --> 00:04:50,650
So we've got the swoosh logo on the first view controller.

89
00:04:50,720 --> 00:04:55,360
I'm going to click the ruler here and I notice that it's 40 from the top which is fine.

90
00:04:55,450 --> 00:04:56,950
I sort of remember that number here.

91
00:04:56,960 --> 00:05:01,760
I'm going to copy this so command C and then I'm going to go over here to the other view controller

92
00:05:02,040 --> 00:05:06,580
OK down here and on the view I'm going to command V.

93
00:05:06,590 --> 00:05:10,090
Now if this this is not visible for you right here what we just did here.

94
00:05:10,160 --> 00:05:12,620
There's a little icon right here that you can see as we hover over.

95
00:05:12,620 --> 00:05:14,230
It's called the document outline.

96
00:05:14,350 --> 00:05:16,380
OK clicking it expands and hides it.

97
00:05:16,380 --> 00:05:20,870
So if you don't want to see it there you want more screen space you can always hide it like so.

98
00:05:20,960 --> 00:05:24,000
And so what I've done is I've copied it from one controller over to another.

99
00:05:24,290 --> 00:05:28,040
And the reason why I didn't just grab it here and then click over here in pases because sometimes it

100
00:05:28,040 --> 00:05:30,110
just doesn't work.

101
00:05:30,320 --> 00:05:31,810
So no big deal.

102
00:05:32,030 --> 00:05:34,050
So let's just drag this up to the top here.

103
00:05:34,070 --> 00:05:35,250
We're not going to pin anything yet.

104
00:05:35,270 --> 00:05:35,990
OK.

105
00:05:36,080 --> 00:05:38,660
And let's look at our preview again.

106
00:05:38,660 --> 00:05:42,620
So what else we need so we need the desired league and then the three buttons here.

107
00:05:42,620 --> 00:05:45,940
So let's go ahead and get some text for the desired league.

108
00:05:46,300 --> 00:05:48,050
I'm going to copy this command see.

109
00:05:48,130 --> 00:05:53,240
And over here and the view on the second view controller command V and I'm just going to drag it up

110
00:05:53,310 --> 00:06:00,250
and eyeball it for now and I'm going to type in the desired desired league.

111
00:06:00,380 --> 00:06:02,960
Now I can't remember if it was camel case or.

112
00:06:03,080 --> 00:06:03,670
OK.

113
00:06:04,000 --> 00:06:04,540
There you go.

114
00:06:04,610 --> 00:06:05,870
It's a capital L.

115
00:06:06,470 --> 00:06:08,180
OK desired league.

116
00:06:08,210 --> 00:06:09,660
Good let me zoom in here for you.

117
00:06:09,710 --> 00:06:10,600
You can see it better.

118
00:06:10,610 --> 00:06:15,290
For those of you who are watching from your mobile devices and we've got our desired league I think

119
00:06:15,390 --> 00:06:17,330
we want the text to be a little bit bigger.

120
00:06:18,630 --> 00:06:19,800
That's good.

121
00:06:19,920 --> 00:06:21,070
So desired league.

122
00:06:21,130 --> 00:06:23,560
What else is on here the three buttons and then a fourth one right.

123
00:06:23,610 --> 00:06:24,980
So these are our standard buttons.

124
00:06:25,020 --> 00:06:28,970
And then the fourth one so men's women's coed and then next.

125
00:06:29,230 --> 00:06:29,650
OK.

126
00:06:29,670 --> 00:06:31,490
Simple stuff we've done this before.

127
00:06:31,530 --> 00:06:36,940
And luckily we've got existing controls here and you're going to find this is very similar in your professional

128
00:06:37,150 --> 00:06:41,700
development that you can to reuse a lot of controls and copy and paste which is really really nice and

129
00:06:41,700 --> 00:06:44,180
everything I'm showing you here is how you actually build apps.

130
00:06:44,190 --> 00:06:47,710
You know some people do crazy things but we do things the way Apple recommends.

131
00:06:47,760 --> 00:06:53,160
Here at dustups and in our app so everything if you're using the def subs app to watch this which you

132
00:06:53,160 --> 00:06:54,790
should because it's amazing.

133
00:06:55,020 --> 00:06:57,500
Everything that we've done in this app I'm teaching you.

134
00:06:57,540 --> 00:06:57,940
OK.

135
00:06:58,020 --> 00:07:01,170
There's nothing that we do that's crazy that you're not learning here.

136
00:07:01,320 --> 00:07:01,600
OK.

137
00:07:01,620 --> 00:07:03,350
I'm giving you the real deal here.

138
00:07:03,390 --> 00:07:04,390
OK.

139
00:07:04,860 --> 00:07:06,860
So sometimes it can be confusing which is fine.

140
00:07:06,870 --> 00:07:09,130
It just takes lots of time and practice.

141
00:07:09,220 --> 00:07:11,990
And I'll explain things over and over again.

142
00:07:12,260 --> 00:07:16,600
And if you ever feel that you're above the curve you can always speed up these videos and watch me at

143
00:07:16,600 --> 00:07:21,160
2 x which is very entertaining or one x is even more entertaining watching me at 1x.

144
00:07:21,180 --> 00:07:22,010
I just.

145
00:07:22,020 --> 00:07:23,420
It's awful.

146
00:07:23,490 --> 00:07:25,330
So Command they get started.

147
00:07:25,390 --> 00:07:25,600
OK.

148
00:07:25,620 --> 00:07:29,430
So Comanche for this get started button over here on the view command V.

149
00:07:29,610 --> 00:07:29,980
OK.

150
00:07:29,990 --> 00:07:31,370
And there's three buttons right.

151
00:07:31,620 --> 00:07:33,210
So I'm just going to holding this here.

152
00:07:33,210 --> 00:07:38,160
I'm going to go ahead and command to duplicate command duplicate again.

153
00:07:38,160 --> 00:07:48,180
All right and what I want to do is men's a women's women's is just double clicking these labels here

154
00:07:48,210 --> 00:07:51,970
inside the buttons and Co dash Ed.

155
00:07:52,140 --> 00:07:55,140
And then of course there was a next button at the bottom.

156
00:07:55,140 --> 00:07:59,060
Select this either click off and click editing it and command wasn't working again.

157
00:07:59,070 --> 00:08:01,660
Sometimes it works sometimes it doesn't.

158
00:08:02,040 --> 00:08:08,390
And it can be finicky like that down here we're going to type in the word next.

159
00:08:08,730 --> 00:08:09,340
OK.

160
00:08:09,600 --> 00:08:15,300
So do you notice how when I click these buttons there they're red on the outside but McLuckie these

161
00:08:15,300 --> 00:08:16,390
ones they're blue right.

162
00:08:16,530 --> 00:08:18,240
Blue is happy blue skies.

163
00:08:18,240 --> 00:08:20,730
Red is like evil demons.

164
00:08:20,730 --> 00:08:22,470
You know you're doing something wrong.

165
00:08:22,830 --> 00:08:25,080
And there's a reason for that.

166
00:08:25,080 --> 00:08:29,670
There's a reason why this is all red and what it's telling us is that our constraints are not set.

167
00:08:29,670 --> 00:08:35,800
Remember how I said when you work with auto lay out everything on the screen must have constraints.

168
00:08:35,850 --> 00:08:40,780
Every single thing on there must be completely laid out with constraints.

169
00:08:40,800 --> 00:08:42,290
So what it's saying is it's not.

170
00:08:42,300 --> 00:08:42,760
None.

171
00:08:42,810 --> 00:08:47,750
Well I don't know why this one's why this was blue shouldn't be.

172
00:08:48,150 --> 00:08:50,030
But you know these are red.

173
00:08:50,100 --> 00:08:51,120
This is really interesting.

174
00:08:51,120 --> 00:08:53,530
This could be a bug with the X code 9 Beta.

175
00:08:53,850 --> 00:08:57,320
But what it's telling us here is that there's a problem.

176
00:08:57,450 --> 00:08:58,260
OK.

177
00:08:58,260 --> 00:08:59,790
So our stuff's on the screen.

178
00:08:59,790 --> 00:09:04,980
But of course if we look at it you know on an iPad obviously it's not doing what we would expect it

179
00:09:04,980 --> 00:09:06,150
to do.

180
00:09:06,150 --> 00:09:12,930
And so let's go ahead and fix these problems and what we're going to do instead of just using constraints

181
00:09:12,960 --> 00:09:19,320
one at a time you know so pinning this 20 or 40 from the top centering horizontally which you've done

182
00:09:19,320 --> 00:09:20,160
before.

183
00:09:20,160 --> 00:09:24,570
We're going to use something called a stacked view and stack these take a little bit practice to get

184
00:09:24,580 --> 00:09:29,730
but they're super easy and trial and error is perfectly OK when working with stack use.

185
00:09:29,730 --> 00:09:34,350
So what I'm going to do is I'm going to grab these two items here and what we're going to do is come

186
00:09:34,350 --> 00:09:38,880
on down here to this little icon here that says in bed and stack.

187
00:09:38,880 --> 00:09:40,390
Now I know what you're thinking.

188
00:09:40,440 --> 00:09:44,640
Oh my gosh what just happened my screen got all messed up and so now I'm stacked views are a little

189
00:09:44,640 --> 00:09:48,960
bit finicky but you'll see how easy they are to work with very soon.

190
00:09:48,960 --> 00:09:54,060
So what I'm going to do is over here in the document outline expand this here and let's just go ahead

191
00:09:54,060 --> 00:09:59,220
on this desired league logo here and let's just give it a fix with it we lost it's with it's probably

192
00:09:59,220 --> 00:10:00,990
at zero which it is.

193
00:10:01,030 --> 00:10:02,490
And that happens sometimes it's finicky.

194
00:10:02,490 --> 00:10:04,830
So what we're going to do is in the pin menu.

195
00:10:04,970 --> 00:10:05,510
OK.

196
00:10:05,730 --> 00:10:10,370
We're going to give it a fix with let's say of 120.

197
00:10:10,470 --> 00:10:11,580
It's not really long enough.

198
00:10:11,580 --> 00:10:14,850
Let's let's make it a little bit longer.

199
00:10:14,850 --> 00:10:16,790
How about 150.

200
00:10:17,280 --> 00:10:17,540
OK.

201
00:10:17,550 --> 00:10:19,000
So 150.

202
00:10:19,110 --> 00:10:19,640
Perfect.

203
00:10:19,650 --> 00:10:20,770
And we're also going to do.

204
00:10:20,820 --> 00:10:26,900
So that's gone therefore I have to give it a fixed height when I say 20.

205
00:10:27,150 --> 00:10:27,620
Cool.

206
00:10:27,790 --> 00:10:32,710
So anyway all we did here was we gave this a fixed width and height because once things are in a stacked

207
00:10:32,710 --> 00:10:37,660
view they can be compressed a little bit with content hugging and things like that.

208
00:10:37,690 --> 00:10:39,800
And so we've got a stack.

209
00:10:40,060 --> 00:10:42,180
All right so here's the really cool thing about it.

210
00:10:42,370 --> 00:10:46,660
OK now that we've just played around the view a little bit we can actually pin a stack view to the different

211
00:10:46,660 --> 00:10:48,230
parts of the screen.

212
00:10:48,310 --> 00:10:48,990
OK.

213
00:10:49,060 --> 00:10:53,770
So what we can do is we can just like we've pinned other things before we want this to be 40 from the

214
00:10:53,770 --> 00:10:54,060
top.

215
00:10:54,060 --> 00:10:54,740
Remember.

216
00:10:55,000 --> 00:10:55,350
OK.

217
00:10:55,360 --> 00:11:00,070
And let's go ahead and make sure margins are on and we'll go ahead and say zero from the left and zero

218
00:11:00,070 --> 00:11:00,970
from the right.

219
00:11:01,000 --> 00:11:03,820
And what I want to do is add those three constraints.

220
00:11:03,820 --> 00:11:09,670
Now with a stack view you don't typically ever ever want to give it a fixed height OK.

221
00:11:09,850 --> 00:11:13,830
Or fix with Usually you want to pin it to things but you don't want to give that a fix with a fixed

222
00:11:13,860 --> 00:11:18,520
height and what a stack you will do is I'll take all of these views and cited them and it will automatically

223
00:11:18,520 --> 00:11:19,480
add the constraints.

224
00:11:19,480 --> 00:11:20,050
OK.

225
00:11:20,140 --> 00:11:23,260
Now we did have to add a width and height because one of the things got messed up.

226
00:11:23,410 --> 00:11:28,540
But you typically see a size and a height or excuse me a with a high of some component in there and

227
00:11:28,540 --> 00:11:29,900
they all morph around it.

228
00:11:30,130 --> 00:11:34,050
So we can't have a whole bunch of components or views in a stack and it adds all the concerns for us

229
00:11:34,050 --> 00:11:39,780
so we don't have to say you know leading trailing pin here pin there it just automatically works.

230
00:11:39,780 --> 00:11:45,130
And so what we can do now with the stacked view OK is we can click this icon over here the attribute

231
00:11:45,130 --> 00:11:46,200
inspector.

232
00:11:46,540 --> 00:11:48,130
And here's some properties of the stack.

233
00:11:48,250 --> 00:11:50,110
You there's an access.

234
00:11:50,140 --> 00:11:52,550
It's a vertical horizontal one our case this stack.

235
00:11:52,550 --> 00:11:57,060
Use a Horizonte or excuse me a vertical we could change it to a horizontal were there side by side.

236
00:11:57,310 --> 00:11:59,790
But isn't that cool just by changing this here.

237
00:11:59,890 --> 00:12:03,760
And you can do this programmatically as well to your entire layout changes and you don't have to do

238
00:12:03,760 --> 00:12:04,740
anything else.

239
00:12:04,970 --> 00:12:09,790
OK so if you're starting to see maybe if you envision you have an iPhone app and then when you rotate

240
00:12:09,790 --> 00:12:13,860
it in a landscape all you do is you change the access of the stack and it magically works.

241
00:12:13,870 --> 00:12:15,090
No other code necessary.

242
00:12:15,100 --> 00:12:20,020
Maybe one line of code to switch it to the switch the access which is really cool.

243
00:12:20,020 --> 00:12:23,960
So we want vertical alignment center leading field trolling.

244
00:12:23,980 --> 00:12:26,870
You should play around with these but centers fine for right now OK.

245
00:12:26,950 --> 00:12:27,390
We don't want to.

246
00:12:27,390 --> 00:12:28,770
On the left we don't want to.

247
00:12:28,780 --> 00:12:32,740
On the right we want it right in the middle and then there's distribution.

248
00:12:32,740 --> 00:12:35,010
How are the items inside of it distributed.

249
00:12:35,050 --> 00:12:39,110
Well you can say feel feel equally feel proportionally to the size of the object.

250
00:12:39,130 --> 00:12:41,490
And again these are things that you can play with as well.

251
00:12:41,530 --> 00:12:43,630
But don't ever change these unless I have to.

252
00:12:43,720 --> 00:12:46,360
So I leave it on feel we may revisit it.

253
00:12:46,600 --> 00:12:48,730
And so this is really cool to the spacing.

254
00:12:48,760 --> 00:12:54,780
So look at this as I add spacing it gets further away and so let's look at our design here.

255
00:12:55,240 --> 00:12:59,460
And so it's what we know that it's a lot further from the swish logo.

256
00:12:59,560 --> 00:13:00,410
OK.

257
00:13:00,410 --> 00:13:05,720
And I love that I'm looking at the designs 40 from the top is probably a little bit too much.

258
00:13:05,820 --> 00:13:08,500
And oh you know what and it's pinning to a margin here.

259
00:13:08,740 --> 00:13:11,250
So what we probably need is just actually 20 from the margin.

260
00:13:11,260 --> 00:13:13,100
So that makes it a lot more sense.

261
00:13:13,150 --> 00:13:18,390
Let's click our stack view here and just change click the ruler here and that is change the top space.

262
00:13:18,400 --> 00:13:19,580
Let's change it to 20.

263
00:13:19,690 --> 00:13:21,420
So it's more like the design.

264
00:13:21,760 --> 00:13:22,030
OK.

265
00:13:22,030 --> 00:13:25,310
So in the stack you just go ahead and increase the spacing.

266
00:13:25,330 --> 00:13:25,710
OK.

267
00:13:25,720 --> 00:13:31,920
So click the identity attributes inspector here and just click this a few more times.

268
00:13:32,350 --> 00:13:32,620
OK.

269
00:13:32,620 --> 00:13:36,930
So this is really cool you can set spacing between objects all right.

270
00:13:36,940 --> 00:13:39,540
And let me show you one more really cool thing that you can do.

271
00:13:39,730 --> 00:13:40,250
All right.

272
00:13:40,570 --> 00:13:45,520
You could just take an item and drag it right in the stack you and automatically adds the constraints

273
00:13:45,520 --> 00:13:48,450
for it so it's doing the same spacing in between them.

274
00:13:48,490 --> 00:13:53,580
Of course the with on this isn't anything important or good because we didn't settle with on it.

275
00:13:53,590 --> 00:13:57,040
We're not saying how much we want it to be but that's really cool right.

276
00:13:57,040 --> 00:14:01,960
So you can just drag items in here and they automatically now fit in the stack with the spacing and

277
00:14:01,960 --> 00:14:02,310
everything.

278
00:14:02,320 --> 00:14:03,640
And this is really amazing.

279
00:14:03,640 --> 00:14:04,270
Very powerful.

280
00:14:04,270 --> 00:14:06,670
We never had this until Iowa 9.

281
00:14:06,970 --> 00:14:09,690
So we're not going to do that though I just did that.

282
00:14:09,730 --> 00:14:13,030
So in our stack view here we've got the swish logo in the desired league.

283
00:14:13,030 --> 00:14:14,960
The next thing I to do is create another stack.

284
00:14:14,980 --> 00:14:19,840
You so I'm going to select these three here by holding Shift and of course they have the red lines because

285
00:14:19,840 --> 00:14:25,230
it's saying hey we don't have the constraints and all we're going to do is click that handy dandy stack.

286
00:14:25,240 --> 00:14:27,290
But again at the bottom here.

287
00:14:27,690 --> 00:14:27,910
OK.

288
00:14:27,910 --> 00:14:30,460
Now of course it's ugly again that's how it always happens.

289
00:14:30,460 --> 00:14:33,480
But let's go ahead and set the constraints now for the stack.

290
00:14:33,510 --> 00:14:38,890
You k so remember what you do is you set constraints on a stacked view and then the things inside you

291
00:14:38,890 --> 00:14:41,950
don't typically set constraints on maybe a with or a high on one of the items.

292
00:14:41,950 --> 00:14:42,340
OK.

293
00:14:42,430 --> 00:14:44,210
But you don't set constraints on them.

294
00:14:44,260 --> 00:14:49,670
So we want this to be on the margins here so zero from the left zero from the right.

295
00:14:49,840 --> 00:14:52,360
And how far do we want it to be from the desired league.

296
00:14:52,490 --> 00:14:55,700
Well let's look at our image here.

297
00:14:55,780 --> 00:14:59,530
You know probably 50 I think 50 is probably what we want.

298
00:14:59,740 --> 00:15:02,160
So let's click this pin menu again.

299
00:15:02,320 --> 00:15:04,770
We have to do that against zero from the left from the right.

300
00:15:04,780 --> 00:15:07,500
And let's say 50 from the other stack view.

301
00:15:07,510 --> 00:15:12,550
OK this is the stack up here we want it to be 50 points or pixels below it.

302
00:15:12,550 --> 00:15:17,090
And then we're not going to specify a height of course because you don't do that with stack use and

303
00:15:17,180 --> 00:15:18,890
boom there are three buttons right.

304
00:15:18,930 --> 00:15:20,270
Really really cool.

305
00:15:20,280 --> 00:15:21,910
So we've got three buttons.

306
00:15:21,930 --> 00:15:25,470
But of course the kind of bleeding over each other which is really annoying.

307
00:15:25,620 --> 00:15:27,930
They're probably larger than they should be.

308
00:15:27,930 --> 00:15:29,550
Let's see here.

309
00:15:29,620 --> 00:15:33,220
A 50 50 50 Well that's actually OK.

310
00:15:33,240 --> 00:15:39,570
So what we can actually do since 50 is the correct type is we can go over here on our stack you and

311
00:15:39,570 --> 00:15:41,300
we can just go ahead and add some spacing.

312
00:15:42,090 --> 00:15:43,270
And they're all 50.

313
00:15:43,500 --> 00:15:46,130
And look at that how magical We didn't have to set constraints.

314
00:15:46,140 --> 00:15:49,950
We didn't have to space every single one just by changing the spacing.

315
00:15:49,950 --> 00:15:53,550
There are now space properly which is really just fantastic.

316
00:15:53,580 --> 00:15:57,060
So we have to stack these here one at the top one at the bottom.

317
00:15:57,060 --> 00:16:00,610
Why didn't I put these three buttons over here with these.

318
00:16:00,840 --> 00:16:05,380
Well because I've worked to stack these before I know that things can be a little tricky.

319
00:16:05,400 --> 00:16:08,680
And this has a spacing between the swish and the desired league.

320
00:16:08,790 --> 00:16:13,830
But these buttons need to be spaced equally so how could I get a weird spacing here which is abnormal

321
00:16:13,860 --> 00:16:16,470
and then equal spacing here and it would not be easy.

322
00:16:16,470 --> 00:16:21,030
So in our case it made more sense to have a stack at the top and stack you at the bottom.

323
00:16:21,030 --> 00:16:21,930
OK.

324
00:16:21,990 --> 00:16:28,110
And of course you can now drags many buttons in here you want so this is what's really amazing about

325
00:16:28,110 --> 00:16:33,900
stack use and also the reason why we don't specify Heights on stack these is because I can do this boem

326
00:16:34,800 --> 00:16:36,640
boem boem.

327
00:16:36,720 --> 00:16:37,110
OK.

328
00:16:37,110 --> 00:16:43,010
And they all just appear here like this and we don't want to do this but again here's the point.

329
00:16:43,090 --> 00:16:47,770
If we had not used the stack you would have to have manually set all the constraints on every single

330
00:16:47,770 --> 00:16:48,630
button here.

331
00:16:49,000 --> 00:16:53,970
So let's do that we don't want to do that of course but OK get rid of that one now on that one.

332
00:16:54,070 --> 00:16:54,790
OK.

333
00:16:55,240 --> 00:16:56,480
So pretty cool.

334
00:16:56,710 --> 00:17:00,660
Men's women's coed Let's see how her design looks compared to this.

335
00:17:00,730 --> 00:17:05,360
You know I'm guessing we're going to be in a little bit more space because of the borders which is fine.

336
00:17:05,410 --> 00:17:09,040
So it's clicked that stack view here you have to select it from the document outline because when you

337
00:17:09,040 --> 00:17:12,290
actually click here it selects the items inside of a stack view.

338
00:17:12,310 --> 00:17:14,390
You have to select that over here and the left hand side.

339
00:17:14,530 --> 00:17:17,070
And let's go ahead and increase that spacing probably to 20.

340
00:17:17,110 --> 00:17:19,050
So those borders are nice in there.

341
00:17:19,130 --> 00:17:24,130
And let's go ahead and lastly pin this one here and it's really helpful that we see the red lines because

342
00:17:24,130 --> 00:17:25,920
we know it's not done yet.

343
00:17:25,990 --> 00:17:31,270
And let's go ahead and just pin it from the bottom 20 from the bottom turn on the margins this is zero

344
00:17:31,270 --> 00:17:32,810
from the left zero from the right.

345
00:17:32,800 --> 00:17:34,820
And let's give it a fixed height of 50.

346
00:17:35,080 --> 00:17:35,790
OK.

347
00:17:36,190 --> 00:17:38,970
And of course the red lines are drawn.

348
00:17:39,100 --> 00:17:45,020
And let's look at the different screen sizes here OK it all looks really good.

349
00:17:45,030 --> 00:17:46,990
And what we did is we used to stack these.

350
00:17:47,190 --> 00:17:47,760
OK.

351
00:17:47,910 --> 00:17:48,970
Pretty cool stuff.

352
00:17:50,360 --> 00:17:51,880
While we're on a roll.

353
00:17:52,100 --> 00:17:54,180
Let's go ahead and just build up the next screen here.

354
00:17:54,230 --> 00:17:56,900
Since this one turned out so nice so quickly.

355
00:17:57,180 --> 00:18:00,800
Elmo a little bit faster so I'm going to type in the view for a view controller.

356
00:18:00,800 --> 00:18:02,850
I want to drag it over here another screen.

357
00:18:02,900 --> 00:18:05,140
Typically you have a view controller per screen.

358
00:18:05,150 --> 00:18:08,230
Typically it doesn't have to be that way but that's the Apple way.

359
00:18:08,540 --> 00:18:09,940
And let's look at our design.

360
00:18:10,250 --> 00:18:12,340
So it's not the design we want.

361
00:18:12,380 --> 00:18:14,590
We want this design here.

362
00:18:14,990 --> 00:18:15,260
Cool.

363
00:18:15,260 --> 00:18:22,100
So let's go ahead and unpack what I'm going to do is I'm going to close this left hand side here so

364
00:18:22,100 --> 00:18:26,400
I can see my image with the zoom out there a little bit.

365
00:18:26,410 --> 00:18:31,120
Move over here and that way I can always just see it right there on the screen.

366
00:18:31,740 --> 00:18:32,110
OK.

367
00:18:32,120 --> 00:18:33,690
So we have our view here.

368
00:18:33,710 --> 00:18:38,180
We need the image of course I'm going to type an image here at the bottom right of the object library

369
00:18:38,480 --> 00:18:43,340
and I'll just drag this over here to the corners and we're going to pin it to the four corners like

370
00:18:43,340 --> 00:18:44,310
we've done in the past.

371
00:18:44,330 --> 00:18:47,900
Zero zero zero zero constrain the margins is off.

372
00:18:48,020 --> 00:18:56,660
Now we it actually goes completely to the edges and they change the image on it to the begin her ball

373
00:18:56,660 --> 00:18:58,200
are you.

374
00:18:58,460 --> 00:19:05,120
And the content mode is going to be aspect feel perfect and let's grab this logo here.

375
00:19:05,150 --> 00:19:07,230
Make sure you have the logo selected and not the stack.

376
00:19:07,280 --> 00:19:08,810
You make sure it is blue over here.

377
00:19:08,810 --> 00:19:15,290
Command C and then on this you control or down here in the document outline in the view command V to

378
00:19:15,290 --> 00:19:16,000
paste.

379
00:19:16,190 --> 00:19:16,850
OK.

380
00:19:17,090 --> 00:19:20,060
And what we'll do is we'll paste it right here.

381
00:19:20,090 --> 00:19:21,520
Actually you have a better idea.

382
00:19:21,590 --> 00:19:24,050
Why don't we just actually do copy the stack view.

383
00:19:24,150 --> 00:19:24,570
OK.

384
00:19:24,590 --> 00:19:27,950
Like so command C in command VI.

385
00:19:28,090 --> 00:19:31,620
OK we'll move it like up here and guess what.

386
00:19:31,640 --> 00:19:34,990
It's maintaining all the properties like the spacing and things like that.

387
00:19:35,360 --> 00:19:39,020
And so that makes it really easy for us and then on this desired league would just change it to.

388
00:19:39,020 --> 00:19:44,020
I am a like so let's zoom in here.

389
00:19:44,100 --> 00:19:45,550
Sorry it's probably a little bit small for you.

390
00:19:45,560 --> 00:19:47,760
They're cool.

391
00:19:48,140 --> 00:19:49,150
So I may.

392
00:19:49,150 --> 00:19:50,210
That looks good.

393
00:19:50,230 --> 00:19:55,360
And we are gonna have to pin the stack to you because the constraints don't copy over.

394
00:19:55,520 --> 00:19:59,990
So the Super view constraints don't copy over and you pay something the ones inside of a collection

395
00:19:59,990 --> 00:20:01,060
might copy.

396
00:20:01,100 --> 00:20:05,420
But the ones for the Super view that are pointing to like the edges of the screen those won't copy over

397
00:20:05,420 --> 00:20:12,440
of course and so on this view controller here in the stack view let's go ahead and pin it to the top

398
00:20:12,880 --> 00:20:17,380
concern the margins is on so let's say 20 from the top.

399
00:20:17,590 --> 00:20:21,250
And yeah we can see zero from the left and zero from the right.

400
00:20:21,290 --> 00:20:22,610
No big deal.

401
00:20:23,160 --> 00:20:24,320
OK so that's pinned there.

402
00:20:24,320 --> 00:20:27,030
No red lines which is looking good to me.

403
00:20:27,230 --> 00:20:29,130
And then we've got two buttons here.

404
00:20:29,540 --> 00:20:31,640
So this is copy two buttons.

405
00:20:31,680 --> 00:20:32,510
I'm holding down shift.

406
00:20:32,510 --> 00:20:33,710
I got two buttons selected.

407
00:20:33,720 --> 00:20:34,620
OK.

408
00:20:34,660 --> 00:20:35,530
Command see.

409
00:20:35,670 --> 00:20:44,050
And this down here and this view command V and it only copied one maybe alias like the one I get will

410
00:20:44,060 --> 00:20:45,840
command and command Be it again.

411
00:20:46,100 --> 00:20:54,990
So now we have two buttons right cool and this one is going to be called beginner be beginner.

412
00:20:54,990 --> 00:20:55,980
There we go.

413
00:20:56,330 --> 00:20:58,170
And bawler.

414
00:20:58,740 --> 00:20:59,540
OK.

415
00:20:59,960 --> 00:21:04,870
And this is probably one of the coolest things ever created with stack views.

416
00:21:04,880 --> 00:21:09,770
Do you see this beginner and Bawler lay out here where they're both equally divided on the screen.

417
00:21:09,770 --> 00:21:12,440
This was a nightmare to do before stack views existed.

418
00:21:12,470 --> 00:21:13,770
What we would have to have done.

419
00:21:13,790 --> 00:21:19,010
I'll show you real quick just for sake of example so you know the benefit of using a stack view what

420
00:21:19,010 --> 00:21:22,970
you would have to have done is typed in you view grabbed a view here.

421
00:21:23,080 --> 00:21:28,800
OK pin the view to the corners here and then inside of this view put the buttons.

422
00:21:28,960 --> 00:21:29,620
OK.

423
00:21:30,610 --> 00:21:31,650
Like so.

424
00:21:32,140 --> 00:21:36,700
And then put another one in there and then pin them to each other inside of this view and then pin the

425
00:21:36,760 --> 00:21:38,500
other view to the outside there.

426
00:21:38,520 --> 00:21:39,100
OK.

427
00:21:39,250 --> 00:21:41,880
A lot of work for a very simple feature.

428
00:21:42,070 --> 00:21:42,580
OK.

429
00:21:42,580 --> 00:21:43,800
And I didn't show you all the stats.

430
00:21:43,810 --> 00:21:48,760
I'm just showing you what you kind of had to do to go through now with stack to use if you ever ever

431
00:21:48,820 --> 00:21:52,640
ever want to divide something across the screen like that like in this image here.

432
00:21:52,780 --> 00:21:58,930
Simply select both the items put them in a stack you by clicking the stack button and change the X to

433
00:21:58,930 --> 00:22:01,740
horizontal and boom you're done.

434
00:22:01,900 --> 00:22:04,740
And again you're probably thinking this is ugly.

435
00:22:04,980 --> 00:22:06,420
It's not doing what we want.

436
00:22:06,430 --> 00:22:06,950
Wow.

437
00:22:07,060 --> 00:22:08,640
That's the easy fix.

438
00:22:08,640 --> 00:22:11,850
Caillat let's let's move this stack view up here.

439
00:22:11,950 --> 00:22:16,540
OK let's move it right here so let's look at this stack for you.

440
00:22:16,540 --> 00:22:17,990
How far was it from the top.

441
00:22:18,010 --> 00:22:25,900
It was so good it's constraint top spaces 50 so the stack is 50 from this let's keep ours consistent

442
00:22:25,900 --> 00:22:30,810
down here so I'm going to click the beginner Bawler stack view and let's go ahead and say we want to

443
00:22:30,820 --> 00:22:36,890
50 from the I am a label and let's say zero from the left and zero from the right margins.

444
00:22:37,060 --> 00:22:37,660
OK.

445
00:22:38,080 --> 00:22:39,890
So it's spreading all the way across.

446
00:22:40,000 --> 00:22:44,050
And you can see that something else is wrong but that's also an easy fix.

447
00:22:44,050 --> 00:22:49,080
So over here you see this icon over here the actuates inspector and your stack view.

448
00:22:49,240 --> 00:22:50,220
Let's look at what we have here.

449
00:22:50,230 --> 00:22:55,060
The alignment is feel and the distribution is field so the distribution is saying hey I don't care how

450
00:22:55,060 --> 00:22:56,830
you fill it just fill it.

451
00:22:56,980 --> 00:23:00,060
But that's not what we want because we need some equal spacing here.

452
00:23:00,100 --> 00:23:03,050
So distribution should be filled equally.

453
00:23:03,070 --> 00:23:05,570
Now both the buttons are filled equally.

454
00:23:05,860 --> 00:23:12,210
And the last thing that we have to do is simply add some spacing done that.

455
00:23:12,850 --> 00:23:21,130
And they're going to have outlines so let's do 25 yeah cool and said easy OK.

456
00:23:21,420 --> 00:23:22,930
Really really cool.

457
00:23:22,980 --> 00:23:24,670
I mean I don't know what else to say it's really awesome.

458
00:23:24,690 --> 00:23:28,310
And if you wanted to add another button of course inside of it.

459
00:23:28,380 --> 00:23:32,230
Copy this next button paste it here and drag it in.

460
00:23:32,400 --> 00:23:36,180
It automatically resides then it makes it all equal.

461
00:23:36,480 --> 00:23:39,530
And that would have been near impossible to do before.

462
00:23:39,540 --> 00:23:42,660
I mean we've done it but it's just well anyway.

463
00:23:42,930 --> 00:23:43,770
Really cool stuff.

464
00:23:43,810 --> 00:23:46,790
I stack you one more thing on the screen that we need to do.

465
00:23:46,950 --> 00:23:52,440
Is this another button so I will copy this next ball and paste it over here and we will drag it down

466
00:23:52,440 --> 00:23:53,410
here at the bottom.

467
00:23:53,460 --> 00:23:54,900
Double click the label inside.

468
00:23:54,950 --> 00:23:55,500
Make it safe.

469
00:23:55,500 --> 00:23:56,760
Finish all caps.

470
00:23:56,760 --> 00:23:59,430
Actually our next button should be all caps too.

471
00:23:59,430 --> 00:24:01,450
That's what the design calls for.

472
00:24:01,470 --> 00:24:04,320
And let's go ahead and pin this 20 to the bottom.

473
00:24:04,320 --> 00:24:04,950
That's fine.

474
00:24:04,950 --> 00:24:08,410
Zero from the left and you're from the right because constrain the margins is on.

475
00:24:08,580 --> 00:24:14,700
And of course we are going to need the height there because it's not attached to anything any type of

476
00:24:14,700 --> 00:24:18,160
relationship up here and boom.

477
00:24:18,240 --> 00:24:21,620
So that's it like we designed this layout so fast.

478
00:24:21,630 --> 00:24:23,610
And I did explain it.

479
00:24:23,640 --> 00:24:26,850
So it took a little while but imagine doing this on your own once you had this down.

480
00:24:26,850 --> 00:24:28,920
It would take like a minute or two max.

481
00:24:28,920 --> 00:24:29,740
OK.

482
00:24:29,820 --> 00:24:31,000
So this is really cool.

483
00:24:31,130 --> 00:24:32,870
Really really cool actually.

484
00:24:32,970 --> 00:24:35,490
And I like what I see so far.

485
00:24:35,490 --> 00:24:37,980
Now of course though the all ends will come when we build and run this.

486
00:24:37,980 --> 00:24:41,670
Now we don't need to do that right now though we know we know it's going to work so long as our button

487
00:24:42,270 --> 00:24:47,010
is a tight border button which it is because we've been copying and pasting so let's call this video

488
00:24:47,010 --> 00:24:47,460
done.

489
00:24:47,460 --> 00:24:49,280
What have we done and learned.

490
00:24:49,380 --> 00:24:55,950
OK we have learned that we can you stack views OK to make our life much easier when working with auto

491
00:24:55,960 --> 00:25:01,080
layout because a stacked view will automatically add constraints to the views inside.

492
00:25:01,320 --> 00:25:06,300
However sometimes a stacked view needs a base point in order to work with.

493
00:25:06,300 --> 00:25:09,660
So you may have to set the width and the height of an element inside of it.

494
00:25:09,660 --> 00:25:15,630
So the other elements know how to react to it and you might say well that's not very scientific and

495
00:25:15,630 --> 00:25:18,150
there isn't a science behind it and it isn't the apple documentation.

496
00:25:18,150 --> 00:25:19,770
All the details that you need there.

497
00:25:19,770 --> 00:25:26,260
I just showed you how how we solve that problem and stack views though are very very easy.

498
00:25:26,310 --> 00:25:29,650
So really good stuff here.

499
00:25:29,670 --> 00:25:34,410
We use them all the time on the slopes app and they are a very useful and powerful tool so you'll be

500
00:25:34,410 --> 00:25:40,200
using these for the rest of your life as an I was developer with manual constraints and you also we've

501
00:25:40,200 --> 00:25:41,470
talked about this and the other video.

502
00:25:41,480 --> 00:25:46,760
But you also learn how to program move things around with frames and we also do that and the dustups

503
00:25:46,770 --> 00:25:51,510
app and a couple of the screens were auto layout didn't work for the purposes that we need to actually

504
00:25:51,510 --> 00:25:55,440
move things on the screen with with programming.

505
00:25:55,620 --> 00:26:04,230
And the example is basically on the the main screen of the slopes app we have these swappable scroll

506
00:26:04,410 --> 00:26:08,850
icons and we needed to support it in landscape and in all the different orientations and it needed to

507
00:26:08,850 --> 00:26:11,400
be nearly pixel perfect because our designers really anal.

508
00:26:11,400 --> 00:26:16,060
And so I actually did in that case build some very custom logic with programming moving frames around

509
00:26:16,070 --> 00:26:18,270
uncalculated device with and all these different things.

510
00:26:18,330 --> 00:26:23,160
Everything laid out perfectly nice and all screen devices so you will do that from time to time which

511
00:26:23,160 --> 00:26:26,070
is why I showed you but this is what you'll do most of the time.

512
00:26:26,100 --> 00:26:26,820
That's it for now.

513
00:26:26,820 --> 00:26:30,090
Marc price at DEF slopes dot com on non-full.