1
00:00:08,030 --> 00:00:12,670
Hey everybody this is Caleb with Debb slopes dot com and in this video we're going to build out the

2
00:00:12,670 --> 00:00:13,630
gold cell.

3
00:00:13,660 --> 00:00:18,310
We're going to set up its subclass and we're also going to set up some outlets and actions so that we

4
00:00:18,310 --> 00:00:19,980
can properly interface with it.

5
00:00:19,990 --> 00:00:22,720
So let's get right down to it.

6
00:00:22,810 --> 00:00:29,170
Go ahead and open up your X code project and we're going to go ahead and build out our prototype cell

7
00:00:29,440 --> 00:00:30,790
for our you know table view.

8
00:00:30,790 --> 00:00:35,710
So I don't really like that it's semi translucent that's just because it's hidden.

9
00:00:35,710 --> 00:00:41,020
But for this we're going to go ahead and turn hidden off so that we can see the full thing.

10
00:00:41,020 --> 00:00:45,140
So scroll down after selecting your table view and unstick hidden.

11
00:00:45,400 --> 00:00:48,380
And we'll just we'll turn that back on at the very end when we're done.

12
00:00:48,400 --> 00:00:51,700
For now we're just going to be building out our prototype cell here.

13
00:00:51,700 --> 00:00:53,900
So let's get right down to it.

14
00:00:53,920 --> 00:00:59,680
So we want to display the goal meaning like our description for what we want to accomplish.

15
00:00:59,680 --> 00:01:05,500
We want to display whether it is a short term or long term goal and we also want to display our progress

16
00:01:05,500 --> 00:01:11,110
of how many of our goal we have accomplished so that we have a sense of how close we are to completing

17
00:01:11,110 --> 00:01:11,680
it.

18
00:01:11,680 --> 00:01:14,490
So basically we're just going to be using a lot of UI labels.

19
00:01:14,530 --> 00:01:16,030
Let's go ahead and do that now.

20
00:01:16,150 --> 00:01:23,200
Go ahead and type you I label or you lab as I typed and drag one on K and we're going to go ahead and

21
00:01:23,200 --> 00:01:29,560
I'm going to duplicate it because this will be for the goal this will be for the type and we're going

22
00:01:29,560 --> 00:01:31,510
to go ahead and duplicated again.

23
00:01:31,510 --> 00:01:35,070
This is where the description is going to go and duplicated again.

24
00:01:35,080 --> 00:01:38,650
And this is where short term or long term is going to go.

25
00:01:38,650 --> 00:01:43,540
Now before we move on let's go ahead and let's close down the assistant editor we don't need it right

26
00:01:43,540 --> 00:01:44,110
now.

27
00:01:44,410 --> 00:01:48,490
And what we're actually going to do is we're going to select both of these labels and we're going to

28
00:01:48,490 --> 00:01:50,190
put them in a stacked view.

29
00:01:50,260 --> 00:01:55,540
We're going to do the same thing with these two labels putting them in a stacked view and then we're

30
00:01:55,540 --> 00:01:59,650
going to select both stack views and put them into a stack if you like.

31
00:01:59,650 --> 00:02:04,560
So we're going to create a bit of spacing between both of those stack views.

32
00:02:04,610 --> 00:02:06,240
Maybe 10.

33
00:02:06,280 --> 00:02:07,500
That looks good.

34
00:02:07,600 --> 00:02:13,180
And then between these two stack views we're going to also create spacing of 10.

35
00:02:13,420 --> 00:02:16,800
And this one as well create 10 points of spacing.

36
00:02:17,050 --> 00:02:22,000
And now we have nice spacing between all of them and we can now go ahead and set them up the way we

37
00:02:22,000 --> 00:02:22,330
want.

38
00:02:22,330 --> 00:02:25,210
So this will just say goal.

39
00:02:25,210 --> 00:02:25,870
All right.

40
00:02:26,140 --> 00:02:28,990
And this one is just going to say type.

41
00:02:28,990 --> 00:02:35,080
Now since this is beneath the main description it makes sense that these two are a little bit smaller

42
00:02:35,080 --> 00:02:35,950
than the rest.

43
00:02:36,130 --> 00:02:37,110
So go ahead and.

44
00:02:37,150 --> 00:02:43,180
We're going to actually while we're at it let's change the font to custom and then set Avenir next.

