1
00:00:07,980 --> 00:00:13,410
Everybody this is Caleb with Dev slopestyle and in this video we're going to write a function to one

2
00:00:13,410 --> 00:00:20,220
remove the spinner to add a progress label three remove a progress label and four we're going to add

3
00:00:20,250 --> 00:00:24,860
a UI collection view programmatically to our pull up view.

4
00:00:25,130 --> 00:00:26,380
It's going to be super cool.

5
00:00:26,430 --> 00:00:30,540
Let's pull open that X code project and let's get started.

6
00:00:30,540 --> 00:00:35,100
So in the last video we wrote a function that adds our spinner.

7
00:00:35,100 --> 00:00:37,250
Now we need to write a function to remove it.

8
00:00:37,260 --> 00:00:39,020
So to do that it's super easy.

9
00:00:39,120 --> 00:00:41,880
Go ahead and just type phunk moves spinner.

10
00:00:41,920 --> 00:00:44,620
That'll be the name of our function.

11
00:00:44,630 --> 00:00:45,290
All right.

12
00:00:45,360 --> 00:00:51,870
And what we're going to do is we're going to check to see if the spinner is not equal to nil meaning

13
00:00:51,870 --> 00:00:57,720
if there is a spinner call spinner remove from Super view.

14
00:00:57,720 --> 00:00:58,370
That's it.

15
00:00:58,560 --> 00:01:01,340
If there's a spinner that function will remove it.

16
00:01:01,380 --> 00:01:08,820
Now like I showed you in the last video when we pull open the simulator here if we double click we added

17
00:01:08,820 --> 00:01:10,820
like 50 spinners all at once.

18
00:01:10,830 --> 00:01:15,120
So I think as soon as this view shows if there's a spinner it should be removed.

19
00:01:15,120 --> 00:01:17,330
And then we should call add spinner after that.

20
00:01:17,330 --> 00:01:23,510
So right here in our drop pin function we remove the pins so we should also remove the spinner.

21
00:01:23,970 --> 00:01:28,220
Remembering that that only is going to remove the spinner if there is a spinner there.

22
00:01:28,360 --> 00:01:28,840
OK.

23
00:01:29,040 --> 00:01:31,170
So we'll we'll go back and check that in a second.

24
00:01:31,170 --> 00:01:34,130
But for now let's add that UI label.

25
00:01:34,260 --> 00:01:38,820
Remember it's called progress label so let's write the functions to add it and then remove it.

26
00:01:39,090 --> 00:01:43,780
So go ahead and type phunk add progress label.

27
00:01:44,310 --> 00:01:48,800
And in this function what we're going to do is we're going to instantiate progress label.

28
00:01:48,930 --> 00:01:55,140
If you remember from the last video up here we created a variable to hold this but we have not yet instantiated

29
00:01:55,140 --> 00:01:55,710
it.

30
00:01:55,740 --> 00:01:57,370
So here we're going to do that.

31
00:01:57,450 --> 00:01:59,710
Progress label equals UI label.

32
00:01:59,900 --> 00:02:00,410
OK.

33
00:02:00,630 --> 00:02:05,550
And we can just give it an empty instantiation because we're going to set it up exactly how we want

34
00:02:05,550 --> 00:02:05,670
it.

35
00:02:05,670 --> 00:02:09,490
So let's give it a frame so that we know how big we want it.

36
00:02:09,540 --> 00:02:16,470
Progress label frame and you know what let me put that more on the center that's easier to see for you.

37
00:02:16,470 --> 00:02:19,360
The frame needs to be of type C-g rect.

38
00:02:19,410 --> 00:02:24,980
And so if we give a parentheses here we're going to choose the one with an x y width and height value.

39
00:02:25,050 --> 00:02:29,970
Now for the X we want it to be in the center of the frame just like before.

40
00:02:29,970 --> 00:02:33,930
So let's go ahead and type screen size width divided by two.

41
00:02:34,050 --> 00:02:38,190
But remember that only is going to put the start of the label here.

42
00:02:38,220 --> 00:02:40,440
The rest of it will extend past the middle.

43
00:02:40,440 --> 00:02:46,080
So we actually need to subtract 50 percent of the label to pull it to be exactly in the center.

