1
00:00:07,670 --> 00:00:11,500
Hey hey ladies and gentlemen welcome back Johnny be here with us.

2
00:00:11,590 --> 00:00:18,960
Com and we are continuing on with our SMAC chat app and we're making great progress in just the first

3
00:00:18,960 --> 00:00:19,620
couple of lessons.

4
00:00:19,620 --> 00:00:22,500
We already got the slide out menu.

5
00:00:22,500 --> 00:00:25,510
In fact let's go ahead and just run this and take a look.

6
00:00:25,800 --> 00:00:34,110
In this lesson we're going to continue working on our UI we're going to get the channel set up to actually

7
00:00:34,260 --> 00:00:39,040
go ahead and take a look at our design mockups.

8
00:00:39,060 --> 00:00:42,210
And here is what we're going to be working on.

9
00:00:42,210 --> 00:00:46,440
So we got a couple of labels some buttons on here.

10
00:00:46,440 --> 00:00:53,520
Button Down here with a with an image and a table view that's going to contain our channels later on.

11
00:00:53,760 --> 00:00:58,980
And one of the big things here though that we're going to work on is what you see here in the background.

12
00:00:58,980 --> 00:01:00,540
This gradient.

13
00:01:00,950 --> 00:01:09,090
And so we're actually going to code up a custom gradient view file that's going to be able to that's

14
00:01:09,090 --> 00:01:12,160
going to be able to do this or this is going to be pretty cool pretty fun.

15
00:01:12,210 --> 00:01:13,430
And so let's get started.

16
00:01:13,430 --> 00:01:14,020
All right.

17
00:01:14,280 --> 00:01:15,080
So that's good.

18
00:01:15,090 --> 00:01:23,940
And jump over here into main storyboard real quick and Oh My looks like or is shifted around a bit.

19
00:01:23,980 --> 00:01:27,000
I'm just going to drag this over.

20
00:01:27,000 --> 00:01:33,540
All right so here's where we're at Here's what we've got so far in our simulator we're able to pull

21
00:01:33,540 --> 00:01:37,740
this and drag this over and right now our channel Visi is just plain white.

22
00:01:37,800 --> 00:01:40,200
So let's go ahead and work on that.

23
00:01:40,200 --> 00:01:41,690
So how are we going to make this gradient.

24
00:01:41,730 --> 00:01:46,030
You know you might think it's going to be pretty tough but it's actually not too bad.

25
00:01:46,030 --> 00:01:50,610
I what we're going to do is we're going to come compare here to our view folder and we're into right

26
00:01:50,610 --> 00:01:54,840
click and say new file and we're going to create a subclass.

27
00:01:54,930 --> 00:01:59,820
So we're going to make sure you've got Iowa selected and Coquito each class going to say next and it's

28
00:01:59,820 --> 00:02:01,870
going to be a subclass of you view.

29
00:02:01,990 --> 00:02:04,270
We're going to call this gradient.

30
00:02:04,740 --> 00:02:07,420
You say next.

31
00:02:08,220 --> 00:02:12,190
And create.

32
00:02:12,240 --> 00:02:12,490
All right.

33
00:02:12,490 --> 00:02:20,420
So what we're going to do is we're going to make this subclass not only work when we run but also so

34
00:02:20,420 --> 00:02:25,170
that you can see it in real time action in the in the storyboard.

35
00:02:25,170 --> 00:02:25,730
OK.

36
00:02:25,920 --> 00:02:34,920
So first off what we gotta do is we've got to put in a line of code here called IB desirable and basically

37
00:02:34,980 --> 00:02:41,490
what this does is this just lets this class know that it needs to be able to render inside of the storyboard

38
00:02:42,080 --> 00:02:49,560
and then we're going to need a couple of variables that we are able to select and change in the storyboard.

39
00:02:49,560 --> 00:02:54,300
So for instance if we come over to the storyboarded and just grab any of these elements you'll see here

40
00:02:54,300 --> 00:03:01,440
that you know we have things that we can select and change and we're just going to create custom variables

