1
00:00:00,340 --> 00:00:05,990
Come back again in this lesson we'll work on Customs says in collection views.

2
00:00:06,110 --> 00:00:11,240
And even though they are very similar to the ones in table views I wanted to show you this because true

3
00:00:11,260 --> 00:00:16,120
all at this process I want to show you some other features of collection of yours as well.

4
00:00:16,140 --> 00:00:18,360
This time I won't be using a controller.

5
00:00:18,390 --> 00:00:20,740
I will be using a view itself.

6
00:00:20,740 --> 00:00:21,780
So let's go into X scope.

7
00:00:22,080 --> 00:00:24,510
And here I'm going to start a new application.

8
00:00:24,510 --> 00:00:25,350
I'm going to call it.

9
00:00:25,350 --> 00:00:34,820
Customs says in that cell Lilly's says in collection views and in here I'm going to head into my a storyboard.

10
00:00:34,860 --> 00:00:40,050
Unlike the last time that we deleted the view contorted to be made a collection view.

11
00:00:40,050 --> 00:00:42,050
This time I'm not going to do any of those things.

12
00:00:42,060 --> 00:00:45,880
I'm just gonna go in here and say I want a collection view.

13
00:00:45,990 --> 00:00:52,460
I'm going to add a new collection view just like how when we were adding a table views to view controllers.

14
00:00:52,590 --> 00:00:58,000
And yet when I place it somewhere and you probably want to set the constraints for it as well.

15
00:00:58,030 --> 00:01:04,680
I'm going to say at the missing constraints I'm going to make my bank on The View to be maybe a light

16
00:01:04,710 --> 00:01:09,140
gray so I can actually see the collection view more vividly.

17
00:01:09,150 --> 00:01:11,050
So this is my creation now.

18
00:01:11,260 --> 00:01:14,520
Now since I have it like that I have to make an outlet for it.

19
00:01:14,550 --> 00:01:22,560
So I'm going to go into my assistant window and in here I'm going to go ahead and say This is my collection

20
00:01:22,710 --> 00:01:23,190
view.

21
00:01:23,490 --> 00:01:25,670
So that part is taking care of.

22
00:01:25,840 --> 00:01:30,970
And the next thing that I wanted to do I wanted to have a custom class for this cell.

23
00:01:31,170 --> 00:01:36,440
So to do that then they come back in here and say I have a new file this new fight is going to be after

24
00:01:36,480 --> 00:01:44,760
type EU I collection view cell on what I call it my collection view is set

25
00:01:47,460 --> 00:01:54,180
so none of you have that flight I'm going to go ahead back into my storyboard and say this cell is actually

26
00:01:54,180 --> 00:02:01,440
using my collection you sell my collection of your cell as its class and now they're connected to each

27
00:02:01,440 --> 00:02:09,840
other so I can head into the assistant window load the right file which is going to be this one and

28
00:02:09,840 --> 00:02:17,340
say this cell is now going to have its different outlets introduced in here just like how we have done

29
00:02:17,340 --> 00:02:19,010
it in a table view.

30
00:02:19,080 --> 00:02:25,580
So for instance what I want to have is this I want to have an image of you V in my collection of your

31
00:02:25,580 --> 00:02:26,090
cell.

32
00:02:26,100 --> 00:02:33,620
So right in here I'm going to place it to be right on ten ten ten on ten.

33
00:02:33,630 --> 00:02:40,510
So somebody in the middle Exactly and I'm going to say this is going to be my I am G view.

34
00:02:40,530 --> 00:02:46,720
So it's the image view of the collection view settled and now that's taken care of.

35
00:02:46,740 --> 00:02:49,330
And the last thing I want to do is I want to see my collection.

36
00:02:49,330 --> 00:02:55,650
You send as an identifier identifier is cell I.D. so that part is taken care of.

37
00:02:56,130 --> 00:03:00,620
Let's head back into our view controller where we have to do a lot of things now.

38
00:03:00,780 --> 00:03:06,660
And the first thing we have to do is our view controller is conforming to you a view controller but

