1
00:00:07,460 --> 00:00:08,780
Everybody welcome back.

2
00:00:08,780 --> 00:00:13,980
Joining me here with slopes dot com and we are continuing on with our chat app.

3
00:00:14,150 --> 00:00:17,350
Let's go and just run this to see where we left off.

4
00:00:17,540 --> 00:00:22,890
We were working on our collection of Wii U in our avatar picture view controller.

5
00:00:23,180 --> 00:00:28,610
And yes and this the lesson we are going to continue working on that get it to where it's showing all

6
00:00:28,610 --> 00:00:37,040
of the correct Avatar images as well as being able to select them and see that to our user data service.

7
00:00:37,040 --> 00:00:45,830
So if this pops up it's just been trying to vamp here while this loads I would click here on our menu

8
00:00:46,010 --> 00:00:50,510
go to log in don't have an account sign up here and this is where we're at right now.

9
00:00:50,580 --> 00:00:51,080
OK.

10
00:00:51,290 --> 00:00:55,480
So we need to work on our configure cell function.

11
00:00:55,640 --> 00:00:57,430
And I get that all working.

12
00:00:57,830 --> 00:01:02,810
All right so let's take a look at our avatar so one of the first things what we're going to need to

13
00:01:02,810 --> 00:01:08,650
know to configure our cell is whether it's supposed to be a dark or a light cell right.

14
00:01:08,940 --> 00:01:14,440
So I'm thinking we create an enumerator here and we're going to call this enumerator Avatar type.

15
00:01:15,030 --> 00:01:16,790
And we have two cases.

16
00:01:16,790 --> 00:01:22,420
Case one is dark dark stuff.

17
00:01:22,420 --> 00:01:31,220
That hand is trying to set it equal to an image and his next cases light.

18
00:01:31,270 --> 00:01:32,450
There we go.

19
00:01:32,620 --> 00:01:40,590
And so then in our configure cell function receipt func configure configure.

20
00:01:40,630 --> 00:01:49,810
So we are going to need to know the index so that we can set the image and that's going to be of a type

21
00:01:49,940 --> 00:01:50,490
it.

22
00:01:50,890 --> 00:01:56,530
And we're also going to need to know the type of Avatar that is supposed to be whether it's dark or

23
00:01:56,530 --> 00:01:56,900
light.

24
00:01:56,950 --> 00:02:05,490
And that is of type have a tar type the inamorata that we just created can cause the bottom pane here.

25
00:02:05,700 --> 00:02:18,250
And so we're going to say if the type is equal to Avatar type dot dark then the avatar image that we

26
00:02:18,250 --> 00:02:25,960
have an outlet for the only image the only UI element inside of these cells then the image is going

27
00:02:25,960 --> 00:02:38,990
to be equal to UI image named and it is going to be named dark and then string interpolate the index

28
00:02:39,080 --> 00:02:41,900
that we are passing into this function.

29
00:02:43,800 --> 00:02:47,250
And then just a little bit of stabilizing.

30
00:02:47,400 --> 00:02:52,970
If it's a dark avatar then we're going to have a light gray background to it.

31
00:02:53,070 --> 00:02:58,260
If it's a light they're going to have a dark gray background just so that the backgrounds accentuate

32
00:02:58,530 --> 00:03:01,220
the Avatar images.

33
00:03:01,230 --> 00:03:01,540
All right.

34
00:03:01,580 --> 00:03:12,070
So a self-taught layer dot back ground color is equal to you why colored light gray dot C-g color.

35
00:03:13,260 --> 00:03:21,420
So else if this is a light Avatar we are going to say and I'm just going to copy this because it's pretty

36
00:03:21,420 --> 00:03:22,520
much the same thing.

37
00:03:22,710 --> 00:03:28,210
The avatar image is going to be equal to you I imagine named instead of dark.

38
00:03:28,290 --> 00:03:31,850
It's just going to be light.