45
00:02:43,510 --> 00:02:44,110
OK.

46
00:02:44,110 --> 00:02:47,920
Again this is up to you if you want to do this you can I just like it.

47
00:02:48,220 --> 00:02:57,970
So I'm going to change it to size 14 and then I'm going to go ahead and yeah change this font now to

48
00:02:57,970 --> 00:02:58,980
Avenir next as well.

49
00:02:58,990 --> 00:03:03,800
So change this to custom and the font to ave next.

50
00:03:03,910 --> 00:03:08,710
And I'm going to make it Demi bold because it looks like it should be a little bit bolder because that's

51
00:03:08,710 --> 00:03:14,290
the most important information that our eyes should be drawn to in our stacked view.

52
00:03:14,290 --> 00:03:15,820
So very cool.

53
00:03:15,880 --> 00:03:18,730
I'm going to make that size 18 I believe.

54
00:03:19,090 --> 00:03:21,070
Let's just make sure that looks good.

55
00:03:21,070 --> 00:03:31,570
And you know just to test this let's go ahead and let's let's just set an imaginary goal eat salad twice

56
00:03:32,620 --> 00:03:40,960
a week maybe that's my goal and the type that's going to be a short term Well no dash let's just do

57
00:03:40,960 --> 00:03:43,170
short term goal.

58
00:03:43,180 --> 00:03:44,020
All right.

59
00:03:44,020 --> 00:03:45,280
Very cool.

60
00:03:45,280 --> 00:03:46,360
That looks awesome.

61
00:03:46,360 --> 00:03:48,940
So we now have a goal we have a type.

62
00:03:49,090 --> 00:03:53,670
And you know as I'm looking at this I don't like that the spacing is so big between the two stacked

63
00:03:53,680 --> 00:03:54,280
views.

64
00:03:54,280 --> 00:03:58,530
So let's actually select the outermost stack view here and let's drop it to five.

65
00:03:58,720 --> 00:04:00,710
That looks a little better.

66
00:04:01,210 --> 00:04:02,590
Yeah that's great.

67
00:04:02,590 --> 00:04:08,860
So now we need to go ahead and add on a label over here to document how many times we have eaten salads

68
00:04:08,860 --> 00:04:09,930
so that we can meet our goal.

69
00:04:09,940 --> 00:04:14,920
So go ahead and drag on a new label and we're actually going to make this one the height of the entire

70
00:04:14,920 --> 00:04:18,430
cell the way that we the way that we're doing it here.

71
00:04:18,640 --> 00:04:25,390
And we're going to go ahead and remove label and let's just set a static number of maybe 7 or so k.

72
00:04:25,840 --> 00:04:26,980
Let's center it.

73
00:04:27,010 --> 00:04:33,160
And now we need to change the font to our favorite font Avenir next or my favorite font and I'm going

74
00:04:33,160 --> 00:04:34,080
to make it bold.

75
00:04:34,090 --> 00:04:38,270
We want it to look nice and bold and really draw their attention to that.

76
00:04:39,520 --> 00:04:43,840
Also to draw their attention because it's kind of the most important thing about our app is how close

77
00:04:43,840 --> 00:04:45,490
are we to achieving our goals.

78
00:04:45,520 --> 00:04:48,270
So we're going to make it nice and big so it's very easy to see.

79
00:04:48,270 --> 00:04:52,460
So I'm going to actually bump it up to 26 maybe even 28.

80
00:04:52,610 --> 00:04:53,870
Yeah that looks good.

81
00:04:54,220 --> 00:04:54,620
OK.

82
00:04:54,620 --> 00:04:59,920
So that's great but we're going to change the color of this to actually be the same green that we're

83
00:04:59,920 --> 00:05:03,160
using in the background of our app because that just looks cool.

84
00:05:03,160 --> 00:05:04,840
I think it looks awesome that way.

85
00:05:04,840 --> 00:05:07,460
So we are super close to being done.

86
00:05:07,630 --> 00:05:11,830
However we need to set some constraints so these things don't just fly off the screen and go wherever

87
00:05:11,830 --> 00:05:12,930
the heck they want.

88
00:05:12,940 --> 00:05:13,720
So to do that.

89
00:05:13,720 --> 00:05:20,400
Go ahead and select your text you hear for your label and we're going to pin it eight from the top eight