44
00:02:46,080 --> 00:02:48,820
Now we do not yet know what that will be.

45
00:02:48,840 --> 00:02:55,570
So let's go ahead and let's give it a with let's say maybe 200 points wide in order to get to the middle.

46
00:02:55,590 --> 00:03:01,110
We're going to encapsulate this in parentheses and then subtract 100 because that is half of the width

47
00:03:01,220 --> 00:03:07,140
k we have programmatically set a value so it's OK for us to use a programmatic value like that k the

48
00:03:07,140 --> 00:03:08,550
y value.

49
00:03:08,670 --> 00:03:15,020
We don't want it to quite be exactly in the center because remember our spinner is at 150.

50
00:03:15,120 --> 00:03:20,240
If we put 175 that will put it 25 below the spinner.

51
00:03:20,250 --> 00:03:25,260
Now you might think well it's a bigger number so why would it not be above it the way it works is actually

52
00:03:25,470 --> 00:03:30,600
when you're looking at a view the very tippy top is zero and the further down you go the numbers go

53
00:03:30,600 --> 00:03:31,020
up.

54
00:03:31,020 --> 00:03:36,660
So 175 is going to be 25 points below 150.

55
00:03:36,840 --> 00:03:38,010
So that's perfect.

56
00:03:38,010 --> 00:03:43,670
The height of course we can set it to just be 40 or so that'll fit just fine.

57
00:03:43,920 --> 00:03:47,070
So now we have a frame we've told it exactly where we want it to go.

58
00:03:47,190 --> 00:03:48,560
Now let's give it a font.

59
00:03:48,630 --> 00:03:54,420
So let's go ahead and type progress label dot font and that's going to be equal to UI font.

60
00:03:54,660 --> 00:03:58,990
And there's an option here to give it a name and a size that's exactly what we're going to do.

61
00:03:59,250 --> 00:04:03,030
We're going to set it to be of type wups Avenir.

62
00:04:03,240 --> 00:04:10,500
Next my favorite font and size 18 now a font is not much good if it doesn't have a color so you can

63
00:04:10,500 --> 00:04:11,670
see what color it is.

64
00:04:11,670 --> 00:04:16,680
So go ahead and type progress label dot color text color actually.

65
00:04:16,830 --> 00:04:23,880
And we're going to go ahead and set that to be a color literal and we are going to make it yet dark

66
00:04:23,880 --> 00:04:25,140
grey will be cool.

67
00:04:25,230 --> 00:04:26,350
That's perfect.

68
00:04:26,370 --> 00:04:31,820
And now we want our label to also be centered k not left aligned or right aligned.

69
00:04:31,920 --> 00:04:39,060
So when anti-progress label dot text alignment and there is actually an ina of an S text alignment just

70
00:04:39,060 --> 00:04:39,920
to center.

71
00:04:39,990 --> 00:04:41,060
Easy peasy.

72
00:04:41,220 --> 00:04:41,460
All right.

73
00:04:41,460 --> 00:04:46,580
Next up we're going to go ahead and add this to our pull up view as a sub view.

74
00:04:47,280 --> 00:04:51,870
Make sure you don't add it to the constraint because a constraint cannot have a sub view case so yeah

75
00:04:51,900 --> 00:04:52,500
that's it.

76
00:04:52,500 --> 00:04:58,450
Add the label and unwrap it because it now has been properly instantiated so it's safe to do that.

77
00:04:58,860 --> 00:05:00,060
And that's that.

78
00:05:00,090 --> 00:05:01,870
We've added a progress label.

79
00:05:01,980 --> 00:05:06,280
Let's go back down to drop pin and let's add that progress label here.

80
00:05:06,950 --> 00:05:12,670
But the same problem as before will happen we'll have 100 labels if we open the menu 100 times.

81
00:05:12,710 --> 00:05:18,050
So let's write a function to remove the progress label and it's basically the same exact thing as remove

82
00:05:18,080 --> 00:05:26,180
spinner so phunk remove progress label and in here we're going to check to see if the progress label

83
00:05:26,180 --> 00:05:30,890
is not nil if progress label is not equal to nil.

84
00:05:30,890 --> 00:05:33,360
We're going to go ahead and call a progress label.

