1
00:00:07,120 --> 00:00:12,320
Stuff ladies and gentlemen welcome back Johnny be here with Devis Lois dot com.

2
00:00:12,400 --> 00:00:18,520
And then this lesson we are going to take a break from the API for just a little bit and work on our

3
00:00:18,520 --> 00:00:19,930
UI a little bit more.

4
00:00:19,930 --> 00:00:20,490
All right.

5
00:00:20,710 --> 00:00:27,970
So right now we can open up and go into loggin go to her don't have an account but if you click on this

6
00:00:28,150 --> 00:00:36,040
doesn't do anything we want to be able to pick our avatar image or so we want and end up with is when

7
00:00:36,040 --> 00:00:43,060
we're here and we click on our Choose Avatar we want to jump over into this view where we have a collection

8
00:00:43,060 --> 00:00:47,500
view of a whole bunch of different cute little avatar images.

9
00:00:48,160 --> 00:00:59,290
And speaking of this is the I got these assets off of the Noun Project and so to give attribution where

10
00:00:59,290 --> 00:01:05,070
attribution is do these are the artists that created these awesome assets.

11
00:01:05,080 --> 00:01:05,550
OK.

12
00:01:05,770 --> 00:01:12,740
So you can find each of these at the back from these authors here at the Noun Project dot com.

13
00:01:12,760 --> 00:01:13,560
OK.

14
00:01:14,080 --> 00:01:16,410
All right so what do we what do we need to do.

15
00:01:16,420 --> 00:01:22,870
We need to create a view controller with a segmented control that will toggle between kind of the dark

16
00:01:22,870 --> 00:01:26,430
and light themed avatars.

17
00:01:26,440 --> 00:01:30,290
We've got a backbone and that's pretty much it shouldn't be.

18
00:01:30,300 --> 00:01:31,690
Shouldn't be too hard.

19
00:01:31,930 --> 00:01:37,750
But let's let's get cracking and we're going to see if we can get through all of this in just this one

20
00:01:37,750 --> 00:01:38,410
video OK.

21
00:01:38,440 --> 00:01:42,640
So without me Jever on any further let's get going.

22
00:01:42,640 --> 00:01:46,020
All right so first off let's jump in to storyboard.

23
00:01:47,740 --> 00:01:50,870
We're going to need a new controller.

24
00:01:51,070 --> 00:01:54,020
So I'm going to zoom out a little bit here.

25
00:01:54,370 --> 00:01:58,700
Scroll over and drop in a new View Controller Ken.

26
00:01:58,950 --> 00:02:01,300
Let's go ahead and add our segue right away.

27
00:02:01,300 --> 00:02:08,120
So when a control jet can create a counter Visi to our new avatar picture visi.

28
00:02:08,290 --> 00:02:15,250
And I'm going to look the Segway and come over to our Actually inspector and give it an identifier right

29
00:02:15,330 --> 00:02:18,760
to call this to create the account.

30
00:02:19,300 --> 00:02:26,130
And just like we've been doing with our other segues my copyright and jump into our Constans file and

31
00:02:26,140 --> 00:02:27,770
I'm going to add a segue.

32
00:02:27,760 --> 00:02:39,680
Constance I want to say let two Avatar pick her equal to and then when I paste in what I copied in there

33
00:02:39,700 --> 00:02:43,760
that I say to create count that's not what I wanted.

34
00:02:43,810 --> 00:02:46,190
Back to storyboard not to create a count.

35
00:02:46,250 --> 00:02:49,130
We called it too.

36
00:02:49,230 --> 00:02:52,640
I meant to Avatar picture.

37
00:02:52,780 --> 00:02:55,040
I've been working on that create account Visi for too long.

38
00:02:55,040 --> 00:02:55,430
All right.

39
00:02:55,510 --> 00:02:57,430
Avatar Pickert going to copy that.

40
00:02:57,490 --> 00:02:59,700
Jump over to Constance.

41
00:02:59,700 --> 00:03:00,550
There we go.

42
00:03:00,560 --> 00:03:01,100
We are.

43
00:03:01,240 --> 00:03:01,510
All right.

44
00:03:01,530 --> 00:03:02,690
Got to say that.

