1
00:00:07,960 --> 00:00:09,100
Hey buddy what's going on.

2
00:00:09,100 --> 00:00:11,280
This is Caleb with slopes dot com.

3
00:00:11,290 --> 00:00:16,180
And in this video we're going to set up our trending repo cell subclass.

4
00:00:16,180 --> 00:00:21,670
We already built the trending repots cell in Interface Builder but now we're going to build the subclassed

5
00:00:21,670 --> 00:00:27,310
file and we're going to connect up the IP outlets and set up a function to configure them the way that

6
00:00:27,310 --> 00:00:27,760
we need to.

7
00:00:27,760 --> 00:00:35,830
So let's go ahead and let's pull open our X code project Whyalla and in the view file or The View group

8
00:00:35,890 --> 00:00:36,520
my bad.

9
00:00:36,730 --> 00:00:44,120
Go ahead and right click click new file Cocco touch class and set the subclass to be UI.

10
00:00:44,290 --> 00:00:46,460
Table View cell.

11
00:00:46,510 --> 00:00:49,980
We're going to call this trending repo cell.

12
00:00:50,320 --> 00:00:52,250
And of course the language is swift.

13
00:00:52,270 --> 00:00:56,850
Of course this is the swift course wouldn't make sense to do Objective-C anyway.

14
00:00:56,860 --> 00:00:58,420
Go ahead and click next.

15
00:00:58,480 --> 00:01:03,430
Then go ahead and save it into the view group like so.

16
00:01:03,430 --> 00:01:04,340
And here we go.

17
00:01:04,570 --> 00:01:10,900
So what we're going to need is we're going to go ahead and actually get rid of this Babai and we're

18
00:01:10,900 --> 00:01:15,040
going to go ahead and think what do we need here.

19
00:01:15,100 --> 00:01:17,240
How are we going to set up our cell first.

20
00:01:17,260 --> 00:01:23,920
We're going to connect them outlets then we're going to set up the custom appearance of this cell the

21
00:01:23,920 --> 00:01:26,610
way that it's supposed to look.

22
00:01:26,950 --> 00:01:27,890
And you know what.

23
00:01:28,030 --> 00:01:29,260
Let's dive into it now.

24
00:01:29,260 --> 00:01:34,260
Let's go to our main storyboard and let's link up our elements.

25
00:01:34,270 --> 00:01:34,500
OK.

26
00:01:34,510 --> 00:01:38,850
So penélope and the assistant editor and there is our cell right here.

27
00:01:38,860 --> 00:01:40,420
Beautiful.

28
00:01:40,420 --> 00:01:41,020
So you know what.

29
00:01:41,020 --> 00:01:46,300
Actually before we move on we need to set the identity of this table view cell to actually have the

30
00:01:46,300 --> 00:01:47,700
proper identity.

31
00:01:47,710 --> 00:01:50,640
So table cell is here.

32
00:01:50,950 --> 00:01:55,720
And let's go ahead and click on the identity inspector and go ahead and set it to be trending Ribault

33
00:01:55,720 --> 00:01:56,890
cell.

34
00:01:56,890 --> 00:02:02,650
Now we're going to go ahead and copy this and then go to the attributes inspector and for the reuse

35
00:02:02,650 --> 00:02:06,630
identifier we're going to paste that in but lowercase t ify.

36
00:02:06,640 --> 00:02:11,500
That's not a real word but we're going to change the T to a lowercase T and press ENTER that'll be the

37
00:02:11,500 --> 00:02:15,270
identifier we use when we dequeue the cell.

38
00:02:15,280 --> 00:02:22,950
So now we can go ahead and click on our trending reposeful go to automatic and it's not showing up yet.

39
00:02:22,960 --> 00:02:27,360
As you can tell that's not good but we can go into manual.

40
00:02:27,640 --> 00:02:30,980
Maybe maybe not but C's Is it going to let us.

41
00:02:30,980 --> 00:02:31,360
There we go.

42
00:02:31,360 --> 00:02:34,380
Versey app versey app view trending Ribault cell.

43
00:02:34,420 --> 00:02:34,980
OK.

44
00:02:35,200 --> 00:02:38,920
Believe it or not we actually can connect these two here.