39
00:03:31,980 --> 00:03:41,510
And just to drive it home one more time if we look at our assets these are named dark and then an integer.

40
00:03:41,520 --> 00:03:49,650
So what's going to happen is when the cell for item is function is called in the controller it's going

41
00:03:49,650 --> 00:03:57,240
to cycle through and it's going to send the index 0 through 27 to our configure items cell and it's

42
00:03:57,240 --> 00:04:03,000
going to do the check with is supposed to be dark or light and then it's going to pick the Avatar images

43
00:04:03,060 --> 00:04:03,820
based on that.

44
00:04:03,870 --> 00:04:04,500
OK.

45
00:04:05,190 --> 00:04:11,560
And we need to change this color to just a regular Gray.

46
00:04:11,580 --> 00:04:11,830
All right.

47
00:04:11,850 --> 00:04:12,280
Perfect.

48
00:04:12,300 --> 00:04:13,350
And to save that

49
00:04:17,070 --> 00:04:21,990
an jump into are going to say they're going to jump to or about her picker visi.

50
00:04:22,340 --> 00:04:26,930
And here we need to call our configure cell function.

51
00:04:26,970 --> 00:04:35,120
Ok I was going to say cell and not configure cell and we have we're going to pass in the index and that's

52
00:04:35,120 --> 00:04:36,810
pretty easy because that's.

53
00:04:37,030 --> 00:04:37,330
That's right.

54
00:04:37,330 --> 00:04:47,180
Here the index paths are going to say Index path that item will give us the specific index path index

55
00:04:47,180 --> 00:04:48,590
number that we want.

56
00:04:48,710 --> 00:04:50,180
But here we need to pass in the type.

57
00:04:50,180 --> 00:04:50,420
All right.

58
00:04:50,420 --> 00:05:00,110
So we need to actually create a variable that stores the type of Avatar type that we are currently selected.

59
00:05:00,110 --> 00:05:00,650
OK.

60
00:05:00,920 --> 00:05:10,520
So the variable is going to be our avatar type and this is going to equal an avatar type and by default

61
00:05:10,670 --> 00:05:17,510
it's going to be set to the dark because when we load the view controller that's what the segment control

62
00:05:17,570 --> 00:05:19,890
is set to by default.

63
00:05:20,180 --> 00:05:27,920
Ok so for now we're just passing the Avatar type here.

64
00:05:28,220 --> 00:05:34,420
And it's just going to be the dark for now until we get in our segment control changed function working.

65
00:05:34,610 --> 00:05:38,270
All right so let's go ahead and run that.

66
00:05:38,270 --> 00:05:39,460
I'm going to click here.

67
00:05:39,570 --> 00:05:41,300
Click on log in.

68
00:05:41,430 --> 00:05:45,510
Don't have an account and drum roll.

69
00:05:45,510 --> 00:05:51,380
Hey it looks pretty cool.

70
00:05:51,590 --> 00:05:53,580
This doesn't do anything yet though.

71
00:05:53,750 --> 00:05:55,650
So let's go ahead and fix that.

72
00:05:55,890 --> 00:06:02,110
How are we going to do that if we come down here to the segment control changed.

73
00:06:02,390 --> 00:06:05,500
I want you to try and figure this out on your own.

74
00:06:05,690 --> 00:06:06,220
OK.

75
00:06:06,410 --> 00:06:09,830
So just kind of to talk you through it.

76
00:06:10,040 --> 00:06:16,670
What you're going to need to do is you're going to need to do a check to see which segment control is

77
00:06:16,670 --> 00:06:26,780
selected then you're going to need to change this avatar type and then you'll need to do something to

78
00:06:27,290 --> 00:06:28,550
reload the data.

79
00:06:28,550 --> 00:06:29,010
All right.

80
00:06:29,180 --> 00:06:30,890
So see if you can figure that out on your own.