45
00:03:02,920 --> 00:03:12,100
And let's jump back over to our story board and actually let's open up our assistant editor with our

46
00:03:12,100 --> 00:03:19,690
create a count VC selected in the summer I do mean that one because we're going to add the the action

47
00:03:19,690 --> 00:03:20,010
forward.

48
00:03:20,020 --> 00:03:27,830
If we don't already have it see if we have it and create a count b c m c here.

49
00:03:28,270 --> 00:03:29,450
Hey we do already have it.

50
00:03:29,470 --> 00:03:30,670
I remember adding that now.

51
00:03:30,700 --> 00:03:30,960
OK.

52
00:03:30,970 --> 00:03:32,910
So creative count visi.

53
00:03:33,440 --> 00:03:34,740
Well we're going to do here.

54
00:03:34,900 --> 00:03:36,120
Pick Avatar press.

55
00:03:36,130 --> 00:03:37,300
OK good.

56
00:03:37,300 --> 00:03:44,530
So we were going to say perform Segway and it looks like my autocomplete is on the fritz.

57
00:03:44,530 --> 00:03:48,450
I'm going to clean it holding Shift command OK.

58
00:03:48,620 --> 00:03:49,640
I succeeded.

59
00:03:49,660 --> 00:03:58,540
And as they perform there we go perform Segway with identifier and this identifier is to have a tar

60
00:03:59,110 --> 00:03:59,550
picker.

61
00:03:59,560 --> 00:04:01,600
Sender is new.

62
00:04:01,950 --> 00:04:02,340
OK.

63
00:04:02,380 --> 00:04:05,220
So when I say that and all right.

64
00:04:05,220 --> 00:04:06,990
Now let's jump back into storyboard.

65
00:04:07,300 --> 00:04:16,210
So now when we click on that button we are going to get sent on over to this empty view controller and

66
00:04:16,300 --> 00:04:18,650
let's go ahead and start adding some stuff that we need.

67
00:04:18,670 --> 00:04:25,720
We're going to button in the top left that is going to take us back to this view right here.

68
00:04:25,960 --> 00:04:33,190
And so we're going to go ahead and get rid of its title and change its image to this one is going to

69
00:04:33,190 --> 00:04:37,170
be called smack back right there.

70
00:04:37,230 --> 00:04:41,320
That puts you right there and constrain you.

71
00:04:41,380 --> 00:04:50,640
It's going to be eight from the top with margins checked and with the height had four constraints.

72
00:04:50,650 --> 00:04:55,500
They're going to need a cig mounted control right here.

73
00:04:55,900 --> 00:05:01,780
And the first thing I'm going to do is get rid of that awful Bluett and I really can't stand it.

74
00:05:01,810 --> 00:05:02,870
OK right here tent.

75
00:05:02,980 --> 00:05:05,110
Let's give it our nice blue color.

76
00:05:05,110 --> 00:05:06,480
There we go.

77
00:05:06,490 --> 00:05:09,790
All right and then we're going to change its titles right here.

78
00:05:09,910 --> 00:05:10,710
Segment zero.

79
00:05:10,720 --> 00:05:18,910
First the title is dark is going to be our default then change it to segment 1 and change that to the

80
00:05:18,940 --> 00:05:20,070
light.

81
00:05:20,500 --> 00:05:21,800
And that looks great.

82
00:05:22,030 --> 00:05:27,970
All right going to constrain this and we're going to go eight from the top with margin's checked and

83
00:05:28,020 --> 00:05:34,320
our with we're going to get to one hundred and sixty and we are going to send two of that horizontally

84
00:05:34,330 --> 00:05:35,530
in container.

85
00:05:35,920 --> 00:05:37,090
Wonderful.

86
00:05:37,090 --> 00:05:37,370
All right.

87
00:05:37,390 --> 00:05:41,040
Now let's go ahead and add in a collection view.

88
00:05:41,290 --> 00:05:51,070
And so here in our library just search for collection view and just drop that in and go ahead and let's

89
00:05:51,100 --> 00:05:59,350
give this some constraints of 20 from the top zero from the left zero from the right and zero from the