45
00:02:38,920 --> 00:02:43,180
Sometimes it just doesn't show up unless you build or clean.

46
00:02:43,180 --> 00:02:49,050
So let's go ahead and let's set up our Iby outlets by starting with the image view.

47
00:02:49,090 --> 00:02:53,140
Let's go ahead and click on the image view if to go in a couple of layers there.

48
00:02:53,300 --> 00:02:59,110
And right click and drag and we'll just call this repo image view.

49
00:02:59,110 --> 00:03:00,310
Beautiful.

50
00:03:00,310 --> 00:03:03,810
Next up let's go ahead and set up the repo name label.

51
00:03:03,990 --> 00:03:08,760
Like so Ribault name label connect.

52
00:03:08,770 --> 00:03:10,950
Let's do the description label.

53
00:03:11,320 --> 00:03:16,900
Ribault description label we can just use abbreviations that's fine.

54
00:03:17,050 --> 00:03:21,810
We can go ahead and set the little label here.

55
00:03:21,910 --> 00:03:27,580
OK go ahead and right click and drag and that's going to be a number of forks.

56
00:03:27,810 --> 00:03:28,210
Whoops.

57
00:03:28,210 --> 00:03:28,720
Label.

58
00:03:28,750 --> 00:03:32,440
Make sure you name it properly number of forks label.

59
00:03:32,440 --> 00:03:36,530
This will be the language label.

60
00:03:37,270 --> 00:03:40,370
And this one will be contributed.

61
00:03:40,490 --> 00:03:41,320
I can't speak.

62
00:03:41,330 --> 00:03:42,630
Contribute.

63
00:03:42,640 --> 00:03:43,380
Tours.

64
00:03:43,570 --> 00:03:44,620
Label.

65
00:03:44,860 --> 00:03:45,410
Beautiful.

66
00:03:45,400 --> 00:03:46,900
That looks awesome.

67
00:03:47,110 --> 00:03:49,960
And there's one last thing that we got to do.

68
00:03:49,960 --> 00:03:58,150
We're going to head in we're going to go ahead and basically set up this blue view in the back to be

69
00:03:58,150 --> 00:04:03,120
a back view and we're going to actually set up the back view to have a nice drop shadow behind it.

70
00:04:03,130 --> 00:04:08,560
So from this view we're going to go ahead and right click and drag and we'll just call this back view

71
00:04:09,280 --> 00:04:10,790
just like that.

72
00:04:10,810 --> 00:04:11,740
That's pretty sweet.

73
00:04:12,130 --> 00:04:18,220
What we're going to do next is we're going to go ahead and right click from our button our view read

74
00:04:18,220 --> 00:04:29,310
me button and let's go ahead and drop that there will call this view read me button like so real and

75
00:04:29,400 --> 00:04:30,610
that looks great.

76
00:04:30,630 --> 00:04:33,750
So let's think we have our outlets all connected.

77
00:04:33,750 --> 00:04:35,010
I don't think we missed anything.

78
00:04:35,010 --> 00:04:40,370
We have all of our labels we have our back view and our button so that looks pretty great.

79
00:04:40,470 --> 00:04:45,090
Let's go ahead and let's collapse the assistant editor and just go straight into the trending repo cell

80
00:04:45,090 --> 00:04:46,710
subclass.

81
00:04:46,710 --> 00:04:51,810
So now we're going to do actually is we're going to set up a function called configure cell that we're

82
00:04:51,810 --> 00:04:56,130
going to call when we want to pass in data to configure the cell.

83
00:04:56,130 --> 00:05:00,140
Obviously it's in the name and we can do that beneath here.

84
00:05:00,180 --> 00:05:08,370
We can go ahead and call phunk configure cell and we need to think what are we going to pass in to each

85
00:05:08,460 --> 00:05:09,290
cell.

86
00:05:09,450 --> 00:05:16,010
Well repo data right repository data from get hub and thankfully in the last video we set up our repo

87
00:05:16,010 --> 00:05:16,880
subclass.

88
00:05:16,980 --> 00:05:20,270
So sorry not a reprieve subclassed but our repo model.

89
00:05:20,310 --> 00:05:25,990
And so when we configure the cell we can pass in a repo type repo.

90
00:05:26,220 --> 00:05:28,260
That's a class we've already created.