81
00:06:30,980 --> 00:06:34,700
And if and if not then we're going to do it right now.

82
00:06:34,700 --> 00:06:35,920
Together game.

83
00:06:36,140 --> 00:06:41,990
So we're going to say if segment control that selected segment index.

84
00:06:41,990 --> 00:06:46,520
So that's how we are able to access and know which one is selected.

85
00:06:46,790 --> 00:06:54,700
0 is the first one and then number one is the right one and to say.

86
00:06:55,010 --> 00:07:06,290
So if it's equal to zero then we know that the dark is selected and say Avatar type is equal to adopt

87
00:07:06,620 --> 00:07:14,600
dark and else the Avatar type is equal to dot light.

88
00:07:14,840 --> 00:07:23,630
All right so we are changing the variable here based on which segment control is selected.

89
00:07:24,080 --> 00:07:32,120
And then after we have set that then we're going to say collection view dot reload data and that will

90
00:07:32,210 --> 00:07:39,510
call all of these collection view functions again and this time when we pass and so that configure cell

91
00:07:40,100 --> 00:07:48,460
if we have selected the light segment control then the light type of Avatar type will be passed into

92
00:07:48,500 --> 00:07:53,850
the configure cell and instead of the loading the dark Avatar images all of the lines are right.

93
00:07:54,020 --> 00:07:56,290
So to see that in action is go ahead and run it.

94
00:07:56,620 --> 00:08:00,760
I am going to open up our menu press log in.

95
00:08:00,840 --> 00:08:02,020
Dont have an account.

96
00:08:02,150 --> 00:08:03,800
Click on the Avatar.

97
00:08:04,010 --> 00:08:06,260
And hey there we go.

98
00:08:06,380 --> 00:08:09,450
So now we are toggling between the dark and light.

99
00:08:09,470 --> 00:08:20,630
So that looks awesome but this flow doesn't look great how it's set up and it doesn't look awesome on

100
00:08:21,410 --> 00:08:27,810
both of the larger and smaller files legacies of the plus so it doesn't look awesome on the 7 or the

101
00:08:28,140 --> 00:08:29,270
sizes either.

102
00:08:29,270 --> 00:08:32,410
So let's go ahead and let's try and fix that.

103
00:08:32,420 --> 00:08:41,310
So one of the functions that we get here is if you type size four item at let's see I think we won this

104
00:08:41,320 --> 00:08:44,190
round here size 4 item at.

105
00:08:44,330 --> 00:08:44,690
All right.

106
00:08:44,750 --> 00:08:52,400
And we can type in a and return a C-g size.

107
00:08:52,400 --> 00:08:58,040
But I think what we want to do is we're going to be we're going to do a little bit of math and some

108
00:08:58,040 --> 00:09:01,430
coding here to make it more fluid.

109
00:09:01,430 --> 00:09:01,950
All right.

110
00:09:02,150 --> 00:09:08,220
So we have to take into account the screen sizes from the SE all the way up to the seven plus right.

111
00:09:08,450 --> 00:09:16,370
And so we want the sizes of the cells and even how many columns to be dynamic based on which screen

112
00:09:16,650 --> 00:09:17,280
we're using.

113
00:09:17,280 --> 00:09:25,830
All right so we're going to calculate the number of columns and the size of the individual cells based

114
00:09:25,830 --> 00:09:27,100
on the screen size.

115
00:09:27,100 --> 00:09:27,600
All right.

116
00:09:27,870 --> 00:09:34,140
So what we're going to do is we're going to say we're create a variable here called number of columns.

117
00:09:34,290 --> 00:09:34,960
OK.

118
00:09:35,610 --> 00:09:38,460
And that's going to be a see you float.

119
00:09:38,970 --> 00:09:52,100
And we're going to start out with three but we're going to say if the UI screen dot main dot bounds

120
00:09:52,120 --> 00:10:04,550
dot width is greater than 320 then let's go ahead and set the number of columns equal to 4.