41
00:03:01,440 --> 00:03:08,830
that we can change ourselves and that will change the properties of this custom view OK.

42
00:03:09,490 --> 00:03:13,140
And we do that by declaring an IP inspectable.

43
00:03:13,680 --> 00:03:14,260
OK.

44
00:03:14,510 --> 00:03:19,220
And we're going to say var top color.

45
00:03:19,860 --> 00:03:22,320
And that's going to be of type UI color.

46
00:03:22,440 --> 00:03:29,680
And for now I'll just say something like you like colored dot blue and so now what we're doing is we're

47
00:03:29,680 --> 00:03:34,460
creating a variable that can be changed inside of the storyboard.

48
00:03:34,840 --> 00:03:39,600
And that's going to be a color picture that we can be able to choose.

49
00:03:39,670 --> 00:03:40,370
OK.

50
00:03:40,430 --> 00:03:50,470
And then we're going to say did set and we're ready to say self-taught needs out.

51
00:03:50,620 --> 00:03:50,990
OK.

52
00:03:51,190 --> 00:03:56,620
So if we click on self that needs layout right here it says that what this does is it invalidates the

53
00:03:56,620 --> 00:04:01,490
current layout of the receiver and triggers a layout update during the next update cycle.

54
00:04:01,510 --> 00:04:02,030
OK.

55
00:04:02,260 --> 00:04:08,950
So basically when we're in storyboard if we click on this and change the color when we said it that's

56
00:04:08,950 --> 00:04:13,320
what this key word here is it did set then we're going to say OK we've changed some stuff.

57
00:04:13,330 --> 00:04:17,950
So go ahead and update how we look update the layout of this view.

58
00:04:18,040 --> 00:04:18,750
OK.

59
00:04:19,140 --> 00:04:24,780
And so we're going to need a couple of variables here because we're making a gradient.

60
00:04:24,880 --> 00:04:32,110
And of course a gradient is you know you have usually two colors it can be multiple colors but you're

61
00:04:32,110 --> 00:04:35,100
changing gradually from one color to another color.

62
00:04:35,180 --> 00:04:37,860
And it just sort of blends nicely together.

63
00:04:37,870 --> 00:04:38,780
Right.

64
00:04:38,830 --> 00:04:43,750
So we got a top color and then we're going to have of course a bottom color and I'm just actually going

65
00:04:43,750 --> 00:04:48,370
to copy this and pasted for sake of time.

66
00:04:48,400 --> 00:04:56,710
See bottom color and we'll change this soon to say UI colored dark green and same thing.

67
00:04:56,710 --> 00:05:00,450
Once we change it we're just going to update our layout.

68
00:05:00,780 --> 00:05:03,910
OK but what's going to happen when we update our layout.

69
00:05:04,030 --> 00:05:10,080
Well we you know we haven't even we haven't said what needs to happen when we update it.

70
00:05:10,150 --> 00:05:15,960
So we are going to override our lay out sub views because.

71
00:05:16,000 --> 00:05:18,950
So what's happening is when when we change color we say setting Heasley.

72
00:05:18,970 --> 00:05:25,450
And what happens when you say Soudanese lay out then the the layout of the view is updated and this

73
00:05:25,450 --> 00:05:26,810
function right here is called.

74
00:05:26,830 --> 00:05:27,460
All right.

75
00:05:27,460 --> 00:05:32,560
So here is where we're going to actually create our layer and add it to this.

76
00:05:32,590 --> 00:05:33,910
You either use subclass.

77
00:05:33,910 --> 00:05:34,600
OK.

78
00:05:35,100 --> 00:05:38,570
So working with gradient layers and swift is actually pretty easy.

79
00:05:38,620 --> 00:05:47,530
So what we're going to do first is we're just going to create a variable called gradient layer and that's

80
00:05:47,530 --> 00:05:54,550
going to be of type A gradient layer for CA stands for core animation and if you click on here right