91
00:05:28,590 --> 00:05:34,550
And in order to continue setting this up we actually look inside repo to see what we have.

92
00:05:34,800 --> 00:05:43,230
We've got an image name description fork's language contributors and repo you r l k lots of things to

93
00:05:43,230 --> 00:05:43,940
think about.

94
00:05:44,160 --> 00:05:46,530
But we can go ahead and set up our image view.

95
00:05:46,530 --> 00:05:49,560
So let's go ahead and type Ribault image view.

96
00:05:49,830 --> 00:05:53,600
Image equals repo image.

97
00:05:53,700 --> 00:05:56,660
It's of type II image so we can just set that directly.

98
00:05:56,940 --> 00:06:04,560
Next we have Ribault name label and we need to set the text property of that to be whatever gets passed

99
00:06:04,560 --> 00:06:05,360
in from repo.

100
00:06:05,370 --> 00:06:12,030
But we have one here repo that name beautiful next to repo description labeled dot text.

101
00:06:12,030 --> 00:06:20,290
We're going to set to Ribault dot description as you may have guessed what else we have of number of

102
00:06:20,310 --> 00:06:27,990
fork's label text but look a number of forks in our repo subclass here comes in as an int.

103
00:06:28,140 --> 00:06:33,660
So we need to cast it as a string and we can do that really easily by calling string.

104
00:06:34,080 --> 00:06:39,560
And then you'll notice inside of this there is something called String describing.

105
00:06:39,660 --> 00:06:45,140
And we can pass it a subject which is really anything and it will encapsulate that as a string.

106
00:06:45,150 --> 00:06:52,800
So we can create a string describing Ribault dot number of forks and it will cast that as a string and

107
00:06:52,800 --> 00:06:55,720
pass it into our label which is really neat.

108
00:06:55,740 --> 00:07:02,140
Next we need to do language label text and that's going to be equal to repot dot language.

109
00:07:02,160 --> 00:07:09,030
Easy peasy last we have contributor's label dot text and we're going to go ahead and set that to be

110
00:07:09,030 --> 00:07:10,370
equal to Ribault.

111
00:07:10,450 --> 00:07:14,540
Doc contributor's although look at that it's coming in as an int.

112
00:07:14,550 --> 00:07:20,850
So we need to go ahead and cut this using command X and type String describing.

113
00:07:20,850 --> 00:07:26,490
I'm just going to type it manually and pass in repo number of contributors and we get that as a string

114
00:07:26,790 --> 00:07:28,140
supercool.

115
00:07:28,140 --> 00:07:33,900
So this is great and all but we have one more property inside that we have not yet used but we're going

116
00:07:33,900 --> 00:07:36,440
to need we have a u r l right.

117
00:07:36,450 --> 00:07:43,480
That's the L to the repo but we don't have a way of using it we're not going to display it on the cell.

118
00:07:43,500 --> 00:07:47,780
We're not going to show it but we do need it for sure.

119
00:07:47,910 --> 00:07:54,810
Because when we tap on that view read me button we're going to want it to be able to present the Safari

120
00:07:54,870 --> 00:07:56,310
Web you controller.

121
00:07:56,310 --> 00:08:01,710
So I'm going to create a property inside our subclass here and we're basically going to be able to set

122
00:08:01,710 --> 00:08:06,290
the value of it to the value that comes in from the repo and we configure the cell.

123
00:08:06,290 --> 00:08:08,840
So go ahead and just type private.

124
00:08:08,910 --> 00:08:14,300
Private var Ribault you Arel of type string.

125
00:08:14,580 --> 00:08:17,840
And we're going to make it optional because we've not yet instantiated it.

126
00:08:17,850 --> 00:08:25,200
But that's what we're going to do in configure cell so go ahead and just call Ribault Yoro equals repo

127
00:08:25,720 --> 00:08:28,360
that Ribault you IRL and it's now set.

128
00:08:28,410 --> 00:08:29,430
So it's good to go.

129
00:08:29,910 --> 00:08:36,120
What else let's think we have this all ready to configure all of the visible elements become configured

130
00:08:36,660 --> 00:08:43,010
with the U R L becomes set let's think is there anything else we're missing here.