121
00:10:04,850 --> 00:10:05,400
OK.

122
00:10:05,610 --> 00:10:09,700
So we'll talk about this basically right here.

123
00:10:09,720 --> 00:10:13,290
This is just getting the width of the screen size screen.

124
00:10:13,320 --> 00:10:21,360
I mean that balanced out with just getting the width of the current screen and 320 that is the width

125
00:10:21,390 --> 00:10:24,270
of the smallest iPhone size.

126
00:10:24,270 --> 00:10:25,810
The iPhone s e.

127
00:10:25,950 --> 00:10:29,530
So if so we're saying there's going to be three columns.

128
00:10:29,580 --> 00:10:30,920
If it's an iPhone.

129
00:10:31,320 --> 00:10:38,640
If it's anything bigger iPhone 6 or 7 or any of the pluses then we're going to go with for cons just

130
00:10:38,640 --> 00:10:40,800
because that will look a little bit better.

131
00:10:40,800 --> 00:10:41,450
All right.

132
00:10:41,670 --> 00:10:46,710
So now we need to calculate the size of the width and height of our cells.

133
00:10:46,710 --> 00:10:47,300
OK.

134
00:10:47,550 --> 00:10:59,010
So what we're going to say let the space between cells of type C.G. float and so that equal to 10 and

135
00:10:59,010 --> 00:11:05,040
you may be wondering why we're we're we're explicitly declaring all of these numbers to be of type float

136
00:11:05,430 --> 00:11:10,700
and that's because if you see here the C-g size we're going to be required to.

137
00:11:11,230 --> 00:11:17,280
But when we do math all of the numbers we want them all to be of the same type so that everything works

138
00:11:17,280 --> 00:11:18,240
out OK.

139
00:11:18,960 --> 00:11:22,550
So I'm going to pull this up here again.

140
00:11:22,680 --> 00:11:29,340
Our simulator just to kind of will have a visual aid will I explain the math that we're going to be

141
00:11:29,400 --> 00:11:31,220
looking at here.

142
00:11:31,230 --> 00:11:31,450
All right.

143
00:11:31,470 --> 00:11:41,840
So this space between cells variable is this guy right here so this gap as well as this one right here.

144
00:11:41,940 --> 00:11:51,360
And so what we're what our goal is to calculate how tall and how wide we want each of these cells to

145
00:11:51,360 --> 00:11:54,000
be based on the screen with him.

146
00:11:54,240 --> 00:11:59,320
And so we're going to need to know the gap that we want between the cells.

147
00:11:59,630 --> 00:12:07,670
And we also need to know the inset distance which I said was this padding on the sides so we said that

148
00:12:07,680 --> 00:12:14,960
to be equal to 20 in case we're going to say let go and call that padding.

149
00:12:15,540 --> 00:12:24,750
And that's also of type C.G. float and that is equal to 40 because it is 20 on both sides.

150
00:12:24,750 --> 00:12:30,900
Basically we're going to be eliminating everything that is not purely clutching view sell OK.

151
00:12:31,230 --> 00:12:37,920
And then we're going to say let cell dimension equal.

152
00:12:38,310 --> 00:12:42,980
And so we're going to say a couple of parentheses here.

153
00:12:43,010 --> 00:12:52,800
We're going to take collection be you dot bounds dot with minus the inset her size minus the padding

154
00:12:54,210 --> 00:13:05,810
minus the number of columns minus one times the space between cells.

155
00:13:06,420 --> 00:13:16,060
All of that divided by the number of columns I need space right here.

156
00:13:16,120 --> 00:13:16,300
All right.

157
00:13:16,300 --> 00:13:20,040
So just kind of try to take a look at that again.

158
00:13:20,120 --> 00:13:26,470
So let me see if I can find a place for this that will fit closer left panel.

159
00:13:28,860 --> 00:13:29,120
OK.