81
00:05:54,550 --> 00:06:00,310
here and you can see the description says a layer that draws a color gradient over its background color

82
00:06:00,600 --> 00:06:03,570
filling the shape of the layer including rounded corners.

83
00:06:03,640 --> 00:06:04,200
OK.

84
00:06:04,570 --> 00:06:08,640
So we're going to create the a gradient layer.

85
00:06:08,920 --> 00:06:11,090
And then we're going to set up some of its properties.

86
00:06:11,090 --> 00:06:11,520
OK.

87
00:06:11,740 --> 00:06:14,640
So what does a gradient need.

88
00:06:14,920 --> 00:06:19,680
Well first off it needs some colors of which we've already created a couple of here.

89
00:06:19,780 --> 00:06:29,860
It needs a starting and an end point and it needs to know how big of the shape it is going to be filling.

90
00:06:30,210 --> 00:06:32,270
And yes pretty much it.

91
00:06:32,290 --> 00:06:34,850
So it needs colors start and end point.

92
00:06:34,870 --> 00:06:37,300
And to know how big it's going to be.

93
00:06:37,360 --> 00:06:37,780
OK.

94
00:06:38,670 --> 00:06:44,030
So to start with we're going to say gradient layer dot colors is equal to.

95
00:06:44,070 --> 00:06:50,190
And you see that it is expecting an array of UI or CEG colors actually.

96
00:06:50,190 --> 00:07:00,670
So we're going to say top color dot C-g color and then bottom color dot Siggi color.

97
00:07:00,900 --> 00:07:06,300
So now we have set up the colors that are going to be included in this ingredient.

98
00:07:06,300 --> 00:07:11,790
Now we're going to set up the start and end point and talk about the start and end point.

99
00:07:11,780 --> 00:07:15,820
I created this little graph for you.

100
00:07:15,870 --> 00:07:22,700
So in Iowa as the UI views they have their their own coordinate system OK.

101
00:07:22,920 --> 00:07:29,210
So you view the origin is 0 0 so x equals zero and y equals zero.

102
00:07:29,310 --> 00:07:32,760
And that's actually the top left which might be a little bit counter-intuitive to you.

103
00:07:32,760 --> 00:07:33,360
Right.

104
00:07:33,390 --> 00:07:38,460
So in school you probably learn with graphs that the origin is down here and the bottom left not so

105
00:07:38,460 --> 00:07:46,110
with iOS I don't know why but the origin is up here in the top left at 0 0 and the y axis grows more

106
00:07:46,110 --> 00:07:51,880
positive as you go down and the x axis grows more positive as you go to the right.

107
00:07:51,900 --> 00:07:59,290
So if you use the the numbers are normalized to 1 OK so 0 being the least and one being the most.

108
00:07:59,340 --> 00:08:06,780
All right so here at the top left we have we're at 0 0 and then here at the bottom right is 1 1 or here

109
00:08:06,780 --> 00:08:07,890
at the top right.

110
00:08:08,190 --> 00:08:11,220
Is 1 and Y is zero.

111
00:08:11,310 --> 00:08:16,710
Or here at the bottom left X is zero and y is one.

112
00:08:16,740 --> 00:08:24,480
So with that in mind if we wanted a gradient that went cascading from the top left to the bottom right

113
00:08:24,870 --> 00:08:30,000
the starting point would be 0 0 and the endpoint would be 1 1.

114
00:08:30,330 --> 00:08:39,690
And if we take a look at our designs it does indeed look like our gradient flows from the top left to

115
00:08:39,810 --> 00:08:40,820
the bottom right.

116
00:08:40,980 --> 00:08:46,290
So I'm thinking our start point needs to be here at 0 0 and our end point needs to be down here at 1

117
00:08:46,290 --> 00:08:47,390
1.

118
00:08:47,530 --> 00:08:47,690
Right.

119
00:08:47,730 --> 00:08:50,220
So let's go ahead and code that up.

120
00:08:50,370 --> 00:08:51,690
So that just looks like this.