39
00:03:06,660 --> 00:03:16,800
you also need to conform to UI collection view delegate as well as the UI collection view collection

40
00:03:17,250 --> 00:03:24,990
view data source because now this view controller is both the delegation and the data source for my

41
00:03:25,050 --> 00:03:26,870
collection view which is this one.

42
00:03:27,180 --> 00:03:31,290
So let's go in here and say we need to add the tool methods in here.

43
00:03:31,470 --> 00:03:39,490
One of those methods is going to be the cell for item at source center for IDM art.

44
00:03:39,510 --> 00:03:42,360
So that's one of them the important one.

45
00:03:42,360 --> 00:03:51,630
And then the other one is going to be number of items number of items in the section.

46
00:03:51,660 --> 00:03:57,030
Of course we could use the other delegation and data source methods but these two are the ones we absolutely

47
00:03:57,030 --> 00:03:57,890
need them.

48
00:03:58,140 --> 00:04:04,260
And for this I'm going to go ahead and say the number of items on the number of the and the content

49
00:04:04,260 --> 00:04:12,000
of it has to be informed this time not by a static number rather by an actual array of images.

50
00:04:12,000 --> 00:04:16,790
So I have an array of images that you can use or you could just had your own array of images.

51
00:04:16,810 --> 00:04:18,170
There are six images in here.

52
00:04:18,180 --> 00:04:19,620
I'm going to add them all in here.

53
00:04:20,480 --> 00:04:28,250
So I have six images and I want to copy all of their names going here into the top of my view controller

54
00:04:28,260 --> 00:04:36,360
essentially I'm put all of them inside an array so I'm going to say let images array to be all of these

55
00:04:36,360 --> 00:04:40,320
guys and we help obviously close them properly.

56
00:04:40,320 --> 00:04:51,360
So they are known to be a string values of that and then this and then that and then that and then that.

57
00:04:51,360 --> 00:04:57,210
So I have an array with six images in it and I'm going to format it properly and then I'm going to say

58
00:04:57,210 --> 00:05:08,390
the number of items is the return my images array images array that count and then for the sell at roll

59
00:05:08,400 --> 00:05:10,540
we have to introduce a new set.

60
00:05:10,560 --> 00:05:19,810
So that's selling let's say let's sell to be collection view that the Q Using the identifier is a sell

61
00:05:19,800 --> 00:05:24,440
idea just like the last thing index that is index.

62
00:05:24,840 --> 00:05:31,890
What are sell is not going to be of the type you a collection view sell anymore it's now going to be

63
00:05:31,890 --> 00:05:41,040
of the type that because m collection view said someone is going to let us say let's do this as this

64
00:05:41,040 --> 00:05:43,190
type my collection of you sell.

65
00:05:43,290 --> 00:05:44,850
Well of course you have to return it.

66
00:05:44,850 --> 00:05:47,080
So we take care of that error.

67
00:05:47,220 --> 00:05:53,340
Now in the meantime between when we introduce it and when we return it we can do things such as this

68
00:05:53,340 --> 00:06:05,970
one and say Sell dot image view or my Image view dot image becomes a new image and that image is named

69
00:06:06,120 --> 00:06:16,040
and the name is from images are a index cards dots are all so we find the right image from the array.

70
00:06:16,140 --> 00:06:23,100
You place it in the name of a UI image object and put that in the image of the image view of our cell.

71
00:06:23,120 --> 00:06:29,330
So now everything is setup except for the fact that our collection view which is called My collection

72
00:06:29,330 --> 00:06:33,770
view here doesn't know where the data source on delegate are coming from.

73
00:06:34,010 --> 00:06:38,990
So I'm going to go ahead to my view that load and say after the Super view look to gloat I'm going to

74
00:06:38,990 --> 00:06:45,400
say that delegate is itself and data source is once again set.

75
00:06:45,830 --> 00:06:52,850
And if are application now we should be able to see some sellers showing up in our collection view even