160
00:13:29,130 --> 00:13:38,600
So we're saying we're crying like I said we're trying to get the smaller know I'll get you.

161
00:13:39,520 --> 00:13:44,280
So we're trying to get the cell width and height mainly the the width.

162
00:13:44,300 --> 00:13:44,990
OK.

163
00:13:45,260 --> 00:13:46,790
Because we're looking at squares here.

164
00:13:46,970 --> 00:13:53,420
All right so we're saying we're getting the space between the cells and we're getting the padding which

165
00:13:53,420 --> 00:13:54,250
is 40.

166
00:13:54,350 --> 00:13:56,980
So we're starting out saying get the entire width.

167
00:13:57,110 --> 00:13:59,760
We're going to subtract from that the padding.

168
00:13:59,960 --> 00:14:00,560
OK.

169
00:14:00,770 --> 00:14:08,760
So that's gone then we're going to subtract from that the this gap right here.

170
00:14:09,080 --> 00:14:09,950
OK.

171
00:14:10,670 --> 00:14:15,440
And so all that leaves is this distance this with and this.

172
00:14:15,800 --> 00:14:19,730
And so we're just going to take that amount and we're going to divide that by the number of columns

173
00:14:19,970 --> 00:14:25,970
and that will give us the width of each individual cell based on the number of columns the space between

174
00:14:25,970 --> 00:14:27,250
the cells and the padding.

175
00:14:27,320 --> 00:14:27,960
All right.

176
00:14:28,250 --> 00:14:37,110
So then all we have to do is say return a C.G. size.

177
00:14:37,140 --> 00:14:45,060
And that is going to be with cell dimension and height cell dimension.

178
00:14:45,090 --> 00:14:53,990
All right so when to say that and I'm going to run this on an iPhone 7 plus 6 s and s e and I'll just

179
00:14:54,410 --> 00:14:57,020
come back to you when those are all back up.

180
00:14:57,020 --> 00:14:57,470
All right.

181
00:14:57,470 --> 00:15:00,950
So we got all of all three of them up here.

182
00:15:00,950 --> 00:15:06,140
The seven plus a 6 s and s e.

183
00:15:06,230 --> 00:15:09,140
And you can see that we have they all look great.

184
00:15:09,320 --> 00:15:12,300
We have three rows in the.

185
00:15:12,660 --> 00:15:21,200
We have four in the plus and the regular size and each of the sizes the all are dynamically size so

186
00:15:21,470 --> 00:15:24,240
you don't have any weird spacing.

187
00:15:24,240 --> 00:15:27,890
And so yeah it looks it looks real good guys.

188
00:15:27,890 --> 00:15:33,080
All right so I'm going to go ahead and stop that and open up our right pain again.

189
00:15:33,310 --> 00:15:35,960
I said the last thing to do is select an avatar.

190
00:15:35,960 --> 00:15:42,520
All right so what we're going to need to do for that is if we are going to call the function did select.

191
00:15:42,740 --> 00:15:43,010
All right.

192
00:15:43,070 --> 00:15:45,020
So what happens when we cook it.

193
00:15:45,080 --> 00:15:53,030
We are going to save whichever one was selected as the user's avatar name.

194
00:15:53,030 --> 00:15:53,480
All right.

195
00:15:53,660 --> 00:16:07,640
So if the Avatar type is equal to that dark when we selected the user data service instance that said

196
00:16:07,730 --> 00:16:10,600
avatar name memory I said we're going to need this.

197
00:16:10,690 --> 00:16:12,470
We were going to set that equal to

198
00:16:14,920 --> 00:16:18,150
dark and you're going to string interpolate.

199
00:16:18,310 --> 00:16:32,620
And we're going to say Index path that item right else the user data service instance does said avatar

200
00:16:32,680 --> 00:16:46,060
name will be light and then string interpolate with the index path dot item right there you go.