121
00:08:51,690 --> 00:09:00,510
We're going to say gradient there Dot start point is equal to and if you check out right here what are

122
00:09:00,510 --> 00:09:01,900
we expecting.

123
00:09:02,050 --> 00:09:03,460
Come on auto complete.

124
00:09:03,660 --> 00:09:07,070
Looks like it's going to show me but it's expecting a C G point.

125
00:09:07,140 --> 00:09:07,690
OK.

126
00:09:07,970 --> 00:09:13,650
So a core graphics point and you just writes see point and then pull up a parentheses it'll give us

127
00:09:13,650 --> 00:09:16,340
some options for auto completion.

128
00:09:16,470 --> 00:09:17,670
So we're going to do.

129
00:09:17,700 --> 00:09:26,940
Here's how we're going to see 0 0 is our start point and Preedy and laser dot and point is equal to

130
00:09:27,380 --> 00:09:32,150
see C.G. point.

131
00:09:32,190 --> 00:09:37,680
And that is going to be one 1.

132
00:09:37,760 --> 00:09:44,450
So now we need to tell it what size the view is going to be sorgen say ingredient layer dot

133
00:09:47,130 --> 00:09:54,420
frame is equal to and for that we're just going to set it equal to the size of the view that it is a

134
00:09:54,420 --> 00:09:58,330
subclass of Swansea's self-taught bounds.

135
00:09:58,410 --> 00:10:02,940
And then lastly we need to we've just created a layer we haven't added it to anything.

136
00:10:02,940 --> 00:10:11,190
So we're going to add this gradient layer which is a gradient layer to the abuse layers Swansea's self-taught

137
00:10:11,190 --> 00:10:20,330
layer dot insert Sabliere So this insurors the specified layer into the receiver's list of layers at

138
00:10:20,330 --> 00:10:22,170
the specified index.

139
00:10:22,390 --> 00:10:29,510
So you can say insert tabs the layer that we are going to insert is of course our gradient layer.

140
00:10:29,720 --> 00:10:35,730
And we are going to place it at zero meaning that it's at the first layer.

141
00:10:35,780 --> 00:10:35,990
All right.

142
00:10:35,990 --> 00:10:43,980
So we're going to see this is going to clean this up a little bit get rid of the empty space.

143
00:10:44,090 --> 00:10:49,150
Save that and let's go over this just this whole entire file just one more time to start off.

144
00:10:49,160 --> 00:10:49,580
We have.

145
00:10:49,580 --> 00:10:53,780
I design them all which means that it's going to be able to work in storyboard.

146
00:10:53,780 --> 00:11:01,520
We have our inspectable variables that we'll be able to change inside the storyboard dynamically and

147
00:11:01,520 --> 00:11:07,280
then we have our override function of layout subbie use which is called whenever we change one of our

148
00:11:07,820 --> 00:11:11,420
variables here and inside of that we create a layer.

149
00:11:11,450 --> 00:11:14,420
We set the layer colors.

150
00:11:14,510 --> 00:11:16,900
We set the start end point and the frame.

151
00:11:16,940 --> 00:11:20,770
And lastly we insert that sub layer to the view itself.

152
00:11:20,780 --> 00:11:21,270
OK.

153
00:11:21,590 --> 00:11:27,490
So that looks good we're going to say that we're going to come back over here to our main story board

154
00:11:29,030 --> 00:11:34,910
and I'm going to select our channel Visi and I'm going to select our view here and we read to change

155
00:11:34,970 --> 00:11:38,930
its class to a greedy interview.

156
00:11:38,960 --> 00:11:41,090
Now check this out.

157
00:11:41,120 --> 00:11:45,710
This is going to do a little bit of work here because it's got to reset the storyboard but if everything

158
00:11:45,710 --> 00:11:50,700
goes according to plan we should see a nice gradient view right here.

159
00:11:53,650 --> 00:11:54,860
And voila.