131
00:08:43,290 --> 00:08:45,230
Hmm.

132
00:08:46,290 --> 00:08:51,390
Well you know we could do we could definitely set up our back view to have a shadow because that is

133
00:08:51,390 --> 00:08:57,180
needed and in order to do that we're going to go ahead and call a function or rather override a function

134
00:08:57,180 --> 00:08:58,530
called Lay out.

135
00:08:58,550 --> 00:09:00,000
Subdues OK.

136
00:09:00,270 --> 00:09:05,130
And this is going to lay out the subdues right because all of these elements are sub views of our trending

137
00:09:05,130 --> 00:09:06,200
repots cell.

138
00:09:06,210 --> 00:09:10,320
So this is a great place to set up a custom view customization.

139
00:09:10,320 --> 00:09:18,230
So let's go ahead and let's call back view and we're going to give it a corner radius.

140
00:09:18,340 --> 00:09:23,230
So let's go ahead and let's call back few and we're going to give it a shadow so let's go ahead and

141
00:09:23,230 --> 00:09:26,160
type dot shadow color.

142
00:09:26,350 --> 00:09:26,970
Oops sorry.

143
00:09:26,980 --> 00:09:33,580
We need to access its layer property so that you dot layer shadow color and we can use a color literal

144
00:09:34,060 --> 00:09:38,140
and I'm going to use black because that will give us a nice dark shadow.

145
00:09:38,140 --> 00:09:39,510
Perfect.

146
00:09:39,520 --> 00:09:40,610
Next we're going to call back.

147
00:09:40,630 --> 00:09:47,170
You layer dot shadow opacity and I don't want it to be super intense so I'm actually going to set it

148
00:09:47,170 --> 00:09:50,590
to be zero point to five twenty five percent.

149
00:09:50,890 --> 00:09:59,440
After that we'll do back view dot layer dot shadow radius and that's going to set to the kind of the

150
00:09:59,440 --> 00:10:04,630
distance of the shadow from the surface below it and the radius is only going to be 5.0.

151
00:10:04,690 --> 00:10:07,670
Not super big but big enough.

152
00:10:07,750 --> 00:10:15,870
And then we're going to go ahead and set back a few dot layer dot shadow offset to be whereas it has

153
00:10:16,650 --> 00:10:22,430
to be an instance of as you could tell as well you can't really tell let me do that again.

154
00:10:22,470 --> 00:10:25,340
Offset is of type C.G. size.

155
00:10:25,500 --> 00:10:28,740
So we need to set it to be equal to C.G. size.

156
00:10:28,950 --> 00:10:34,590
And we're going to go ahead and create one with a with zero and a height of zero meaning it's going

157
00:10:34,590 --> 00:10:36,240
to be offset zero.

158
00:10:36,240 --> 00:10:40,320
It's only going to be directly beneath the rectangle.

159
00:10:40,320 --> 00:10:42,140
All right so let's think.

160
00:10:42,150 --> 00:10:44,740
Do we have everything we need here.

161
00:10:44,850 --> 00:10:46,730
I believe we do.

162
00:10:47,040 --> 00:10:47,580
But you know what.

163
00:10:47,580 --> 00:10:49,790
Actually let's go look at storyboard.

164
00:10:49,980 --> 00:10:53,210
We want it to have a nice rounded corner.

165
00:10:53,220 --> 00:10:53,830
Right.

166
00:10:53,850 --> 00:10:55,730
It has a nice rounded corner in this app.

167
00:10:55,740 --> 00:10:57,210
It does not yet here.

168
00:10:57,210 --> 00:11:03,670
So we're going to go ahead and actually customize that at the beginning by typing back view dot layer

169
00:11:03,670 --> 00:11:08,420
dot corner radius and set that to be equal to 15.

170
00:11:08,420 --> 00:11:14,720
All right that's the corner radius that I found worked really well in the simulator 15.

171
00:11:14,730 --> 00:11:22,200
So what we can do is we can go ahead and let's just set up our cell or let's just set up our table view

172
00:11:22,200 --> 00:11:25,690
rather to return one cell.

173
00:11:25,800 --> 00:11:29,100
We're going to set it up manually and then we're going to actually go back and delete it later but I

174
00:11:29,100 --> 00:11:30,080
just want to see if this worked.