90
00:05:59,440 --> 00:06:00,300
bottom.

91
00:06:00,610 --> 00:06:02,830
Add those four constraints.

92
00:06:02,830 --> 00:06:06,070
See here then here to see where is that.

93
00:06:06,070 --> 00:06:14,790
Here in the site's inspector you said the cell size to 100 and 100 just for starters.

94
00:06:19,730 --> 00:06:27,560
And then let's go ahead and add an image view to our prototype cell right here.

95
00:06:27,590 --> 00:06:29,140
Of course it's huge.

96
00:06:29,180 --> 00:06:35,030
So we're going to resize it just a little bit and then we'll go ahead and give it its constraints.

97
00:06:35,030 --> 00:06:43,210
So this is going to be without constrained to margins checked so unchecked what 10 10 10 and 10.

98
00:06:43,220 --> 00:06:43,490
All right.

99
00:06:43,490 --> 00:06:44,740
Wonderful.

100
00:06:45,110 --> 00:06:50,290
And that is pretty much all of the UI that we are going to require here in this.

101
00:06:50,390 --> 00:06:51,510
You control it.

102
00:06:51,860 --> 00:06:55,370
A couple of things we're going to do on the collection of you though make sure you've got your collection

103
00:06:55,370 --> 00:06:56,690
view selected.

104
00:06:56,690 --> 00:06:58,350
We are going to give it some section instead.

105
00:06:58,360 --> 00:07:02,060
So that's just some padding on the left and right.

106
00:07:02,060 --> 00:07:06,500
We're going to give it padding of 20 on the left and right right there.

107
00:07:06,890 --> 00:07:07,160
All right.

108
00:07:07,160 --> 00:07:07,930
Wonderful.

109
00:07:08,180 --> 00:07:09,540
I'm going to save that.

110
00:07:09,750 --> 00:07:15,740
And you know let's go ahead and create our view controller file that it's going to be hooked up to this

111
00:07:15,740 --> 00:07:16,370
view right here.

112
00:07:16,370 --> 00:07:24,970
So over here in controller and right click and say new file is going to be Cocco touch class subclass

113
00:07:25,040 --> 00:07:26,600
you view controller.

114
00:07:26,620 --> 00:07:30,960
And call this avatar picture visi.

115
00:07:31,130 --> 00:07:31,650
Right.

116
00:07:32,060 --> 00:07:43,570
And press next and create We're going to clean up this stuff that we don't use this account or comment.

117
00:07:44,020 --> 00:07:48,880
And then I'm going to hold the option and click on Main storyboards so that we can add our Iby outlets.

118
00:07:50,480 --> 00:07:56,790
It's school over Hugh Grant closes right Pennel give us a little bit more room and where you're going

119
00:07:56,790 --> 00:07:59,410
to need an action for this back button.

120
00:07:59,520 --> 00:08:03,260
Forgot to set the class for for this view controllers.

121
00:08:03,300 --> 00:08:10,480
We do need this right panel back over to our identity inspector for the class select avatar picture

122
00:08:10,500 --> 00:08:11,510
VC.

123
00:08:11,890 --> 00:08:13,090
OK good.

124
00:08:13,120 --> 00:08:19,120
Now I can control drag over here and I can say back pressed.

125
00:08:19,240 --> 00:08:24,290
And this is going to be an action and a touch up inside is good.

126
00:08:24,570 --> 00:08:29,440
And while we're just here I'm going to write right off the bat I say not perform it.

127
00:08:29,450 --> 00:08:32,920
This is going to be dismiss.

128
00:08:33,090 --> 00:08:36,420
Animated is true and the completion is new.

129
00:08:36,570 --> 00:08:39,260
All right so that takes care of the back button.

130
00:08:39,270 --> 00:08:43,190
Now we're going to need a an outlet for the collection view.

131
00:08:43,500 --> 00:08:47,120
So here we are right out.

132
00:08:47,440 --> 00:08:56,040
Let's get a control drag from the collection view over to our bigger b c and this is going to be an.

133
00:08:56,060 --> 00:08:59,090
I'm just going to call this collection view.

134
00:09:00,160 --> 00:09:08,080
I'm going to say connect and then I'm going to grab the segmented control and get an outlet here.