160
00:11:55,030 --> 00:12:00,340
So you see here that we have we're starting here at 0 0 and we're ending up here.

161
00:12:00,340 --> 00:12:06,400
So with these end start and end points you kind of think of it like you're drawing a string between

162
00:12:06,400 --> 00:12:15,150
those two points and the color ingredient in lines has to be perpendicular to that line at any point.

163
00:12:15,160 --> 00:12:15,620
OK.

164
00:12:15,760 --> 00:12:19,400
So imagine a string from here to here.

165
00:12:19,540 --> 00:12:23,590
All of these gradient lines are perpendicular to that line.

166
00:12:23,590 --> 00:12:24,170
OK.

167
00:12:24,460 --> 00:12:28,950
So you can do some pretty cool things with with these green views.

168
00:12:28,960 --> 00:12:34,180
Just go ahead and just come over here and let's see if we can change these so we can change this to

169
00:12:34,180 --> 00:12:39,640
read and yellow is should they automatically here and storyboards So that is pretty cool.

170
00:12:39,640 --> 00:12:45,340
And I just want to show you a couple of other cool things with the gradients you'll see here in our

171
00:12:45,340 --> 00:12:47,620
gradient layer dark colors.

172
00:12:47,620 --> 00:12:51,790
It doesn't have to be just to you could actually put as many greeting and colors in here as you want.

173
00:12:51,790 --> 00:12:56,950
So for instance I'm going to we're going to sandwich the middle color so we're going to see top color

174
00:12:56,950 --> 00:13:04,120
bottom color top color that C.G. color and then let's jump back into storyboard and see what that looks

175
00:13:04,120 --> 00:13:04,770
like.

176
00:13:07,660 --> 00:13:12,040
So now you see that we have three different colors here in the gradient.

177
00:13:12,460 --> 00:13:17,870
And then let's go ahead and show you how you can switch up some of these other things here.

178
00:13:18,090 --> 00:13:22,540
So bring back my let's see here my coordinate system.

179
00:13:22,540 --> 00:13:27,220
So say you wanted a gradient that was you know just straight up and down.

180
00:13:27,400 --> 00:13:30,350
What would your start and end point need to be.

181
00:13:30,670 --> 00:13:35,320
Well your start point would need to be right here in the middle and your endpoint would need to be right

182
00:13:35,320 --> 00:13:36,740
here in the middle at the bottom.

183
00:13:37,060 --> 00:13:38,430
So what would that look like.

184
00:13:38,620 --> 00:13:42,680
Well why would be zero and your X would be zero point five right.

185
00:13:42,850 --> 00:13:45,160
So you're going to say zero point five.

186
00:13:45,640 --> 00:13:51,690
And then at the bottom it needs to be all the way up the.

187
00:13:52,720 --> 00:13:53,280
I'm sorry.

188
00:13:53,380 --> 00:13:58,160
It should be 0.5 for X and 0 for Y.

189
00:13:58,270 --> 00:14:02,700
And then at the bottom why should be 1 and X should still be 0.5.

190
00:14:02,970 --> 00:14:09,060
Let's go and see what that looks and see that come back to our storyboard.

191
00:14:09,060 --> 00:14:09,380
There we go.

192
00:14:09,430 --> 00:14:15,790
So now we see that we have our grading just straight up and down and same thing if you wanted to be

193
00:14:16,480 --> 00:14:30,340
vertical looking gradient then you would just change it to 0.5 for the y 0 for X and then the endpoint

194
00:14:30,340 --> 00:14:33,410
would be one for X and 0.5.

195
00:14:33,520 --> 00:14:38,190
Save that and come back to storyboard.

196
00:14:38,540 --> 00:14:39,550
And there you go.

197
00:14:39,590 --> 00:14:46,670
So we can do all sorts of cool things with with gradients and then the last thing that we want to do

198
00:14:46,670 --> 00:14:52,820
is actually just set these to the right colors that we want to use because as you probably noticed this

199
00:14:52,820 --> 00:14:57,760
is nothing like the colors that we want to be seeing here.