175
00:11:30,080 --> 00:11:31,290
I wanna see how it looks.

176
00:11:31,320 --> 00:11:42,420
So we're going to go ahead and conform to Table View delegate and table view data source like so in

177
00:11:42,430 --> 00:11:44,810
feuded load we need to set up table view.

178
00:11:44,910 --> 00:11:46,770
Delegate to be equal to self.

179
00:11:46,770 --> 00:11:51,780
Meaning this view controller we need to set table view datasource also to be self.

180
00:11:51,800 --> 00:11:53,300
Okay that's just what you got to do.

181
00:11:53,580 --> 00:11:56,220
And inside the class we need to call three functions.

182
00:11:56,260 --> 00:12:03,510
A number of sections in table view number of items or a certain number of rows in Section and cell for

183
00:12:03,510 --> 00:12:04,740
road index path.

184
00:12:04,770 --> 00:12:07,910
Those are the three required ones for Table View.

185
00:12:07,950 --> 00:12:14,540
Now for a number of sections we're just going to return one section of rows a number of rows in section

186
00:12:14,550 --> 00:12:18,180
we're going to go ahead and call return 1.

187
00:12:18,210 --> 00:12:23,440
Just one cell and then for self-growth index path we're going to go ahead and create a cell.

188
00:12:23,550 --> 00:12:24,510
And it's really easy.

189
00:12:24,510 --> 00:12:31,120
All we need to do is basically to create a cell configure it and then return that cell.

190
00:12:31,170 --> 00:12:34,290
And since we're only doing one we can very easily do this.

191
00:12:34,290 --> 00:12:40,760
So go ahead and type guard let sell and we're using guard let just because we will be queuing reusable

192
00:12:40,770 --> 00:12:43,290
cells that are optional it's just the way to be safe.

193
00:12:43,290 --> 00:12:45,540
So guard let's sell equals.

194
00:12:45,960 --> 00:12:47,190
Table View.

195
00:12:47,500 --> 00:12:55,110
Dequeue it's hard to spell reusable cell with identifier and if you remember our identifier is trending

196
00:12:55,470 --> 00:12:58,350
Ribault cell with a capital C..

197
00:12:58,560 --> 00:13:01,120
We set that in Interface Builder earlier.

198
00:13:01,140 --> 00:13:07,080
Now the index path we can access here easily from the index path that is given in the function.

199
00:13:07,620 --> 00:13:13,350
And so what we're going to actually do is this dequeue reusable cell function only Dijk Hughes a table

200
00:13:13,350 --> 00:13:13,870
view cell.

201
00:13:13,890 --> 00:13:15,570
But we have a custom subclass.

202
00:13:15,570 --> 00:13:21,030
So we need to forecast it optionally as a trending Ribault cell.

203
00:13:21,870 --> 00:13:27,570
Now with guard light you need to provide basically a way for it to escape in case we cannot successfully

204
00:13:27,570 --> 00:13:28,380
create the cell.

205
00:13:28,380 --> 00:13:34,650
So we have guard left and then we can say else like if that can't work we're just going to go ahead

206
00:13:34,680 --> 00:13:38,860
and return a blank table view cell like so.

207
00:13:39,420 --> 00:13:44,860
So now we basically have a constant here that will return a non-optional constant.

208
00:13:45,240 --> 00:13:50,710
If we can successfully do it otherwise it will return AUI table you sell just a blank one.

209
00:13:50,850 --> 00:13:51,870
Which is perfect.

210
00:13:51,900 --> 00:13:57,360
So now we can go ahead and call sell that configure cell and we can pass in a repo.

211
00:13:57,360 --> 00:14:00,400
But we should generate a static repo first.

212
00:14:00,570 --> 00:14:07,470
So let's just go ahead and type let Ribault equals repo and let's go ahead and just pass in an image

213
00:14:07,470 --> 00:14:08,840
which will do that in a second.

214
00:14:08,840 --> 00:14:11,700
But let's just pass in a string here or let's call it.

215
00:14:11,700 --> 00:14:23,090
You know Swift the description you know Apple's programming language.

216
00:14:23,100 --> 00:14:23,790
All right.

217
00:14:23,880 --> 00:14:30,390
Number of forks let's say 356 language we will say Swift of course.