76
00:06:52,850 --> 00:06:56,380
though their floor under layout is not done properly yet.

77
00:06:56,480 --> 00:06:59,030
So that's the next thing that we have to be doing.

78
00:06:59,030 --> 00:07:04,130
We have to make sure that all of these cells are essentially placed in the vein that we want them to

79
00:07:04,140 --> 00:07:05,390
meet and to do that.

80
00:07:05,390 --> 00:07:10,550
We could either do what we did in the last lesson which is using the delegate methods or we could do

81
00:07:10,550 --> 00:07:16,460
a different approach this time and this time I'm going to choose a new approach and this new approach

82
00:07:16,460 --> 00:07:26,900
I'm going to say let my layout to be less be of a new eye collection view floor layout.

83
00:07:26,990 --> 00:07:34,640
So this is my new layout and I'm going to apply this to my collection view dot collection view layout

84
00:07:34,700 --> 00:07:38,760
so that becomes my layout and then I'm going to set everything in between.

85
00:07:38,780 --> 00:07:46,380
So I'm going to say my layout dot item size is something that we have to decide about in.

86
00:07:46,430 --> 00:07:54,260
I have my layout and I have to set the section inset just like the last time I have to decide about

87
00:07:54,260 --> 00:07:59,880
my layout dot int. spacing and then I have to decide about my layout.

88
00:07:59,900 --> 00:08:07,050
Dot Linus spacing just like what we had done the last time the line of spacing is very simple is zero.

89
00:08:07,050 --> 00:08:07,680
We know it.

90
00:08:07,700 --> 00:08:10,350
The internal spacing is zero.

91
00:08:10,400 --> 00:08:15,040
The section set is you eye edge in Dodd 0 4.

92
00:08:15,050 --> 00:08:16,430
That's also easy.

93
00:08:16,460 --> 00:08:22,300
The item size just like the last time we actually have to calculate it sort of calculate that I'm going

94
00:08:22,300 --> 00:08:29,240
to go going here and say let I them's a pair to be let's say last time it was three this time let's

95
00:08:29,240 --> 00:08:30,300
make it five.

96
00:08:30,380 --> 00:08:35,510
So I have five items pair or let's make it two because we only have six items.

97
00:08:35,630 --> 00:08:38,310
So let's say items pair are two.

98
00:08:38,600 --> 00:08:45,090
And based on that I'm going to go ahead and say let's sell a vet to become self-taught.

99
00:08:45,110 --> 00:08:48,550
My collection view is not boundaries does it.

100
00:08:48,740 --> 00:08:53,950
Let's divide that by the C.G. float of the items pair.

101
00:08:54,440 --> 00:09:01,690
So now we find the vet of each of the cells because we get the total vet divided by how many are there.

102
00:09:01,830 --> 00:09:09,380
And I'm going to say this becomes a C G size of the let's say the same values same vet on the same value

103
00:09:09,380 --> 00:09:11,280
of the vet for the height.

104
00:09:11,300 --> 00:09:16,610
Now the last thing that you have to do in this case is probably doesn't make much of difference but

105
00:09:16,610 --> 00:09:23,060
you have to be careful about it is that your collection view is not necessarily laid out in the view

106
00:09:23,120 --> 00:09:23,980
of the Lord.

107
00:09:23,990 --> 00:09:27,570
So that actually happens in the view did appear.

108
00:09:27,590 --> 00:09:32,150
We could put it all if this code in the view did appear but that's really not something that I'm a very

109
00:09:32,150 --> 00:09:33,470
big fan of it.

110
00:09:33,500 --> 00:09:35,330
Instead here's what I'm suggesting to do.

111
00:09:35,370 --> 00:09:41,600
We could say right before we do this little calculation because that's the part that gets affected by

112
00:09:41,600 --> 00:09:43,250
the size of their view.

113
00:09:43,250 --> 00:09:50,760
I'm going to say right before that due self died the view does lay out if needed.

114
00:09:50,780 --> 00:09:57,170
So if you need to lay it out if the size of the view is different than the size of the device do that