200
00:14:57,770 --> 00:14:58,220
All right.

201
00:14:58,340 --> 00:15:03,720
So what those cars actually are let's go back to our greeting view and switch things back.

202
00:15:04,010 --> 00:15:10,620
Just going to do switch these back to where we want them 0 0 and 1 1.

203
00:15:10,730 --> 00:15:16,050
Then we're going to get rid of this third color and then I'm going to show you something cool.

204
00:15:16,110 --> 00:15:24,320
So the old days you'd either have to use the standard colors that color comes with or could your own

205
00:15:24,320 --> 00:15:31,660
using the color initialized with the R G B components or now you can just do something with like this

206
00:15:31,670 --> 00:15:38,720
color literal and then you can double click on this and put in your own colors whatever you want them

207
00:15:38,720 --> 00:15:39,460
to be.

208
00:15:39,650 --> 00:15:44,700
All right so let me just pull up here the colors that we want this to be.

209
00:15:45,170 --> 00:15:46,220
Let's see here.

210
00:15:46,500 --> 00:15:55,920
So this purple is going to be up here next color for a for d d 8.

211
00:15:55,970 --> 00:16:02,940
So that's our top color and our bottom color and do the same thing here color literal.

212
00:16:03,290 --> 00:16:14,710
Then double click on it to change it to other and it's next color is to C D for d 8 right.

213
00:16:14,740 --> 00:16:16,510
That looks good.

214
00:16:16,550 --> 00:16:23,860
I just wanted to say that come back over to our storyboard and there we go.

215
00:16:23,890 --> 00:16:24,320
All right.

216
00:16:24,650 --> 00:16:31,370
So we got our good looking grading and let's go ahead and compare this as looking.

217
00:16:31,430 --> 00:16:33,770
I was looking pretty good.

218
00:16:33,830 --> 00:16:34,060
All right.

219
00:16:34,070 --> 00:16:41,780
So this guy right here we can also change to be the greedy and view that change as well.

220
00:16:41,780 --> 00:16:43,340
All right so that's looking good.

221
00:16:43,340 --> 00:16:47,090
All right so what's next here in our channel.

222
00:16:47,170 --> 00:16:48,230
See what do we got.

223
00:16:48,230 --> 00:16:50,440
We got a label up here.

224
00:16:50,540 --> 00:16:51,870
We got another label here.

225
00:16:51,940 --> 00:17:01,570
But a table view and puts a image view here and then a button down here.

226
00:17:01,970 --> 00:17:02,240
Right.

227
00:17:02,240 --> 00:17:05,150
So let's go ahead and get cracking on that.

228
00:17:05,150 --> 00:17:15,310
So here I'm going to go ahead and search for the label and drag you in here drag another label in.

229
00:17:15,770 --> 00:17:20,320
Then we need a button up here.

230
00:17:20,640 --> 00:17:32,140
Hey button down here hand an image view you as well down here I suppose go and get started up here.

231
00:17:32,300 --> 00:17:38,460
Let me grab both of these labels and change the color to white.

232
00:17:38,830 --> 00:17:42,260
I didn't change the font to custom.

233
00:17:42,500 --> 00:17:44,380
And we're going to go with that couldn't you.

234
00:17:44,720 --> 00:17:53,410
And that looks fine and it done this one though is actually going to be style bold.

235
00:17:53,800 --> 00:17:57,480
And we're going to bump that up a couple of sizes.

236
00:17:57,500 --> 00:17:58,990
So it looks good.

237
00:17:59,030 --> 00:18:07,850
I'm going to change the title to smack and then if you if you get like this where is truncated like

238
00:18:07,850 --> 00:18:08,280
them.

239
00:18:08,360 --> 00:18:13,340
If you click on it and just go a command equal it will fit it to its size height.

240
00:18:13,710 --> 00:18:16,390
And this guy right here we're going to call this channels.

241
00:18:16,460 --> 00:18:17,270
Right.

