1
00:00:00,150 --> 00:00:01,190
Welcome back again.

2
00:00:01,200 --> 00:00:07,560
In this lesson we will be talking about supplementary views in collection views and tools are essentially

3
00:00:07,560 --> 00:00:11,680
a kind of fuel that you can reuse them as many times as you want.

4
00:00:11,760 --> 00:00:19,050
And we often use them for situations such as a header view for sections or a area view for sections.

5
00:00:19,050 --> 00:00:25,280
So let's go ahead and see how we do that and what impact Scott and yet I'm going to start a new application

6
00:00:25,280 --> 00:00:32,390
called supplementary views in the collection views.

7
00:00:32,450 --> 00:00:41,010
So once I have that I'm going to head into my view controller and because I know what they have to do

8
00:00:41,010 --> 00:00:47,010
and and do some parts of it right away I'm not going to necessarily do it in the right order but I know

9
00:00:47,010 --> 00:00:49,930
for a fact that we have to be doing.

10
00:00:50,000 --> 00:00:59,430
Are you eye collection view delegate and we have to be doing UI collection view data source so I know

11
00:00:59,430 --> 00:01:06,750
that part and I know I have to essentially make an outlet for my collection view some when I say my

12
00:01:06,930 --> 00:01:14,780
collection view of the type UI collection view and we have to include two methods for sure.

13
00:01:14,790 --> 00:01:27,960
So a number of items number of items in section let's say return 0 for now and sell for I them at indexed

14
00:01:27,960 --> 00:01:28,280
spot.

15
00:01:28,320 --> 00:01:31,020
So these two they absolutely must be there.

16
00:01:31,830 --> 00:01:43,500
So I'm going to say let sell to be collection view that D Q Using the identifier that you always use

17
00:01:43,580 --> 00:01:45,980
for an index card which is then index.

18
00:01:46,170 --> 00:01:49,920
So I have the basics of making a collection view.

19
00:01:49,930 --> 00:01:55,310
Now let's head into our storyboard and I have to return this of course return.

20
00:01:55,700 --> 00:02:00,450
So let's head into our storyboard and in here with I'm going to have these I'm going to have an actual

21
00:02:00,450 --> 00:02:01,880
collection view.

22
00:02:01,920 --> 00:02:11,540
So here is a collection view I'm going to play see about here not like that like that.

23
00:02:12,080 --> 00:02:18,560
And then in my collection view I'm going to go ahead and change the the name of my cell.

24
00:02:18,890 --> 00:02:25,490
So this guy here I'm going to call it Cell I.D. or something like that and then I'm going to go ahead

25
00:02:25,520 --> 00:02:28,350
and connect it to the outlet that he made.

26
00:02:28,430 --> 00:02:33,890
So my collection view is this one and then I'm going to go in here and add something that is called

27
00:02:33,950 --> 00:02:41,360
a reusable view which is essentially my search for it which is this one and this is essentially a view

28
00:02:41,360 --> 00:02:48,530
that we can add to our collection views and acts as a reusable you eye view that you can reuse it for

29
00:02:48,530 --> 00:02:51,890
different sections or for defending our purposes.

30
00:02:51,890 --> 00:02:56,710
So let's add the one here as the footer and the one here as the header.

31
00:02:56,870 --> 00:03:04,940
Now for both of these seats they are reusable just like when we had a cell and our cell has an I.D..

32
00:03:04,940 --> 00:03:06,620
I'm going to give them I.D. as well.

33
00:03:06,650 --> 00:03:15,350
So this is had their I.D. And then this button one is photo I.D. so we have the two of these.

34
00:03:15,800 --> 00:03:21,920
And because they want to have some content in them I'm going to have to actually give them a subclass

35
00:03:22,010 --> 00:03:22,570
as well.

36
00:03:23,450 --> 00:03:29,240
So to do that I'm going to say command and and in a with each class I'm going to say these are actually

37
00:03:29,360 --> 00:03:41,790
of the type you eye collection reusable view I'm one of them is going to be called a header view so

38
00:03:41,820 --> 00:03:48,600
that's that I'm going to say command and again and a gain of the type your eye collection or the use

39
00:03:48,600 --> 00:03:49,400
of L view.

40
00:03:49,470 --> 00:03:53,490
This one is going to be called a footwear view as you can imagine.

41
00:03:53,520 --> 00:04:01,230
We need the views so we will be able to get access to the content between these two are usable views.