135
00:09:08,730 --> 00:09:14,420
And this is there is going to call this segment control and that's an outlet.

136
00:09:14,490 --> 00:09:16,070
And when you connect.

137
00:09:16,570 --> 00:09:16,820
OK.

138
00:09:16,830 --> 00:09:24,630
Now remember when we clicked on this we want to go back and forth between the dark and the light Avatar

139
00:09:24,660 --> 00:09:25,370
images.

140
00:09:25,390 --> 00:09:29,040
So we're also going to need an IP action for the segment to control.

141
00:09:29,040 --> 00:09:31,270
So again control dragging.

142
00:09:31,290 --> 00:09:34,620
We're going to make an action and the event.

143
00:09:34,740 --> 00:09:37,870
There's a few here but the event that we want is the value changed.

144
00:09:37,980 --> 00:09:44,580
So whenever we click on a different one then than what is selected in the segment to control this function

145
00:09:44,590 --> 00:09:46,410
is going to be called a value changed.

146
00:09:46,560 --> 00:09:52,030
All right and we're going to name this segment control changed.

147
00:09:52,070 --> 00:09:52,660
All right.

148
00:09:52,970 --> 00:09:54,440
Looks good.

149
00:09:55,260 --> 00:10:00,440
All right jump back closing our assistant editor now we're just here in our avatar picture visi.

150
00:10:00,690 --> 00:10:02,750
What do we need next quiz.

151
00:10:03,060 --> 00:10:08,370
We need to be able to work with collection views so we need to implement our protocols.

152
00:10:08,370 --> 00:10:08,970
That's right.

153
00:10:09,210 --> 00:10:20,130
So it's going to take us a collection view delegate UI collection view a data source and a little tip

154
00:10:20,130 --> 00:10:24,510
you don't actually need to type out the entire thing and doesn't need to be in the order.

155
00:10:24,510 --> 00:10:24,930
Watch this.

156
00:10:24,930 --> 00:10:28,680
I'm going to write you a collection then I'm going to write flow.

157
00:10:29,040 --> 00:10:33,740
And there we go you clicking view delegate flow layout instead of having to type out that whole thing

158
00:10:33,750 --> 00:10:36,160
you're able to just get that pop right up.

159
00:10:36,180 --> 00:10:36,870
All right there we go.

160
00:10:36,880 --> 00:10:43,520
So we have added our protocols now we need to set our delegate and data source.

161
00:10:43,640 --> 00:10:49,930
So when I say collection the dot delegate is equal to self.

162
00:10:50,160 --> 00:10:55,470
So if we click on delegate this is just saying the description says the object that acts as the delegate

163
00:10:55,560 --> 00:11:00,540
of the collection view and the delegate is this you control.

164
00:11:00,540 --> 00:11:07,560
That's why we're setting it to self then we're going to say collection the data source is also self

165
00:11:08,490 --> 00:11:10,250
that's going to see this and build it.

166
00:11:10,270 --> 00:11:15,290
And we should get some errors because now that we have implemented our protocols we need to conform

167
00:11:15,290 --> 00:11:16,210
to them.

168
00:11:16,220 --> 00:11:18,640
So let's go ahead and do that.

169
00:11:18,920 --> 00:11:19,440
We need.

170
00:11:19,490 --> 00:11:26,960
So for item at sulfur item and you that's the one we want and just for now we're going to see a return

171
00:11:27,010 --> 00:11:29,900
AUI collection.

172
00:11:30,040 --> 00:11:33,190
So looks good.

173
00:11:33,290 --> 00:11:38,300
Next step we need to know how many sections we house are and say number of sections in a only have one

174
00:11:38,300 --> 00:11:45,970
section so we're going to return one and then we're you need to know how many items are in the sections

175
00:11:45,970 --> 00:11:54,860
or in a number of items in section and if we pop over to our assets we see that we have numbered 0 through

176
00:11:54,860 --> 00:11:56,170
27.

177
00:11:56,180 --> 00:12:02,970
So we have in total 28 so return 28 items.

178
00:12:03,060 --> 00:12:05,840
All right let's go ahead and build that and see how that looks.