90
00:05:20,410 --> 00:05:26,110
from the right and eight from the bottom change seven point five to eight if you need to.

91
00:05:26,170 --> 00:05:29,290
And then we're going to give it a fixed width of 40.

92
00:05:29,290 --> 00:05:30,270
How about that.

93
00:05:30,500 --> 00:05:34,810
K the height doesn't matter because we've pinned it to the top bottom and right.

94
00:05:34,810 --> 00:05:35,950
We just care about the width.

95
00:05:35,950 --> 00:05:39,940
So add those constraints and Austin stays in place.

96
00:05:39,940 --> 00:05:43,320
Next we need to pin our stack few in place so to do that.

97
00:05:43,330 --> 00:05:51,400
Go ahead and select the pin menu and this one looks like it is pinning to the Super view not the margins.

98
00:05:51,400 --> 00:05:55,160
So I'm going to just drag it here and that might be OK.

99
00:05:55,630 --> 00:05:57,550
But let's just make sure yeah we're doing the right thing.

100
00:05:57,550 --> 00:05:57,790
OK.

101
00:05:57,790 --> 00:06:03,620
So pinnate 0 from the bottom zero from the left and we're going to pinnate zero from the top as well.

102
00:06:03,760 --> 00:06:10,420
And then we're going to pin it maybe 10 from the side of that 7 up there that you I label.

103
00:06:10,490 --> 00:06:13,390
OK so press enter to add those constraints.

104
00:06:13,390 --> 00:06:16,480
And as you can see it shows up just like so.

105
00:06:17,020 --> 00:06:21,820
Now this is a little bit close to the side it's a little squishy so I'm going to fix it and you can

106
00:06:21,820 --> 00:06:26,740
tell that the the labels here got a little bit messed up but we will fix that as well.

107
00:06:26,800 --> 00:06:32,110
So go to your leading space constraint and change it to 10 to match the amount of space on the other

108
00:06:32,110 --> 00:06:34,930
side of this this label.

109
00:06:34,930 --> 00:06:41,440
So now we need to select our stack views here and we need to modify the way that they are filling so

110
00:06:41,440 --> 00:06:43,980
that we don't get this weird stretching here.

111
00:06:44,140 --> 00:06:44,760
OK.

112
00:06:45,100 --> 00:06:49,790
And the way we're going to do that is by clicking on our stack view and we're going to choose.

113
00:06:49,900 --> 00:06:51,590
Fill proportionally.

114
00:06:51,910 --> 00:06:58,360
That way it fills it based on the size of whatever element is in the stack view so that looks great

115
00:06:59,080 --> 00:07:03,460
although you know what we have a ton of space between these so I think I'm also going to lower these

116
00:07:03,460 --> 00:07:07,090
stack use both to have a spacing of five 10.

117
00:07:07,100 --> 00:07:08,570
It's just a bit too much.

118
00:07:08,780 --> 00:07:10,330
So let's go ahead and do that.

119
00:07:10,340 --> 00:07:12,570
It looks great.

120
00:07:13,360 --> 00:07:14,260
That looks great.

121
00:07:14,260 --> 00:07:20,470
And now it appears that we are a little bit off of our constraints or just click the update frames button

122
00:07:20,830 --> 00:07:22,690
and it'll move it right in place.

123
00:07:22,690 --> 00:07:24,710
All right supercool This looks great.

124
00:07:24,730 --> 00:07:28,670
So now we have a label here to display our goal description.

125
00:07:28,870 --> 00:07:32,350
But what if the font is a little bit too big.

126
00:07:32,380 --> 00:07:37,390
Or what if the goal is too long it would just go to the end and right dot dot dot and we wouldn't know

127
00:07:37,390 --> 00:07:38,680
what our full goal is.

128
00:07:38,680 --> 00:07:41,740
So to fix that we're just going to set a minimum font size.

129
00:07:41,830 --> 00:07:46,450
OK that's pretty typical way to do it and a minimum font size of nine should be great.

130
00:07:46,450 --> 00:07:49,270
It'll automatically scale to fit.

131
00:07:49,270 --> 00:07:52,450
Short term is not going to matter because we're not going to stretch all the way to the side.

132
00:07:52,510 --> 00:07:55,860
And this also is never going to change size because it's just a static number.