115
00:09:57,200 --> 00:10:01,820
lay it out then calculate the size because it wants to view is laid out.

116
00:10:01,820 --> 00:10:07,790
We will have the right size for the vet and based on that you could actually calculate this size the

117
00:10:07,790 --> 00:10:10,830
item size now cannot run this application.

118
00:10:10,830 --> 00:10:18,470
Now we should be able to see the cells that are two of them on each line or essentially on each roll

119
00:10:18,800 --> 00:10:20,950
and they should have no spaces between them.

120
00:10:22,520 --> 00:10:24,940
And that's exactly what's happening in here.

121
00:10:24,950 --> 00:10:28,400
There are gaps that you're seeing here are not between the cells.

122
00:10:28,400 --> 00:10:33,080
These are the gaps that each image view has against the cell itself.

123
00:10:33,080 --> 00:10:37,930
Let me show you that really quickly so we know where that's happening from this is that gap.

124
00:10:37,940 --> 00:10:40,030
There is an image of you and then there is a cell.

125
00:10:40,040 --> 00:10:42,980
And we have a kind of strange for five units.

126
00:10:42,980 --> 00:10:44,760
I could in fact do this one for you.

127
00:10:44,780 --> 00:10:52,120
I could go into my view controller and say when we are making the cells make this cell DOD background

128
00:10:52,130 --> 00:10:59,390
color to become you eye color your eye color that sound for instance.

129
00:10:59,390 --> 00:11:05,310
And if you're on this will see that the sign bag guns are perfectly adjacent to each other but the image

130
00:11:05,320 --> 00:11:08,670
you is they have a little margin from each side.

131
00:11:08,810 --> 00:11:15,950
So this was how we use a collection view of cell when this cell is actually designed vit in the collection

132
00:11:15,950 --> 00:11:17,030
view itself.

133
00:11:17,030 --> 00:11:22,220
There is another situation that happens quite often and that is when you want to share a cell between

134
00:11:22,580 --> 00:11:24,350
different collection views.

135
00:11:24,350 --> 00:11:25,850
So I'm going to show you how we do it.

136
00:11:25,850 --> 00:11:31,370
That's one really quickly I'm going to start the new file in this new find which is a gain of the type

137
00:11:31,380 --> 00:11:33,030
UI collection view cell.

138
00:11:33,170 --> 00:11:39,270
I'm going to call it my cell for instance and I'm going to say also create the X I'll be fine.

139
00:11:39,380 --> 00:11:41,180
Or you could do that separately.

140
00:11:41,180 --> 00:11:41,920
Doesn't matter.

141
00:11:42,140 --> 00:11:46,360
So once they make it it's gonna go ahead and make two files for me.

142
00:11:46,550 --> 00:11:50,940
One of them is the cell swift and the other one is the cell XIV.

143
00:11:50,960 --> 00:11:52,730
Now if I go to the X I'd be fine.

144
00:11:52,730 --> 00:12:02,220
The important one so here is the cell in a separate XIV file and the class for it is my cell.

145
00:12:02,450 --> 00:12:05,170
So they are interconnected to each other.

146
00:12:05,180 --> 00:12:11,550
Now I could go ahead and say this cell actually has an object in it may be a Laban.

147
00:12:11,550 --> 00:12:11,840
All right.

148
00:12:11,900 --> 00:12:18,020
And I place it right up there something like that and I'm going to go ahead and say make the kind of

149
00:12:18,020 --> 00:12:25,860
things just like the last time five units from all angles and then make it align to the center maybe

150
00:12:25,880 --> 00:12:29,560
a little bit larger and has a different background.

151
00:12:29,690 --> 00:12:37,250
And now I'm going to go into my cell and say I have an outlet for it and that outlet is this so is a.

152
00:12:37,520 --> 00:12:45,560
How it's not value then let's call it my label which is of the type you I label and if I head back to

153
00:12:45,560 --> 00:12:53,360
my XIV file now I should be able to select my cell and output in the connections see that my label and