42
00:04:01,230 --> 00:04:09,630
So the top one the class for it becomes the Muslim into here becomes their view on the bottom one.

43
00:04:09,660 --> 00:04:15,020
The class for it becomes obviously the footer view.

44
00:04:15,480 --> 00:04:22,050
So now that we have this we can have any kind of content between them as if they were just UI views.

45
00:04:22,050 --> 00:04:28,520
So for instance I could go in here and say this one has a label inside it maybe like that.

46
00:04:29,420 --> 00:04:34,250
And this other one has the same thing and I've worked with labels because they're the easiest objects

47
00:04:34,520 --> 00:04:38,600
but you can imagine you could essentially use any kind of object in them.

48
00:04:39,230 --> 00:04:45,980
And then I'm going to go to my assistant window in the system window and get a load the right file which

49
00:04:45,980 --> 00:04:50,180
one of them would be the header view wants to have their view is loaded.

50
00:04:50,360 --> 00:05:00,690
I'm going to go in here and say This is Heather labor and that's one of them.

51
00:05:00,770 --> 00:05:08,770
And now let's load the footer view and that is also properly connected to my footer of your outlet here.

52
00:05:08,780 --> 00:05:13,690
So I'm going to connect that and that becomes a footer label.

53
00:05:13,760 --> 00:05:16,630
So now we have everything that we need.

54
00:05:16,790 --> 00:05:20,000
We have a table view for our table view.

55
00:05:20,000 --> 00:05:21,650
We have a cell.

56
00:05:21,650 --> 00:05:26,540
Obviously we have a supplementary hither view U.S. supplementary footer view.

57
00:05:26,570 --> 00:05:32,860
We now have to head into our coding and write the code that is gonna reuse these reusable views and

58
00:05:32,860 --> 00:05:37,660
show us different content depending on the sections and to do that.

59
00:05:37,670 --> 00:05:43,400
And when I go to my view controller and I'm going to make an assumption right off the bat that my collection

60
00:05:43,400 --> 00:05:48,130
view actually has two sections one section that we have been doing for a while.

61
00:05:48,140 --> 00:05:51,650
For cities and another section for countries.

62
00:05:51,770 --> 00:06:00,270
So I'm going to go ahead in here and say let cities are right to be these guys let's say New York and

63
00:06:00,270 --> 00:06:00,830
New York.

64
00:06:00,950 --> 00:06:11,710
Let's say Vancouver let's say early and let's say I have the last one to be real and then I have to

65
00:06:11,720 --> 00:06:15,150
let countries agree to be.

66
00:06:15,680 --> 00:06:20,470
And again here I have a U.S. I have Canada.

67
00:06:21,500 --> 00:06:26,050
I have India and maybe I have Mexico.

68
00:06:26,750 --> 00:06:33,110
So we got some cities on some countries and we want to have two sections to do that.

69
00:06:33,110 --> 00:06:38,350
I'm actually going to go ahead and say valuable array of arrays.

70
00:06:38,840 --> 00:06:41,140
And that's going to be an array.

71
00:06:41,420 --> 00:06:47,340
That is an array of arrays of strings.

72
00:06:47,330 --> 00:06:49,790
So it's a bit of a complicated process.

73
00:06:49,790 --> 00:06:54,180
I'm seeing an array of arrays which is an array which we need.

74
00:06:54,200 --> 00:06:59,840
There are arrays of strings so I'm going to put these two arrays within this array and I'm going to

75
00:06:59,840 --> 00:07:06,950
do that in my view did load so right off the top in here at the very beginning I'm going to say in my

76
00:07:06,950 --> 00:07:18,140
view that load array of arrays becomes an array of cities array and countries array countries array.

77
00:07:18,770 --> 00:07:23,620
So now we have the array that we need to show in this collection view.

78
00:07:23,720 --> 00:07:30,740
Then I'm going to go in here to my number of items in sections and before that actually I have to decide

79
00:07:30,740 --> 00:07:32,420
about the number of sections.

80
00:07:32,640 --> 00:07:38,570
So I'm going to say number of sections and the number of sections would be the number of objects in

81
00:07:38,570 --> 00:07:39,590
this array.

82
00:07:39,620 --> 00:07:43,340
So I'm going to say return this one that count.

83
00:07:43,400 --> 00:07:45,800
So we got the number of sections taking care of.