133
00:07:55,900 --> 00:08:02,800
So you know what it might though if we had multiple like maybe we had 23 or 24 like 2 numbers it might.

134
00:08:02,800 --> 00:08:04,140
So to fix that.

135
00:08:04,140 --> 00:08:06,850
Go ahead and set a minimum font size as well.

136
00:08:06,850 --> 00:08:11,380
All right so now let's go out and create the code file this can interface with this.

137
00:08:11,410 --> 00:08:18,020
So to do that right click on view click new file and select Cocco touch class.

138
00:08:18,070 --> 00:08:26,380
We're going to be subclassing UI table view cell okay like so and we're going to just call this goal

139
00:08:26,380 --> 00:08:29,850
cell and go ahead and click next.

140
00:08:29,890 --> 00:08:31,610
And we're going to save this in our app.

141
00:08:31,630 --> 00:08:34,890
Make sure that your target is selected and click Create.

142
00:08:35,320 --> 00:08:36,010
Ok really cool.

143
00:08:36,010 --> 00:08:38,830
So we have a UI table view cell.

144
00:08:38,830 --> 00:08:43,450
And you know we're not actually going to need any of this so just get rid of that for now.

145
00:08:43,450 --> 00:08:45,640
Now go back into Main storyboard.

146
00:08:45,790 --> 00:08:47,050
Select the cell.

147
00:08:47,080 --> 00:08:47,490
Right.

148
00:08:47,500 --> 00:08:50,570
Make sure that the table view cell itself is selected.

149
00:08:50,770 --> 00:08:55,300
And we're going to go to the identity inspector and give it an identity of gold cell.

150
00:08:55,510 --> 00:08:55,860
OK.

151
00:08:55,900 --> 00:08:57,250
Really cool.

152
00:08:57,250 --> 00:09:04,510
While we're at it we're also going to need to set a real identifier for when the cell is cued by the

153
00:09:04,510 --> 00:09:05,180
table view.

154
00:09:05,200 --> 00:09:09,380
So to do that go ahead and just give it a reuse identifier of Garcelle.

155
00:09:09,430 --> 00:09:15,990
Now it's convention to type a lowercase word first and the camel case the rest like so by typing goes

156
00:09:16,000 --> 00:09:16,560
cell.

157
00:09:16,570 --> 00:09:16,810
OK.

158
00:09:16,810 --> 00:09:23,680
Now we have a reverse identifier that we can use in our table view when we dequeue the cells later on.

159
00:09:23,950 --> 00:09:25,600
So this is now Google cell.

160
00:09:25,600 --> 00:09:26,590
That's great.

161
00:09:26,590 --> 00:09:31,780
And so with that we can now open the assistant editor and set up the Iby outlets and Iby actions so

162
00:09:32,050 --> 00:09:34,790
select that and open it up.

163
00:09:34,810 --> 00:09:42,060
Now we need to go to automatic manual goal post app and open the view folder and select Garcelle.

164
00:09:42,110 --> 00:09:47,800
OK now we're going to create Iby outlets to display data in here then we're going to write a configure

165
00:09:47,800 --> 00:09:54,210
cell function so that we can properly update that information with information from our core data model.

166
00:09:54,220 --> 00:10:05,410
So right click on the goal description label here and drag into Garcelle whoops go ahead and go into

167
00:10:05,410 --> 00:10:10,090
the stacked view and select that label and we're going to drag it to our goal sell and we're going to

168
00:10:10,090 --> 00:10:19,050
just call this goal descript description label cool.

169
00:10:19,090 --> 00:10:24,100
Next we're going to go ahead and Right-Click from the short term label there and we'll call this goal

170
00:10:24,130 --> 00:10:28,310
type label because that's the type short term versus long term.

171
00:10:28,480 --> 00:10:35,710
And then we're going to go ahead and set this label here the number to be goal progress label because

172
00:10:35,710 --> 00:10:38,490
that shows our progress towards accomplishing our goal.

173
00:10:38,530 --> 00:10:40,070
Very cool.

174
00:10:40,090 --> 00:10:46,810
Next we need to write a function so that when we are actually instantiating these cells we can pass

175
00:10:46,810 --> 00:10:47,890
in the proper data.

176
00:10:48,130 --> 00:10:52,750
So to do that go ahead and type phunk configure cell.

177
00:10:52,990 --> 00:10:57,100
And when we can figure this cell we need to give it a description.