154
00:12:53,360 --> 00:12:59,160
I'm going to connect it to my labor and I'm also going to go ahead and give an IED to my cell.

155
00:12:59,180 --> 00:13:03,460
So here the idea for a time when I say it's my cell idea.

156
00:13:03,830 --> 00:13:06,190
So we have two cells so far.

157
00:13:06,190 --> 00:13:10,560
One of them is within the storyboard within the collection view.

158
00:13:10,610 --> 00:13:15,230
The other one is outside in X A B file has a standing alone.

159
00:13:15,230 --> 00:13:20,300
Now this one is not connected to any particular collection view just yet.

160
00:13:20,540 --> 00:13:25,580
So to fix that I'm going to go to my view controller in my view did look just like what we did in a

161
00:13:25,580 --> 00:13:26,560
table view.

162
00:13:26,690 --> 00:13:35,930
I'm going to say my collection view dot register and I want to register using a nip and using an identifier

163
00:13:36,140 --> 00:13:41,870
so not that actually I want to register using a nib and an identifier.

164
00:13:41,900 --> 00:13:46,490
So that's one I'm going to go ahead and say you I never.

165
00:13:47,090 --> 00:13:52,940
And that name is actually from a string and the string for it is called my cell.

166
00:13:53,060 --> 00:14:00,020
So it's going to be my cell and then the bundle for it is nil because it is within the same bundle and

167
00:14:00,020 --> 00:14:05,430
identifier for it is my cell I.D. that's to identify every put for this cell.

168
00:14:05,750 --> 00:14:12,050
So now my collection of you can use this kind of set if it can.

169
00:14:12,050 --> 00:14:13,880
It doesn't mean is going to use it.

170
00:14:14,120 --> 00:14:15,900
So we could actually change that.

171
00:14:16,010 --> 00:14:22,460
I'm going here in my collection view cell for IDM and I'm going to say let's do this.

172
00:14:22,460 --> 00:14:29,540
If stained expired is even let's use that image if they are odd.

173
00:14:29,540 --> 00:14:32,410
Let's use the label so to do that.

174
00:14:32,420 --> 00:14:33,580
Here's what we have to do.

175
00:14:33,950 --> 00:14:38,470
We have to run if Elsa statement and here's it becomes a little bit tricky.

176
00:14:38,600 --> 00:14:46,490
So it could go ahead and say if index smart dot to roll are motionless two is zero then we have to do

177
00:14:46,490 --> 00:14:48,200
something else.

178
00:14:48,210 --> 00:14:50,390
We are obviously to do something else.

179
00:14:50,390 --> 00:14:55,580
So to do that I'm going to go ahead and say if it is even you want to use the image.

180
00:14:55,580 --> 00:14:56,870
So this part is easy.

181
00:14:57,080 --> 00:14:58,460
Let's take that.

182
00:14:58,460 --> 00:14:59,540
I'm going to place it there.

183
00:15:00,020 --> 00:15:07,220
Then I'm going to copy the whole thing and I'm going to paste it in here and say if it is the else if

184
00:15:07,220 --> 00:15:07,860
it is odd.

185
00:15:08,030 --> 00:15:08,810
Let's do this.

186
00:15:08,810 --> 00:15:12,760
Let me delete these so I can show you everything in one screen.

187
00:15:12,830 --> 00:15:19,160
So in here I'm going to go ahead and say if it is an odd one let's sell to be a collection view with

188
00:15:19,730 --> 00:15:28,740
my cell I.D. and then go ahead and hear us say it is off the type my cell and my cell doesn't have an

189
00:15:28,740 --> 00:15:30,090
image of you anymore.

190
00:15:30,100 --> 00:15:30,740
You're right there.

191
00:15:30,750 --> 00:15:32,070
It has this.

192
00:15:32,070 --> 00:15:35,410
It has a label built into it.

193
00:15:35,600 --> 00:15:40,580
That text becomes let's say it becomes the value of the index.

194
00:15:40,650 --> 00:15:44,080
So index fad diets rule.