84
00:07:45,890 --> 00:07:50,250
Then we have to worry about the number of items in each of these sections.

85
00:07:50,270 --> 00:07:58,880
So for that I'm going to say array of arrays section whether it is the 0 1 or the first one from that.

86
00:07:58,880 --> 00:08:01,550
What I want to get is the counterfeits.

87
00:08:01,550 --> 00:08:03,980
So if we are in their first one.

88
00:08:04,010 --> 00:08:05,510
Get the city's array count.

89
00:08:05,510 --> 00:08:08,360
If you're in the countries or get the country's array count.

90
00:08:09,050 --> 00:08:14,090
Finally we have the sale of for item at index spot and we already have a cell.

91
00:08:14,150 --> 00:08:15,710
So that's good.

92
00:08:15,710 --> 00:08:24,740
Let's format this properly and then yet I'm going to say let's sell a label to be a you I label made

93
00:08:24,740 --> 00:08:29,810
by a frame and the frame for it is actually sell da down there is.

94
00:08:30,080 --> 00:08:37,490
So whenever my sell is place this guy right over there and then sell label sell a label.

95
00:08:37,500 --> 00:08:46,670
The text alignment when I say and sticks a lime and center so they are taking care of so label that

96
00:08:46,670 --> 00:08:56,120
fund let's make it a you I find that system font of size maybe a larger ones such as 22 and then the

97
00:08:56,120 --> 00:09:03,470
important thing of it is so label that text which essentially has to become array of arrays from the

98
00:09:03,470 --> 00:09:08,080
area of arrays we have to get the index part that section.

99
00:09:08,210 --> 00:09:16,400
So we find from rich array we want to read and then from there we want to get index part DHA to roll.

100
00:09:16,400 --> 00:09:23,390
So we want to find which section I'm from which section which all you want to read for this particular

101
00:09:23,390 --> 00:09:24,070
text.

102
00:09:24,140 --> 00:09:31,940
Once we have that and when to go ahead and say Sell dot background view becomes the sell label this

103
00:09:32,010 --> 00:09:37,410
a different way that we have been doing in the past we have actually been adding this whole label to

104
00:09:37,410 --> 00:09:42,760
our sales which is good for testing but Jared another very good idea.

105
00:09:43,050 --> 00:09:50,670
But here I'm actually adding it as a bag on view in general is not a good idea to build your items here

106
00:09:50,940 --> 00:09:58,560
when you are doing when you are producing your sales for items is whether if you subclass yourself but

107
00:09:58,560 --> 00:10:01,830
they don't want to do that because I don't want to make things overly complicated.

108
00:10:01,920 --> 00:10:05,200
This isn't the topic of this particular lesson.

109
00:10:05,340 --> 00:10:08,410
And then finally maybe we change the bygone colors as well.

110
00:10:08,430 --> 00:10:15,790
So when I say sell not background color becomes you eye color that red.

111
00:10:15,900 --> 00:10:26,310
And like always if they expand that role was modulus 2 was 0 that even ones essentially make this sell

112
00:10:26,520 --> 00:10:31,780
dot background color to become you eye color dot.

113
00:10:32,310 --> 00:10:33,980
So we have two sets of sense.

114
00:10:33,990 --> 00:10:39,150
We have the blue ones and the red ones and they all show are the correct label hopefully.

115
00:10:39,200 --> 00:10:45,420
The final thing I have to do before I run the application I have to make sure that my collection view

116
00:10:45,500 --> 00:10:52,870
dot delegate is self and also my collection view not data source is self.

117
00:10:52,980 --> 00:10:58,640
You could do this either in your story world or do it here in your actual coding environment.

118
00:10:58,680 --> 00:11:05,630
Now if I were on the application now we should be able to see a collection view with two sets of data.

119
00:11:05,790 --> 00:11:12,540
Some of them being cities some of them being countries and there to head their views are there but we

120
00:11:12,540 --> 00:11:14,100
just can't see anything.

121
00:11:14,150 --> 00:11:19,590
And since we then set any of the constraints we are getting this weird look that you know there's some

122
00:11:19,590 --> 00:11:24,830
gaps in here but that's again it doesn't matter for this particular practice.

123
00:11:24,900 --> 00:11:31,610
The next thing that is important is actually setting our values for these gaps on the top and the bottom.

124
00:11:31,650 --> 00:11:33,380
Those are two views.

125
00:11:33,390 --> 00:11:40,900
The header view on the footer view and to do that we use a particular function from the delegation called