179
00:12:05,850 --> 00:12:10,610
All right so the build was successful but we've probably even run this.

180
00:12:10,920 --> 00:12:16,120
And if I come over here come over here and have an account click on it.

181
00:12:17,090 --> 00:12:19,950
We got a crash and see what happened.

182
00:12:22,070 --> 00:12:26,390
So for item does not have a reuse identifier cells must be retrieved by calling.

183
00:12:26,390 --> 00:12:26,650
OK.

184
00:12:26,750 --> 00:12:33,050
So you get to do a couple of things here in our self or item at thingamajigs So what we're going to

185
00:12:33,050 --> 00:12:37,690
do is we need to create a custom class for our cell.

186
00:12:37,760 --> 00:12:39,280
So let's go ahead and do that right now.

187
00:12:39,380 --> 00:12:45,830
So it's a view and I'm going to see a new file and it is going to be a cook touch class and it's going

188
00:12:45,830 --> 00:12:53,050
to be of subclass UI collection that you sell.

189
00:12:53,080 --> 00:12:55,420
And this can be called Avatar.

190
00:12:55,570 --> 00:13:05,510
So right to say next I see now we have our custom class for the avatar so let's go ahead and open up

191
00:13:05,510 --> 00:13:12,740
our main story board and the assistant editor and we're going to set our prototype so here equal to

192
00:13:12,740 --> 00:13:19,120
this new avatar cell class with the collection view I have been selected here we're going to go to its

193
00:13:19,130 --> 00:13:21,840
class and say Avatar.

194
00:13:21,910 --> 00:13:22,670
So.

195
00:13:23,010 --> 00:13:30,110
So now with that done we can select our image in here and we can drag over and create an outlet here

196
00:13:30,110 --> 00:13:31,600
in our avatar cell class.

197
00:13:31,760 --> 00:13:36,490
And here we can see Avatar image can connect that.

198
00:13:36,530 --> 00:13:39,590
And that's pretty much all of the connections that we need.

199
00:13:39,590 --> 00:13:41,400
It's a pretty simple cell.

200
00:13:41,630 --> 00:13:43,160
So we're going to come back here.

201
00:13:43,490 --> 00:13:51,330
And let's go ahead and actually set up our our view and our functions are going to be creating as well.

202
00:13:51,590 --> 00:14:00,650
So first I'm going to stay awake from NIB so to the placeholder if you click on Awake from nib it says

203
00:14:00,650 --> 00:14:05,990
it prepares the receiver for a service that service after it has been loaded from an Interface Builder

204
00:14:06,020 --> 00:14:08,180
archive or nib file.

205
00:14:08,190 --> 00:14:13,440
Right so this is the first thing that's called when it wakes up from being a NIB.

206
00:14:13,490 --> 00:14:13,710
All right.

207
00:14:13,710 --> 00:14:21,230
And so we are going to say he also says let's see here I just wanted to show you this other thing says

208
00:14:21,230 --> 00:14:26,960
you must call the super implementation awake from nib to the parent class the opportunity to perform

209
00:14:26,960 --> 00:14:29,440
any additional initialization they require.

210
00:14:29,690 --> 00:14:33,680
All right so we're going to say super dot awake from NIB.

211
00:14:33,680 --> 00:14:34,820
There you go.

212
00:14:35,050 --> 00:14:40,250
Right and then we're going to create a function here call the set up view.

213
00:14:40,730 --> 00:14:41,440
OK.

214
00:14:41,840 --> 00:14:51,450
And we look at our design mockups it looks like our cells have a background gray and rounded corners

215
00:14:51,470 --> 00:14:51,890
OK.

216
00:14:51,940 --> 00:14:55,040
So let's go ahead and add that here.

217
00:14:55,200 --> 00:15:08,370
So we're in a soft layer that back ground color is equal to eye color dot light gray Siggi color.

218
00:15:08,690 --> 00:15:10,150
And I'm going to say that

219
00:15:12,990 --> 00:15:18,600
there that corner radius equal to 10.

220
00:15:19,040 --> 00:15:26,170
And then when you say self that clips to Bounds is equal to true.