201
00:16:46,150 --> 00:16:55,300
And then once that's done we are going to just self-doubt this Miss animated as true and completion

202
00:16:55,360 --> 00:16:56,610
is new.

203
00:16:56,890 --> 00:17:02,430
So when we click on it we are saving to the user data service.

204
00:17:02,800 --> 00:17:09,760
Let's jump over here and jump over here to the user data service we're saving to the avatar name property.

205
00:17:09,910 --> 00:17:13,840
Whichever one we click on basically and then we are just dismissing.

206
00:17:14,110 --> 00:17:14,380
All right.

207
00:17:14,410 --> 00:17:17,380
And then what we want to do is win.

208
00:17:17,380 --> 00:17:23,440
So we're going to dismiss back to the create account Visi and what we want to do is when we get back

209
00:17:23,440 --> 00:17:30,400
here we want to update the profile or the users image to the one that we just selected.

210
00:17:30,580 --> 00:17:36,880
So we're Reseda going to see on view did appear and we're going to do a check because when we initialize

211
00:17:36,880 --> 00:17:43,190
the user data service we set the avatar name just equal to an empty string.

212
00:17:43,210 --> 00:17:50,740
So what we're going to do is say if user data service for instance dot have a turtle name is not still

213
00:17:50,770 --> 00:17:57,640
equal to that empty string meaning we have selected one from the avatar picture then we're going to

214
00:17:57,640 --> 00:18:02,960
set the user image that image equal to that image.

215
00:18:02,980 --> 00:18:05,200
So instead you image name and

216
00:18:08,040 --> 00:18:15,870
and the name of the image is used to do a service that instance that avatar name.

217
00:18:15,900 --> 00:18:23,580
And then we are also going to set the local variable for Avatar name which we use here in our create

218
00:18:23,580 --> 00:18:24,990
user function.

219
00:18:24,990 --> 00:18:25,470
OK.

220
00:18:25,680 --> 00:18:40,300
So when I say avatar name is equal to I can use a data service that instance that Avatar avatar name

221
00:18:42,230 --> 00:18:48,380
and there we go so let's say that and run it I'm going to put this back up on the front 7 and run that

222
00:18:48,410 --> 00:18:50,480
and see how that works.

223
00:18:51,070 --> 00:18:55,500
It's See here we go and go on to have an account.

224
00:18:55,520 --> 00:18:58,940
Click here and we're going to select this shark.

225
00:18:58,970 --> 00:19:00,890
And hey there we go.

226
00:19:00,890 --> 00:19:01,870
All right.

227
00:19:04,190 --> 00:19:05,180
Awesome.

228
00:19:08,260 --> 00:19:10,240
We select one of these light ones though.

229
00:19:10,640 --> 00:19:17,790
It's kind of hard to kind of hard to see it but we'll fix that here in the next videos.

230
00:19:18,370 --> 00:19:20,880
Go ahead and call it good on this one.

231
00:19:20,990 --> 00:19:27,630
So in this video we set out to finish up our avatar picture Visi and that we did.

232
00:19:27,650 --> 00:19:31,720
Now we can select our avatars.

233
00:19:31,740 --> 00:19:38,690
We can we've got the sizing right and dynamic for any of the iPhone sizes.

234
00:19:38,740 --> 00:19:41,580
And yeah it looks really really good so far.

235
00:19:41,660 --> 00:19:43,990
So you guys are doing awesome making great progress.

236
00:19:44,040 --> 00:19:51,800
Let me go ahead and just save our progress here in terminal 4 get sick get commit to that.

237
00:19:52,050 --> 00:20:00,540
And this is less than 14 and in the next lesson we're going to work on that background color as well

238
00:20:00,540 --> 00:20:01,420
as some other cool things.

239
00:20:01,420 --> 00:20:01,710
All right.

240
00:20:01,710 --> 00:20:03,910
So I will see you then.