242
00:18:17,720 --> 00:18:23,370
And then we're going to decrease its size all the way down to 12 right here.

243
00:18:23,650 --> 00:18:23,910
OK.

244
00:18:23,930 --> 00:18:25,900
And then we're going to say command equal.

245
00:18:25,910 --> 00:18:27,620
On it again.

246
00:18:27,620 --> 00:18:29,680
And that looks pretty good.

247
00:18:29,900 --> 00:18:30,950
And this button over here.

248
00:18:30,950 --> 00:18:32,690
This is the ad channel buttons.

249
00:18:32,680 --> 00:18:34,060
It's a plus sign.

250
00:18:34,070 --> 00:18:38,090
We don't need any any text there for the button.

251
00:18:38,170 --> 00:18:43,600
So I delete the text and then here I'm going to go to its image right here.

252
00:18:43,820 --> 00:18:46,240
And this is add the channel button.

253
00:18:46,250 --> 00:18:48,050
All right so we got that right there.

254
00:18:48,050 --> 00:18:49,600
Let's go and zoom in on this.

255
00:18:51,150 --> 00:18:52,610
View Controller here.

256
00:18:53,060 --> 00:18:55,490
All right so I started to take shape a little bit.

257
00:18:55,690 --> 00:19:01,520
So down here we have the image view and so I'm just going to resize I was going through an image in

258
00:19:01,520 --> 00:19:09,360
there so that we can actually see it and the image that we want is called menu profile icon and that

259
00:19:09,360 --> 00:19:10,630
looks good.

260
00:19:10,650 --> 00:19:16,400
We need to resize it so the size is 75 by 75.

261
00:19:16,970 --> 00:19:19,880
I'm just going to drag this down here to the bottom

262
00:19:23,190 --> 00:19:33,390
we go and then I'm going to drag this guy right here and change its text color to white of course change

263
00:19:33,390 --> 00:19:39,560
the font to custom and hope that it can new is fine but this is going to be bold.

264
00:19:39,600 --> 00:19:41,190
That looks good.

265
00:19:41,190 --> 00:19:50,390
Going to change its title to log in right and then it's pretty good.

266
00:19:50,380 --> 00:19:52,950
Now go ahead and start adding some constraints here.

267
00:19:53,150 --> 00:19:56,220
All right so for this guy let's go.

268
00:19:56,240 --> 00:20:08,590
Zero from the left and 24 from the top and then for channels let's go zero from the left and 20 from

269
00:20:08,590 --> 00:20:17,750
the bottom of the SMAC And what does that look different Let's see how did I not do a left constraint

270
00:20:17,750 --> 00:20:18,770
leading space.

271
00:20:18,840 --> 00:20:23,790
There should be zero leading space should be zero.

272
00:20:23,810 --> 00:20:24,030
All right.

273
00:20:24,050 --> 00:20:31,520
And then for our button here we're going to go ahead and do a controlled drag to the channel's label

274
00:20:31,530 --> 00:20:36,810
I'm going to say center vertically and then we need to add a constraint.

275
00:20:36,950 --> 00:20:43,600
And you may think that we should just do a standard spacing from the right of you know 20.

276
00:20:43,820 --> 00:20:52,710
But if we run this remember that we actually have a top view controller that doesn't disappear entirely.

277
00:20:52,730 --> 00:20:55,430
So that's probably going to be obstructed.

278
00:20:55,710 --> 00:20:56,440
Yep see.

279
00:20:56,540 --> 00:21:00,050
So you can even can't even really see it.

280
00:21:00,230 --> 00:21:02,960
You can see it for just a second but it's being covered up.

281
00:21:02,980 --> 00:21:10,420
So remember we made the we made we left 60 points on the right.

282
00:21:10,520 --> 00:21:15,920
So what we want to do is actually I'm going to if we have it selected we can go to it size constraint

283
00:21:16,010 --> 00:21:24,410
and we can drag its trailing space people to 20 and I can just change this to we want this to be 72.