85
00:05:33,380 --> 00:05:35,110
Remove from Super view.

86
00:05:35,420 --> 00:05:36,830
Easy peasy.

87
00:05:36,830 --> 00:05:41,440
And we're going to call that as soon as we open the menu and drop a pin.

88
00:05:41,490 --> 00:05:43,040
Remove progress label.

89
00:05:43,130 --> 00:05:46,310
So if there is one it will be removed and then a new one will be added.

90
00:05:46,310 --> 00:05:51,710
This is just a safe way to ensure that we don't have like 100 labels because nobody needs 100 labels.

91
00:05:51,770 --> 00:05:53,270
All right let's go ahead and build and run this.

92
00:05:53,280 --> 00:05:58,290
And then after that we're going to add our UI collection view which would be super cool.

93
00:05:58,490 --> 00:06:02,410
Really excited to get that working and showing images soon.

94
00:06:02,580 --> 00:06:04,150
So double tap.

95
00:06:04,760 --> 00:06:09,380
Oh you know what it would be helpful if we actually set some text for Labor because right now we can't

96
00:06:09,380 --> 00:06:15,390
see it but we can at least check to see if our spinner is getting removed.

97
00:06:15,920 --> 00:06:17,720
OK so if I click.

98
00:06:17,720 --> 00:06:22,670
Looks like there's a little stutter there that's where it's being removed and added good so it looks

99
00:06:22,670 --> 00:06:25,490
like there is only one no matter how many times I click.

100
00:06:25,490 --> 00:06:26,050
Very cool.

101
00:06:26,060 --> 00:06:30,740
Let's hide it lips and then open it again good.

102
00:06:30,750 --> 00:06:33,350
Yes so there's only one that's perfect.

103
00:06:33,480 --> 00:06:38,450
We're not going to leave this here but let's go ahead and just set some text.

104
00:06:39,060 --> 00:06:44,380
Text equals maybe 12 out of 40 photos.

105
00:06:44,380 --> 00:06:45,330
Load it.

106
00:06:45,750 --> 00:06:47,420
OK let's go ahead and build and run this.

107
00:06:47,420 --> 00:06:51,460
I just want to see if the label is in the right position if it's in the right spot.

108
00:06:51,510 --> 00:06:53,300
So I added some text for now.

109
00:06:54,390 --> 00:06:54,680
All right.

110
00:06:54,690 --> 00:06:55,050
Awesome.

111
00:06:55,050 --> 00:07:05,160
That looks great but it seems like perhaps our label is cutting off some of the words and so that's

112
00:07:05,160 --> 00:07:06,310
not what we want.

113
00:07:06,330 --> 00:07:12,480
Let's let's maybe give it a little bit bigger with maybe 240 and that means we have to change this number

114
00:07:12,480 --> 00:07:14,620
to 120 which is half.

115
00:07:14,700 --> 00:07:17,410
Let's try to again build and run.

116
00:07:18,210 --> 00:07:22,830
And a lot of app building is doing this kind of trouble shooting and fixing these little teeny tiny

117
00:07:22,830 --> 00:07:23,150
issues.

118
00:07:23,160 --> 00:07:23,770
OK.

119
00:07:24,300 --> 00:07:24,750
There we go.

120
00:07:24,750 --> 00:07:25,500
Awesome.

121
00:07:25,590 --> 00:07:27,810
12 out of 40 photos loaded.

122
00:07:27,930 --> 00:07:32,460
And we're going to set this later so that it can update as soon as the photos are going in.

123
00:07:32,460 --> 00:07:33,380
Very cool.

124
00:07:33,420 --> 00:07:36,450
Get rid of that which was our setting of text.

125
00:07:36,450 --> 00:07:37,360
We don't need it.

126
00:07:37,620 --> 00:07:41,820
And now what we're going to do is add a UI collection view programmatically.

127
00:07:41,820 --> 00:07:44,870
And then we're going to add it as a sub view of pull view.

128
00:07:44,910 --> 00:07:45,440
OK.

129
00:07:45,600 --> 00:07:52,650
So scroll up to the top and beneath this right here beneath progress label we're going to create a collection

130
00:07:52,650 --> 00:07:52,950
view.