221
00:15:26,270 --> 00:15:36,270
And that would just make sure that the view doesn't spill outside of the corner radius corners there.

222
00:15:36,520 --> 00:15:36,800
OK.

223
00:15:36,790 --> 00:15:45,150
So go ahead and say this and let's jump in to our main story board and we need to add a reuse identifier

224
00:15:45,160 --> 00:15:47,570
that was one of the reasons for the crash.

225
00:15:47,910 --> 00:15:57,160
So our avatars so see here here in the recent specter under identifier we need to say give this reuse

226
00:15:57,160 --> 00:15:59,540
identifies or when to see Avatar.

227
00:15:59,980 --> 00:16:07,370
So that's our reuse identifiers want to copy that and jump over to our avatar picker visi.

228
00:16:08,290 --> 00:16:18,270
And here in our cell for item at function I'm going to say if let cell is equal to collection

229
00:16:20,800 --> 00:16:33,140
the U dot D Q reusable cell with reuse identifier and our reuse identifier is what's needed I copy that.

230
00:16:33,150 --> 00:16:35,480
Yeah Avatar's cell 4.

231
00:16:35,630 --> 00:16:41,350
And that's just index path curly brace.

232
00:16:41,530 --> 00:16:50,410
So if we are able to get a sale deed qued and the reuse identifier for it is Avatar's sell then we are

233
00:16:50,410 --> 00:17:01,180
going to let's just return that step and we need to cast this though we need to say as Avatar so else

234
00:17:02,020 --> 00:17:09,650
we're just going to return an empty habitat or come on out to compete.

235
00:17:09,850 --> 00:17:10,690
So there you go.

236
00:17:11,990 --> 00:17:14,730
So it's going save that and run it and see how that looks.

237
00:17:14,860 --> 00:17:19,440
Well we should see is just a whole bunch of rounded gray squares.

238
00:17:19,760 --> 00:17:24,500
And click here can log in don't have an account.

239
00:17:24,730 --> 00:17:26,090
Click here.

240
00:17:26,350 --> 00:17:29,320
And you know what I think I forgot to do.

241
00:17:29,320 --> 00:17:30,310
Silly me.

242
00:17:30,310 --> 00:17:36,520
Here in the amateur cell indeed we did not say did not put the function we call the function that we

243
00:17:36,520 --> 00:17:36,940
created.

244
00:17:36,940 --> 00:17:39,140
Try that one more time run.

245
00:17:39,330 --> 00:17:44,720
I'm going log in I don't have an account choose after.

246
00:17:44,800 --> 00:17:45,070
All right.

247
00:17:45,070 --> 00:17:46,700
There we go.

248
00:17:47,100 --> 00:17:47,630
Yeah right.

249
00:17:47,630 --> 00:17:51,560
So we're making progress.

250
00:17:51,760 --> 00:17:55,080
You know how far how long we've been going over 20 minutes.

251
00:17:55,240 --> 00:17:57,220
Let's go ahead and stop this.

252
00:17:57,220 --> 00:17:59,130
This is a pretty good stopping point.

253
00:17:59,130 --> 00:18:03,850
We got our collection views set up.

254
00:18:03,850 --> 00:18:05,590
And the next one is the rule.

255
00:18:05,600 --> 00:18:13,240
Just go ahead and finish up the rest of the logic to show the specific and the correct Avatar images

256
00:18:13,240 --> 00:18:14,810
here will get to two.

257
00:18:14,810 --> 00:18:22,390
Or you can click on them and set that as the user's avatar image and maybe even will start working on

258
00:18:22,390 --> 00:18:24,220
the background color.

259
00:18:24,220 --> 00:18:27,210
All right so making some good progress here.

260
00:18:27,370 --> 00:18:29,320
I hope you guys are having fun.

261
00:18:29,320 --> 00:18:36,050
I'm going to before we finish up I'm going to go ahead and commit and see if our changes here.

262
00:18:36,130 --> 00:18:45,250
So when you say get status to get and Dr. get to commit Desch am.

263
00:18:45,380 --> 00:18:48,460
This is lesson 13.

264
00:18:50,360 --> 00:18:54,230
And with that I will see you guys all in the next one.