126
00:11:40,910 --> 00:11:48,840
The View for supplementary view and that's the kind of function that returns what view you would like

127
00:11:48,840 --> 00:11:52,670
to see at what supplementary location.

128
00:11:52,740 --> 00:11:57,690
And the first thing I'm going to do is I'm going to say let and I'm going to call this one my subbed

129
00:11:57,690 --> 00:12:03,220
view which is of the type you UI collection reusable view.

130
00:12:03,240 --> 00:12:04,360
So we have that.

131
00:12:04,470 --> 00:12:06,750
And then somewhere much further.

132
00:12:06,750 --> 00:12:09,960
Let me get only this code in here somewhere at the end.

133
00:12:09,960 --> 00:12:17,100
We have to return my sub view but in the between these two you have to essentially decide what happens

134
00:12:17,100 --> 00:12:18,190
to this top view.

135
00:12:18,210 --> 00:12:27,660
So the first thing I'm going to do is I'm going to say if this thing kind if kind was of the type you

136
00:12:27,660 --> 00:12:34,150
eye collection view dot header element is head there.

137
00:12:34,200 --> 00:12:39,450
So for the header if you have something in the else which is the footprint you have to obviously do

138
00:12:39,810 --> 00:12:41,070
something else.

139
00:12:41,070 --> 00:12:48,320
So in header I'm going to go ahead and say let's head there to become collection view and I'm going

140
00:12:48,320 --> 00:12:54,850
to d q a supplementary view for it and this is a bit of a longer quote I'm actually gonna formatted

141
00:12:54,840 --> 00:12:58,250
like this which is a different way of formatting.

142
00:12:58,290 --> 00:13:01,060
The moment you take it outside their practice.

143
00:13:01,380 --> 00:13:04,590
So I'm going to say the idea that I want to do.

144
00:13:04,590 --> 00:13:11,910
Q Is this one of the ideas actually had their idea just like what we did before the index part is obviously

145
00:13:11,910 --> 00:13:17,610
indexed bond and the kind of the object that you want to use is actually disguised you collection and

146
00:13:17,610 --> 00:13:22,380
view element section header just like what we had earlier.

147
00:13:22,380 --> 00:13:29,250
So now we have the header but the header is not of the type that we want which is the header view.

148
00:13:29,310 --> 00:13:31,040
So I'm going to have to fix that one.

149
00:13:31,170 --> 00:13:34,820
I'm going to say get this as a header view.

150
00:13:35,010 --> 00:13:37,370
So we have that part taken care of.

151
00:13:37,500 --> 00:13:47,010
And now I could go ahead and say header dot head there labelled dot text say whatever that you want.

152
00:13:47,140 --> 00:13:49,130
This is Heather.

153
00:13:49,580 --> 00:13:53,140
And of course you make it relevant to the value of your index part.

154
00:13:53,380 --> 00:13:57,600
If the index part is section is zero you make it say something.

155
00:13:57,880 --> 00:13:59,990
If it does not make it say something else.

156
00:14:00,070 --> 00:14:03,640
I'm actually going to try to do that for you in there in the footer section.

157
00:14:03,640 --> 00:14:11,860
However once that is done I'm going to have to go ahead and say in here my sub view becomes header.

158
00:14:12,430 --> 00:14:16,620
So now we have our sub view which is of the type that we needed to be.

159
00:14:16,720 --> 00:14:20,530
And then we're gonna go ahead and here and say of course return.

160
00:14:20,950 --> 00:14:25,750
Let's go ahead and do the exact same thing here for the L spot which is the footer.

161
00:14:25,840 --> 00:14:29,910
So I'm going to go ahead and copy this paste the whole thing in here.

162
00:14:30,010 --> 00:14:34,970
Say let's footer to be the D Q reusable.

163
00:14:34,990 --> 00:14:39,080
All of that is good section type which is a footer.

164
00:14:39,130 --> 00:14:40,580
So we are in the footer.

165
00:14:40,810 --> 00:14:43,470
If you were there don't get the header right.

166
00:14:43,700 --> 00:14:45,870
There you get the footer.

167
00:14:46,270 --> 00:14:52,390
And don't get it as a header view you get it as a footer review and obviously doesn't have a header

168
00:14:52,390 --> 00:14:53,200
labor anymore.

169
00:14:53,200 --> 00:14:56,150
It has a foot terribly but if I'm not wrong.