218
00:14:30,540 --> 00:14:33,240
Number of contributors let's say 562.

219
00:14:33,450 --> 00:14:37,890
And the repo you are will just say debited to Google dot com.

220
00:14:37,920 --> 00:14:43,770
I'm not actually putting a real repo there but for the image one thing we can do is we can just go look

221
00:14:43,770 --> 00:14:49,740
at our assets and this is just for now I'm just going to pass in the search icon case I'm going to copy

222
00:14:49,740 --> 00:14:56,460
that name actually go into trending feed Visi and I'll just say you I image but if you look in our image

223
00:14:56,460 --> 00:15:02,370
if we initialize a UI image you can call one called named and you can just give the name of that file.

224
00:15:02,370 --> 00:15:08,040
So we're going to go ahead and actually delete this initialiser and just use you I image named.

225
00:15:08,040 --> 00:15:10,190
Now I'll paste in the name there.

226
00:15:10,530 --> 00:15:15,930
And we are going to have to force unwrap it because basically we're saying there is a file name this.

227
00:15:15,930 --> 00:15:17,940
So that's why we have to force unwrap it.

228
00:15:18,090 --> 00:15:22,780
But now we have an instance of Repo that we can pass into our cell just like that.

229
00:15:23,130 --> 00:15:29,040
And then at the very end after we've configured all the data we can go ahead and return the cell.

230
00:15:29,040 --> 00:15:29,960
Easy as that.

231
00:15:30,270 --> 00:15:33,510
And of course you'll see that a return error it goes away.

232
00:15:33,510 --> 00:15:35,490
So I'm pretty excited.

233
00:15:35,490 --> 00:15:42,810
I think we should go see if this works although you know what we should definitely call table view reload

234
00:15:42,810 --> 00:15:43,100
data.

235
00:15:43,110 --> 00:15:44,340
Otherwise it's not going to reload.

236
00:15:44,340 --> 00:15:49,620
We haven't set up our poll to refresh indicator yet which we will which is very cool but let's go ahead

237
00:15:49,620 --> 00:15:54,180
and let's build and run this to the iPhone 7 simulator and let's see how we did.

238
00:15:54,870 --> 00:15:56,460
It's going to build and run.

239
00:15:56,460 --> 00:16:02,480
Shouldn't take too long to build do to do didn't do beautiful.

240
00:16:02,500 --> 00:16:05,740
Sorry I just thought you'd like some elevator music there while we were waiting.

241
00:16:06,000 --> 00:16:07,260
And let's see how he did.

242
00:16:09,300 --> 00:16:12,740
The app is opening it's taking its time.

243
00:16:12,750 --> 00:16:13,250
Ooh.

244
00:16:13,320 --> 00:16:14,670
Hey hey look at that.

245
00:16:14,670 --> 00:16:16,140
That is awesome.

246
00:16:16,140 --> 00:16:20,080
We have a nice border not a border but a nice chateau.

247
00:16:20,100 --> 00:16:21,180
We've got an image.

248
00:16:21,180 --> 00:16:23,100
We've got our border here.

249
00:16:23,100 --> 00:16:24,260
This looks awesome.

250
00:16:24,260 --> 00:16:26,470
The language contributors.

251
00:16:26,730 --> 00:16:27,490
That's not good.

252
00:16:27,480 --> 00:16:31,530
We'll get we're going to turn off selection because it doesn't look very good.

253
00:16:31,530 --> 00:16:37,220
Let's actually go ahead and let's stop this and run it again so that we can just see without that a

254
00:16:37,310 --> 00:16:41,340
live selection thing we're going to turn selection off.

255
00:16:41,440 --> 00:16:45,100
But you know what I'm noticing noticing the border does not look great on this button.

256
00:16:45,310 --> 00:16:51,040
So let's go ahead and let's go back to main story board and we're going to actually set this button

257
00:16:51,040 --> 00:16:58,100
maybe to have a wider with maybe of 150 Yeah let's try that.

258
00:16:58,100 --> 00:17:01,500
That should give us a little bit more room on the button.

259
00:17:01,790 --> 00:17:07,140
But you know what I'm noticing this cell is a little bit squashed.