131
00:07:52,950 --> 00:07:53,790
So go ahead and type.

132
00:07:53,790 --> 00:08:01,230
Var collection view of Type II collection view and give a little question mark there because we are

133
00:08:01,230 --> 00:08:03,330
not yet instantiating that.

134
00:08:03,480 --> 00:08:11,070
Now something you need to know when you do this programmatically you need to give a programmatic collection

135
00:08:11,070 --> 00:08:14,430
view flow layout as well and I'll show you what that is in just a minute.

136
00:08:14,430 --> 00:08:21,060
So let's do that by just typing var flow layout equals UI collection.

137
00:08:21,060 --> 00:08:26,750
View flow layout we can instantiate it because we're not actually going to use it.

138
00:08:26,970 --> 00:08:27,720
It's empty.

139
00:08:27,720 --> 00:08:30,320
We're not going to set any special features of it or anything.

140
00:08:30,330 --> 00:08:34,560
But in order to create a collection view programmatically you need one.

141
00:08:34,560 --> 00:08:36,900
So we're going to use just flow layout from here.

142
00:08:36,910 --> 00:08:38,540
OK that's totally fine.

143
00:08:38,970 --> 00:08:45,360
So now we need to set up all of the features of the collection view we need to register a cell for it

144
00:08:45,360 --> 00:08:46,120
to use.

145
00:08:46,290 --> 00:08:52,040
And we also are going to need to add it as a sub view of our pull up view.

146
00:08:52,050 --> 00:08:59,010
So let's do that by instantiating it type collection view equals UI collection view.

147
00:08:59,280 --> 00:09:04,800
And when you put a parentheses you can see that it requires a collection view layout.

148
00:09:04,800 --> 00:09:08,490
Now we can give it just a frame but you have to set the flow layout later.

149
00:09:08,490 --> 00:09:12,860
So let's just go ahead and call the one that we can pass in here.

150
00:09:12,900 --> 00:09:19,590
Now the frame is going to be just the view bounds OK it's going to be as big as the view and the flow

151
00:09:19,590 --> 00:09:19,940
layout.

152
00:09:19,950 --> 00:09:21,870
We're just going to pass in flow layout.

153
00:09:22,050 --> 00:09:25,710
Again we're not really going to use it but that's fine.

154
00:09:25,710 --> 00:09:31,230
So now that it is instantiated we need to register a cell for it to use.

155
00:09:31,230 --> 00:09:39,350
So go ahead and type collection view that register cell class and we don't yet have a cell class for

156
00:09:39,350 --> 00:09:46,710
it to use so we need to create one in the view folder right click new file Cocco touch class and this

157
00:09:46,710 --> 00:09:49,120
is going to be of tight UI collection.

158
00:09:49,290 --> 00:09:50,920
View cell.

159
00:09:51,270 --> 00:09:55,590
We'll just call this photocell because it will be used for displaying photos.

160
00:09:55,960 --> 00:09:59,600
Ok tap next tap create.

161
00:09:59,940 --> 00:10:00,390
And great.

162
00:10:00,390 --> 00:10:06,210
Now we have a photocell and in order to use this photocell we're actually going to need to override

163
00:10:06,710 --> 00:10:09,360
whip's the initializer of the frame.

164
00:10:09,630 --> 00:10:15,400
Then we need to call super dot in it and pass it the frame from the initializer.

165
00:10:15,700 --> 00:10:15,900
OK.

166
00:10:15,900 --> 00:10:20,040
Now it's also going to ask us to use the required in it.

167
00:10:20,370 --> 00:10:31,950
And we're going to basically just call fatal error with message and the message is wups init coder has

168
00:10:31,950 --> 00:10:34,690
not been implemented.

169
00:10:35,670 --> 00:10:41,340
OK so these are what are required to use a custom UI collection to sell.

170
00:10:41,520 --> 00:10:43,490
And we're going to use this now.

171
00:10:43,530 --> 00:10:51,810
So go back to map the sea and the cell class we're going to use photo whoopsies photo cell and in order

172
00:10:51,810 --> 00:10:58,700
to use this as a class we need to call photo cell not self and that lets us use it as a class object.