170
00:14:56,500 --> 00:14:57,640
Is that what we called it.

171
00:14:57,700 --> 00:14:58,900
Let's have a look footer.

172
00:14:59,020 --> 00:15:00,660
Labor has a footer.

173
00:15:00,730 --> 00:15:01,760
Yes.

174
00:15:01,900 --> 00:15:08,530
So in here I'm gonna go ahead and say ah let's just rewrite this whole thing with an if statement.

175
00:15:08,530 --> 00:15:17,150
So I'm going to say once we got the footer If index smart that section is 0.

176
00:15:17,200 --> 00:15:28,930
If you're in the very first one to say footer the footer Lei Ben dot text says section it's Section

177
00:15:29,150 --> 00:15:30,710
Zero.

178
00:15:30,750 --> 00:15:31,490
All right.

179
00:15:31,540 --> 00:15:40,900
And otherwise you just say something else as you do footer label with a text later becomes Section 1.

180
00:15:40,950 --> 00:15:46,060
You obviously could decide or you should decide on much better ways of doing these things.

181
00:15:46,080 --> 00:15:49,140
I'm just doing it for the purpose of demonstration.

182
00:15:49,140 --> 00:15:55,290
So once again we have view for a supplementary element of kind if the supplemental element of kind is

183
00:15:55,290 --> 00:15:57,990
header the subclass or had their view.

184
00:15:57,990 --> 00:16:04,500
Otherwise we do our footer view no matter what we return that sub view at the end depending on whether

185
00:16:04,500 --> 00:16:11,670
that's of you becomes a footer or it becomes a header and for either of the two of them we essentially

186
00:16:12,670 --> 00:16:14,900
write the kind of data that we want.

187
00:16:14,910 --> 00:16:17,180
In this case we only have a text value.

188
00:16:17,310 --> 00:16:19,180
Otherwise you would have more value.

189
00:16:19,180 --> 00:16:24,320
And if I run my application now we should be able to see a new head the review and a new footer review

190
00:16:24,330 --> 00:16:29,220
for our collection views that it says this is header for both of them.

191
00:16:29,220 --> 00:16:31,140
This is Section 0 footer.

192
00:16:31,230 --> 00:16:33,390
This is Section 1 footer.

193
00:16:33,390 --> 00:16:39,510
I'm going to quickly change some of the look matters of my collection view because it looks really ugly

194
00:16:39,510 --> 00:16:44,440
and I don't wonder that first thing I'm going to do is here and when it comes to my view did Lord I'm

195
00:16:44,450 --> 00:16:54,600
going to say let's get the layout lit let's call it my layout to be self dot my collection view dot

196
00:16:54,900 --> 00:17:03,160
collection view layout as I'm going to get as you I.

197
00:17:03,160 --> 00:17:13,920
Collection collection view floor layout and then I'm going to go ahead and say my layout dot section

198
00:17:14,010 --> 00:17:21,390
inset becomes you I edge in sets of their values they want to put in here is I want to give it some

199
00:17:21,390 --> 00:17:27,840
space for the top and bottom so the top I'm going to give it 50 left is zero by then I'm going to give

200
00:17:27,840 --> 00:17:29,960
it 50 and write a zero again.

201
00:17:30,090 --> 00:17:36,300
So I want to have a little larger space for post my foot her view and my head their view and then I'm

202
00:17:36,300 --> 00:17:42,180
going to head into my storyboard and here I'm going to select my collection view and set all the constraints

203
00:17:42,180 --> 00:17:49,740
for it maybe 30 0 0 and 30 the same numbers are good so it's actually has some gap on the top some gap

204
00:17:49,740 --> 00:17:55,890
on the bottom and if we on our application now we should be able to see that it's collection view is

205
00:17:55,890 --> 00:18:02,310
properly kind of straining itself and on see the header view and the footer view and we obviously can

206
00:18:02,400 --> 00:18:09,000
essentially reuse these if you had more US sections in your collection view and that is essentially

207
00:18:09,000 --> 00:18:17,670
how we use a supplementary view in collection use views it primarily fit this method view supplementary

208
00:18:17,670 --> 00:18:24,210
element of kind but to do that we need to have our head their views or footer views or any other kind

209
00:18:24,210 --> 00:18:30,240
of reusable view that we want and that's about that this keep it up to here and let's move on to our

210
00:18:30,240 --> 00:18:30,810
next lesson.