195
00:15:44,100 --> 00:15:46,280
Now this seems to be working.

196
00:15:46,290 --> 00:15:53,220
But then when you're trying to return the cell both of these cells are actually declared the victim.

197
00:15:53,280 --> 00:15:54,720
If as bodies.

198
00:15:54,720 --> 00:15:59,330
So really this one doesn't know where a cell is.

199
00:15:59,400 --> 00:16:01,910
So that the scope of it is actually different.

200
00:16:01,920 --> 00:16:06,320
And that's where it becomes a little bit tricky because you could do one of these two things.

201
00:16:06,330 --> 00:16:12,930
You could say well I'm going to bring the cell out of this scope so put it in here and then drop that.

202
00:16:12,930 --> 00:16:18,100
Obviously this is not going to work now because cell doesn't know what kind of cell it is.

203
00:16:18,180 --> 00:16:21,570
You could say well I'm going to make it of the M collection cell.

204
00:16:21,650 --> 00:16:23,190
So something like that.

205
00:16:23,340 --> 00:16:28,440
But then the problem is this very same cell it should be used in here as well.

206
00:16:28,980 --> 00:16:32,930
So both if and else they have to use the same cell.

207
00:16:33,000 --> 00:16:36,430
But one of them is of the type M collection view cell.

208
00:16:36,540 --> 00:16:40,890
One of them is of the type my cell and that's really not going to work.

209
00:16:41,010 --> 00:16:47,840
Now here is the advantage of essentially inheritance a topic that we discussed many many many sections

210
00:16:47,840 --> 00:16:48,470
ago.

211
00:16:48,510 --> 00:16:55,180
So when I declare my cell I'm going to say it is of the type you are a collection of you said it seems

212
00:16:55,180 --> 00:16:58,970
most M collection your cell and my cell.

213
00:16:58,980 --> 00:17:02,340
They are both subclasses of you a collection of your cell.

214
00:17:02,360 --> 00:17:04,300
They are kind of interchangeable.

215
00:17:04,350 --> 00:17:09,530
So it is true that the cell is declared of the type you a collection of your cell.

216
00:17:09,630 --> 00:17:16,780
But for the even numbers it is being defined or implemented as an M collection view.

217
00:17:16,950 --> 00:17:21,490
And for the odd ones is being implemented as a different type of cell.

218
00:17:21,510 --> 00:17:28,090
Now when you are trying to put the image of you or the Labor is saying that I don't know if the UI collection

219
00:17:28,090 --> 00:17:33,650
of your cell has anything like that because that is how you have declared it for me and what you have

220
00:17:33,650 --> 00:17:34,560
for do you have to say.

221
00:17:34,560 --> 00:17:43,950
Well cell in here is as the M collection you said I know that for sure to be true.

222
00:17:43,950 --> 00:17:53,190
And then in here I'm going to go ahead and say cell as this time is going to be my cell and this time

223
00:17:53,310 --> 00:17:58,710
my label that text or even the cell has been declared of a different type.

224
00:17:58,710 --> 00:18:02,990
It is being defined as two other different ways.

225
00:18:03,150 --> 00:18:07,230
Both of them subclasses of the origin out of type.

226
00:18:07,450 --> 00:18:13,380
And now if you're on this application in some of the cells we should see the images in some other cells

227
00:18:13,380 --> 00:18:20,640
we should see the numbers of the index parts and expanded roles essentially and that's exactly what

228
00:18:20,640 --> 00:18:21,870
you were hoping to see.

229
00:18:21,870 --> 00:18:27,270
And now we have to custom cells that they appear here based on some sort of a condition and they're

230
00:18:27,270 --> 00:18:32,170
both of the same type even though their definitions are quite different.

231
00:18:32,370 --> 00:18:39,660
And that is how to use custom cells as well as how to use a collection view layout instead of using

232
00:18:39,660 --> 00:18:46,530
the collection view floor layout delegate and let's keep it up to here and let's move on to our next

233
00:18:46,530 --> 00:18:46,830
lesson.