173
00:10:58,710 --> 00:11:05,100
Now the identifier we're just going to use photocell as a string and this is going to allow us to dequeue

174
00:11:05,100 --> 00:11:07,330
this cell later in our collection view.

175
00:11:08,000 --> 00:11:11,640
So now we have a cell register that we can use.

176
00:11:11,640 --> 00:11:14,910
And you know what interface builder handles lots of this for you already.

177
00:11:15,060 --> 00:11:17,970
But I wanted to show you how to do it programmatically.

178
00:11:17,970 --> 00:11:20,850
So next up we need to actually give it a delegate.

179
00:11:20,880 --> 00:11:27,390
Just like always that's going to be self and collection view data source just like using a collection

180
00:11:27,390 --> 00:11:30,140
view any other time is also going to be self.

181
00:11:30,330 --> 00:11:35,460
Ok but you'll notice if I try to build this it's going to give me some issues because we have not yet

182
00:11:35,460 --> 00:11:42,010
conformed to the proper delegates so scroll down and at the very bottom we're going to write an extension.

183
00:11:42,270 --> 00:11:44,320
Let's get some more space here.

184
00:11:44,820 --> 00:11:46,080
Right in the center.

185
00:11:46,080 --> 00:11:52,850
And let's go call extension Matt the C a collection view.

186
00:11:54,390 --> 00:12:00,530
Delegate comma UI collection view data source.

187
00:12:00,840 --> 00:12:01,900
OK.

188
00:12:02,100 --> 00:12:07,200
And inside of this there are three required functions that you probably know if you use collection to

189
00:12:07,200 --> 00:12:10,110
use it all cell for item index path.

190
00:12:10,110 --> 00:12:21,540
OK that's one I like to put that at the bottom number of sections in collection view and number of items

191
00:12:21,540 --> 00:12:22,420
in section.

192
00:12:22,690 --> 00:12:23,000
OK.

193
00:12:23,040 --> 00:12:25,840
There's three number of sections in collection view.

194
00:12:25,920 --> 00:12:33,270
Number of items in Section and sell for item at index path K number of sections we can just return one

195
00:12:33,490 --> 00:12:37,930
case we just need one section number of items in section later.

196
00:12:37,950 --> 00:12:42,310
This will be coming from a number of items.

197
00:12:42,600 --> 00:12:49,440
Number of items in array will use an array later but for now we're just going return for just to give

198
00:12:49,440 --> 00:12:52,170
it a number and sell for item and index path.

199
00:12:52,170 --> 00:12:55,960
We're just going to return a collection view cell.

200
00:12:56,050 --> 00:12:58,330
OK a blank one.

201
00:12:58,340 --> 00:12:58,800
Very cool.

202
00:12:58,800 --> 00:13:07,650
So now we have properly inherited or sorry conformed to the proper delegates and now if I go back up

203
00:13:07,650 --> 00:13:09,420
here you'll notice that error is gone.

204
00:13:09,420 --> 00:13:12,690
The show is pink meaning that it is properly set.

205
00:13:12,900 --> 00:13:18,340
And last but not least we need to set this as a sub view of our pull up view.

206
00:13:18,480 --> 00:13:25,580
So go ahead and type pull up view add sub view and of course collection view.

207
00:13:25,740 --> 00:13:30,510
Unwrap it because we have properly set it up and instantiated it and you know what.

208
00:13:30,540 --> 00:13:32,770
Right now the default background color is white.

209
00:13:32,820 --> 00:13:37,080
So I think I'm going to set a custom color so we can tell if it actually showed up properly if it's

210
00:13:37,080 --> 00:13:37,820
there.

211
00:13:37,830 --> 00:13:47,060
So go ahead and type wups collection view background color and let's give it a color literal How about

212
00:13:47,060 --> 00:13:51,800
green and we'll remove that as soon as we can tell that it's in the proper place.

213
00:13:52,040 --> 00:13:53,650
But we should have a collection view.

214
00:13:53,660 --> 00:14:00,320
Now one thing I want to think about though is when I add the spinner and the progress label I add that

215
00:14:00,320 --> 00:14:07,440
as a sub view of progress label you know what I don't want that to be the case I don't want it to be