260
00:17:07,400 --> 00:17:07,670
Right.

261
00:17:07,670 --> 00:17:10,000
I don't know if you're noticing that too.

262
00:17:10,080 --> 00:17:11,620
Let's see does that look better.

263
00:17:11,630 --> 00:17:13,190
Looks like it's kind of getting cut off.

264
00:17:13,190 --> 00:17:13,910
That's weird.

265
00:17:13,910 --> 00:17:19,130
Do you notice that we're sort of it's almost like a coming to a point.

266
00:17:19,160 --> 00:17:23,450
And it should be coming to a perfect rounded edge.

267
00:17:23,450 --> 00:17:28,660
Let's go check suit we did in our repots cell.

268
00:17:29,390 --> 00:17:31,220
Oh no that's rounded border button.

269
00:17:31,220 --> 00:17:34,500
We're doing frame height and we're dividing it by two.

270
00:17:34,520 --> 00:17:36,390
Yeah that should be fine.

271
00:17:36,470 --> 00:17:38,540
Maybe I can access the view.

272
00:17:38,560 --> 00:17:38,770
No.

273
00:17:38,770 --> 00:17:39,280
Just a frame.

274
00:17:39,290 --> 00:17:40,490
OK.

275
00:17:40,520 --> 00:17:42,720
So afraid to height divided by two should be good.

276
00:17:42,740 --> 00:17:48,280
Oh you know what I wonder though if the reason for that is because we have not set an explicit height.

277
00:17:48,590 --> 00:17:53,770
Let's see because basically the height is going to be dependent upon the size of the stack view.

278
00:17:54,060 --> 00:17:54,450
Yeah.

279
00:17:54,560 --> 00:17:55,940
So we haven't set an explicit height.

280
00:17:55,940 --> 00:17:57,250
Let's do that as well.

281
00:17:57,290 --> 00:18:00,100
Let's set an explicit height of 40.

282
00:18:00,290 --> 00:18:07,080
And now when we build and run that issue should go away with the corner being a little bit pointed.

283
00:18:07,160 --> 00:18:08,300
It should be perfectly round.

284
00:18:08,300 --> 00:18:10,070
Now let's check to see how he did.

285
00:18:10,380 --> 00:18:10,740
OK.

286
00:18:10,760 --> 00:18:11,300
Beautiful.

287
00:18:11,300 --> 00:18:15,650
You see that there's no more little pointed edge that looks nice but I am a little concerned.

288
00:18:15,650 --> 00:18:19,060
Why this is kind of being squished here.

289
00:18:19,250 --> 00:18:20,300
Let's see.

290
00:18:20,300 --> 00:18:25,460
I wonder if we return to let's try returning to cells.

291
00:18:25,460 --> 00:18:28,210
I just want to see what it looks like.

292
00:18:28,250 --> 00:18:33,600
So what I did is I just basically change one to two because it's going to return two rows in the section.

293
00:18:33,770 --> 00:18:35,260
The same exact cell.

294
00:18:35,670 --> 00:18:36,090
OK.

295
00:18:36,110 --> 00:18:36,430
Yeah.

296
00:18:36,440 --> 00:18:41,840
So it looks like the size of this view is going to be dependent on the size of the image and we do not

297
00:18:41,840 --> 00:18:46,600
want that we want to set an explicit height for this back view like so.

298
00:18:46,760 --> 00:18:50,300
And as you can tell it's just going to stretch out to the size of the cell.

299
00:18:50,300 --> 00:18:53,200
But it appears that the cell is getting squished.

300
00:18:53,210 --> 00:18:55,330
We've set a row height of 400.

301
00:18:55,500 --> 00:18:56,890
But let's look at the table view.

302
00:18:57,170 --> 00:19:01,360
OK so you add the row height is being set automatically so there couldn't be a problem here.

303
00:19:01,370 --> 00:19:06,560
Let's go ahead and let's set it to be explicitly 400 let's build and run and let's make sure that our

304
00:19:06,560 --> 00:19:08,230
cell is not going to get squished again.

305
00:19:08,390 --> 00:19:13,090
And you know what this is actually gigantic So I'm going to try to shrink this down.

306
00:19:13,500 --> 00:19:14,140
OK.

307
00:19:14,140 --> 00:19:16,460
So there we go that's much better.