178
00:10:57,480 --> 00:10:57,930
OK.

179
00:10:58,030 --> 00:11:00,850
And we're going to get that as a string.

180
00:11:00,850 --> 00:11:07,810
Then we're going to get a type and that's going to be of type goal type which we have not yet created.

181
00:11:07,810 --> 00:11:10,850
So for now let's just go ahead and pass in a string.

182
00:11:10,870 --> 00:11:15,290
We'll create the gold type later and I'll explain all of that in a future video.

183
00:11:15,880 --> 00:11:23,010
And then we're going to need to pass in a goal progress I'm out of type int.

184
00:11:24,100 --> 00:11:28,960
So we're going to get all of that information and now we can configure our Iby outlets so go ahead and

185
00:11:28,960 --> 00:11:34,950
type self goal description label text and we're going to give it our description.

186
00:11:35,270 --> 00:11:35,680
Okay.

187
00:11:35,710 --> 00:11:41,200
Next go ahead and type self goal type label text.

188
00:11:41,590 --> 00:11:46,210
And we're going to give our goal type by passing and the type K.

189
00:11:46,210 --> 00:11:47,380
Now it's of type string.

190
00:11:47,380 --> 00:11:52,780
Now later it will be of a different kind but I'll describe I'll describe that later when it's time but

191
00:11:52,780 --> 00:11:58,330
for now just go ahead and pass in the string then we're going to go ahead and set a goal progress amount.

192
00:11:58,330 --> 00:12:00,070
OK so type self.

193
00:12:00,100 --> 00:12:05,030
Goal progress label dot text and we're passing in an int.

194
00:12:05,050 --> 00:12:13,480
We can't set text to be an end because look the text property of our UI label is expecting a string.

195
00:12:13,480 --> 00:12:21,010
But what we can do is we can call string and there's a handy little part of string called String describing.

196
00:12:21,010 --> 00:12:24,110
Now if you scroll down you can find it right here.

197
00:12:24,220 --> 00:12:31,330
String describing subject and our subject is our goal progress wups goal progress amount.

198
00:12:31,630 --> 00:12:36,660
So that will basically create a string that we've passed in this amount and it's converted it to a string

199
00:12:36,670 --> 00:12:40,670
so we will get the textual character 7 not the numerical value.

200
00:12:40,750 --> 00:12:45,520
So it will convert it into a nice string the way we want super cool.

201
00:12:45,520 --> 00:12:46,510
And you know what guys.

202
00:12:46,600 --> 00:12:52,570
This cell is now ready to receive static data and we could display cells on our table view really really

203
00:12:52,570 --> 00:12:53,230
cool.

204
00:12:53,230 --> 00:12:59,450
We're going to do that in a little bit but this is done our UI table view cell is now properly done.

205
00:12:59,500 --> 00:13:05,350
We have built it in Interface Builder we've created a subclass and we have set it up to be configured

206
00:13:05,620 --> 00:13:08,140
by the table view super amazing work.

207
00:13:08,140 --> 00:13:12,260
The last thing we need to do is rehired this table view and our video is done.

208
00:13:12,280 --> 00:13:18,100
So go ahead and select that table view you scroll down to the bottom of the attributes and Specter and

209
00:13:18,200 --> 00:13:18,580
tick.

210
00:13:18,580 --> 00:13:19,180
Hidden.

211
00:13:19,300 --> 00:13:19,510
OK.

212
00:13:19,510 --> 00:13:21,210
That's exactly what we need to do.

213
00:13:21,310 --> 00:13:26,860
And this video has done amazing job in the next video we're going to start talking about core data.

214
00:13:26,890 --> 00:13:32,890
I'm going to explain to you what it is and show you visually how it works on a fundamental level so

215
00:13:32,890 --> 00:13:37,120
that you can understand everything we're doing in the future videos that we will do by creating our

216
00:13:37,120 --> 00:13:42,610
core data entity and attributes things that I've shown you a little bit already but I have not explained

217
00:13:42,610 --> 00:13:44,520
it I'm going to explain it in the next video.

218
00:13:44,740 --> 00:13:48,300
And we're going to basically look at our core data model and see what we need to do.

219
00:13:48,310 --> 00:13:50,190
So let's head over to the next video.

220
00:13:50,200 --> 00:13:52,770
Amazing job with this one and I'll see you there.