284
00:21:24,420 --> 00:21:25,220
All right.

285
00:21:25,330 --> 00:21:27,490
So let's go ahead and run that again.

286
00:21:29,100 --> 00:21:31,740
And if we click on this now if we have it.

287
00:21:31,770 --> 00:21:38,610
And you know I think this is was 70 to what I want to but 72 with out the constraint with the margins

288
00:21:38,610 --> 00:21:40,110
you see we have some constraints.

289
00:21:40,170 --> 00:21:46,910
The margins were here so I'm going to go and just delete this and then add it again but uncheck be constrained

290
00:21:46,910 --> 00:21:47,850
to margins right here.

291
00:21:47,850 --> 00:21:48,400
OK.

292
00:21:48,570 --> 00:21:55,650
So what I did I did that kind of quick but I deleted the old constraint that had the margin already

293
00:21:55,650 --> 00:21:56,670
built into it.

294
00:21:56,760 --> 00:22:03,110
Then I clicked on it again added a new constraint and made sure that the constraint of margins was unchecked.

295
00:22:03,160 --> 00:22:06,870
And I'm going to say add constraint and that should do it for us.

296
00:22:06,870 --> 00:22:09,750
All right so these are all constrained up here at the top.

297
00:22:09,750 --> 00:22:11,970
Let's go and do these guys down here at the bottom.

298
00:22:12,030 --> 00:22:19,650
So when I say zero from the left 20 from the bottom and width and height and for this right here we're

299
00:22:19,650 --> 00:22:26,850
going to control drag to the image here and going I say center vertically and then I'm going to give

300
00:22:26,850 --> 00:22:30,970
it 20 from the left.

301
00:22:30,970 --> 00:22:34,440
All right so that is now also fully constrained.

302
00:22:34,520 --> 00:22:43,970
And last but not least I'm going to throw a table with you in here and let's go ahead and just kind

303
00:22:43,970 --> 00:22:51,530
of throw you in here and drag you out and I'm going to constrain that zero from the left 20 from the

304
00:22:51,590 --> 00:22:56,430
top zero from the right and 20 from the bottom.

305
00:22:56,490 --> 00:22:57,940
Add four constraints.

306
00:22:58,040 --> 00:23:05,150
And I'm going to make sure that our background is clear on this case of background here and say clear

307
00:23:05,150 --> 00:23:09,540
color right and I'm going to save this and run it just to see how it looks.

308
00:23:09,950 --> 00:23:15,200
And voila there you go looking pretty nasty.

309
00:23:15,200 --> 00:23:19,020
All right so we're making some great progress on our AUI right here.

310
00:23:19,050 --> 00:23:26,180
We created an awesome gradient file that you can reuse anywhere for anything that inherits from you

311
00:23:26,310 --> 00:23:27,280
use.

312
00:23:27,350 --> 00:23:29,450
So you know we're making good progress.

313
00:23:29,530 --> 00:23:36,890
And yeah so next thing we're going to do is go ahead and save and commit hard changes because we are

314
00:23:37,220 --> 00:23:38,260
good little programmers.

315
00:23:38,260 --> 00:23:46,540
I mean I say get make sure I'm on the right branch you for less than three minutes say get status say

316
00:23:46,550 --> 00:23:55,220
get and get commit dash em and this is less than three.

317
00:23:55,390 --> 00:24:04,040
And then I'm going to actually push this branch up to my depth slopes repose and I say get push Horridge

318
00:24:04,060 --> 00:24:08,170
in less than dash 0 3

319
00:24:11,350 --> 00:24:16,710
put in my password and that is pushed up to the online repo.

320
00:24:16,880 --> 00:24:18,070
And we are looking good.

321
00:24:18,080 --> 00:24:22,940
All right so and the next lesson we're going to continue working on the UI and hopefully we'll get to

322
00:24:22,940 --> 00:24:25,470
the log in view control right.

323
00:24:25,700 --> 00:24:28,350
So if you guys are having fun and I will see you in the next one.