216
00:14:07,650 --> 00:14:10,820
pulled up view because the collection view is covering up all of those.

217
00:14:11,000 --> 00:14:12,980
I want these to be on top of the collection view.

218
00:14:12,980 --> 00:14:18,920
So instead of making these a sub view of pull up view I'm going to make them a sub view of the collection

219
00:14:18,920 --> 00:14:19,650
view.

220
00:14:19,730 --> 00:14:24,670
Now the label is the same as the spinner in that it needs to be on the collection view.

221
00:14:24,680 --> 00:14:26,820
So change that collection view.

222
00:14:27,110 --> 00:14:31,520
And now when we build and run we should have some errors of course.

223
00:14:31,520 --> 00:14:33,300
What is the deal.

224
00:14:33,710 --> 00:14:37,370
We didn't put a question mark there showing that it is optional.

225
00:14:37,640 --> 00:14:40,300
That's just the way that ex-coach forces us to be safe.

226
00:14:40,430 --> 00:14:41,900
Boring anyway.

227
00:14:41,900 --> 00:14:43,220
No it's actually a really good thing.

228
00:14:43,400 --> 00:14:46,250
So let's go see if the collection view shows up.

229
00:14:46,250 --> 00:14:47,690
It should be green.

230
00:14:47,840 --> 00:14:49,720
And of course look at that.

231
00:14:49,970 --> 00:14:57,130
We get an error the cell returned from collection view sell for item at index path does not have a reuse

232
00:14:57,140 --> 00:15:01,780
identifier cells must be retrieved by calling dequeue reusable cell identifier.

233
00:15:02,090 --> 00:15:02,580
OK.

234
00:15:02,720 --> 00:15:10,120
So there is a problem we forgot to do something we just sent a blank collection view cell.

235
00:15:10,190 --> 00:15:12,190
We need to actually do something different.

236
00:15:12,230 --> 00:15:17,910
Let's go ahead and create a cell by typing let cell equals collection view.

237
00:15:18,020 --> 00:15:26,650
Dequeue reusable cell with identifier which of course if you remember was photo cell for index path.

238
00:15:26,900 --> 00:15:27,700
OK.

239
00:15:28,190 --> 00:15:31,030
And we're going to cast that as a photocell.

240
00:15:31,550 --> 00:15:32,180
OK.

241
00:15:32,450 --> 00:15:39,350
Now we don't need to initialize anything yet but we do need to return that cell.

242
00:15:39,380 --> 00:15:39,950
Let's see.

243
00:15:39,970 --> 00:15:44,490
Oh and we're going to force on wrap it because it's optionally cast as a photocell.

244
00:15:44,750 --> 00:15:46,000
Go ahead and build and run.

245
00:15:46,280 --> 00:15:52,160
And now when we build this it should properly be able to utilize the cell that it created with the identifier.

246
00:15:52,160 --> 00:15:57,170
That's why it's there let's try it by double click beautiful.

247
00:15:57,170 --> 00:16:01,220
We get a collection view remember we set the background to be green.

248
00:16:01,220 --> 00:16:05,800
The text is not showing up because we removed the text property but that's fine.

249
00:16:05,810 --> 00:16:06,860
We know it's there.

250
00:16:06,920 --> 00:16:08,690
So it looks like this is working.

251
00:16:08,690 --> 00:16:14,930
We have properly added a collection view a label a spinner and we've also set when they should be removed

252
00:16:14,930 --> 00:16:17,440
and added at will that's amazing.

253
00:16:17,450 --> 00:16:18,920
Super super good.

254
00:16:19,010 --> 00:16:22,050
In the next video we're going to start using the flicker API.

255
00:16:22,070 --> 00:16:23,720
We're going to get our API key.

256
00:16:23,750 --> 00:16:29,090
We're going to go ahead and see how the API you are Ellas formatted and we're going to create a swift

257
00:16:29,090 --> 00:16:34,040
file that will enable us to properly download photos from the u r l.

258
00:16:34,070 --> 00:16:35,360
Very very cool.

259
00:16:35,360 --> 00:16:37,120
So awesome job with this video.

260
00:16:37,250 --> 00:16:41,600
And we'll head over to the next video now and let's get started on accessing the flicker API.