308
00:19:16,460 --> 00:19:23,540
The cells are nice and tall but we're getting some pretty ugly off centering and squishing here which

309
00:19:23,540 --> 00:19:27,880
is not what we want so let's look in our stack view and let's figure out what the problem is.

310
00:19:28,260 --> 00:19:32,040
OK we have aligned everything to the center which is what we want.

311
00:19:32,090 --> 00:19:34,640
We have filled everything with just Bill.

312
00:19:34,810 --> 00:19:37,140
Let's try filling equally that.

313
00:19:37,340 --> 00:19:38,420
That is not right.

314
00:19:38,420 --> 00:19:40,260
How about Phil proportionally.

315
00:19:40,910 --> 00:19:47,330
Yeah you know what that might work because our image is going to come in at a certain size.

316
00:19:47,350 --> 00:19:49,380
Oh and you know what we're doing scale to fill.

317
00:19:49,420 --> 00:19:54,820
We should be doing aspect fill because the image coming in should fill this view and that should not

318
00:19:54,820 --> 00:19:57,910
change the frame of the image view based on how it comes in.

319
00:19:57,910 --> 00:20:03,090
So let's build and run let's make sure that this fixed the problem and if not then we'll keep tweaking

320
00:20:05,310 --> 00:20:06,510
till we get it right.

321
00:20:06,900 --> 00:20:09,210
OK so let's just think about what we're doing here.

322
00:20:09,210 --> 00:20:11,790
This looks much much better.

323
00:20:11,970 --> 00:20:15,310
OK we're getting the image it's coming in the size it's supposed to.

324
00:20:15,430 --> 00:20:18,360
This is a little bit more spaced out than I want.

325
00:20:18,780 --> 00:20:23,840
So you know what I think maybe let's try changing it back to.

326
00:20:24,120 --> 00:20:27,340
Well let's try equal spacing Let's see how that does.

327
00:20:27,390 --> 00:20:31,070
Sometimes you've got to play around with the stack view until it looks the way you want.

328
00:20:31,110 --> 00:20:36,230
They are known to be finicky and sometimes act and predictably OK.

329
00:20:36,240 --> 00:20:41,130
So that's not good because then everything is sort of the same size equal centering is probably going

330
00:20:41,130 --> 00:20:43,550
to be about the same thing.

331
00:20:43,570 --> 00:20:45,980
Phil looks OK.

332
00:20:46,410 --> 00:20:50,820
You know what since we're doing Phil I'm going to actually just set an explicit height for this to be

333
00:20:50,820 --> 00:20:53,560
180 like so.

334
00:20:54,120 --> 00:21:00,060
And that way when we pass an image and it's always going to be the same size and then everything kind

335
00:21:00,060 --> 00:21:02,910
of depend on that.

336
00:21:02,910 --> 00:21:06,850
That way we can just make sure that our image view comes in the same size the whole time.

337
00:21:07,530 --> 00:21:08,760
Let's see if that fixes our problem.

338
00:21:08,790 --> 00:21:09,200
OK.

339
00:21:09,270 --> 00:21:10,820
Yeah that looks much much better.

340
00:21:10,820 --> 00:21:14,760
So an image that comes in is going to fill this cell like so.

341
00:21:14,940 --> 00:21:17,090
And then the button is here.

342
00:21:17,280 --> 00:21:21,700
The language comes in all the numbers come in properly the description the title.

343
00:21:21,720 --> 00:21:22,770
Awesome guys look at this.

344
00:21:22,770 --> 00:21:24,180
This looks so good.

345
00:21:24,180 --> 00:21:26,300
We have a cell and it's good to go.

346
00:21:26,310 --> 00:21:27,210
So here's what we're going to do.

347
00:21:27,210 --> 00:21:32,180
We're going to go on to the next video and we're going to basically set up our download service.

348
00:21:32,240 --> 00:21:37,070
We're going to set up a singleton class that's going to allow us to start downloading data from the

349
00:21:37,070 --> 00:21:40,710
get hub API we're going to fill this with real data very very soon.

350
00:21:40,710 --> 00:21:41,660
So get excited.

351
00:21:41,730 --> 00:21:44,300
Let's head over to the next video and let's do it now.