1
00:00:05,100 --> 00:00:12,380
What's up guys I'm Jacob blitzed with Dev slopes dot com and in the last lesson we got our our start

2
00:00:12,380 --> 00:00:21,590
running VC all set up and in this lesson we're going to go ahead and work on the log Visi that shows

3
00:00:21,590 --> 00:00:23,140
all of our previous runs.

4
00:00:23,300 --> 00:00:27,350
And hopefully you guys did my challenge and it's already done and you're just making sure you did it

5
00:00:27,350 --> 00:00:28,770
right right now.

6
00:00:29,240 --> 00:00:30,950
So that's what we're going to do.

7
00:00:31,370 --> 00:00:37,020
And but first things first is the most important thing let's pull up our terminal.

8
00:00:37,280 --> 00:00:40,310
And if you're not in your project already you should go there.

9
00:00:40,670 --> 00:00:44,780
And we committed our last branch and normally.

10
00:00:44,840 --> 00:00:50,930
So I would consider that first AVC a feature and you would normally merge it into your master branch

11
00:00:50,990 --> 00:00:55,190
then and you always make sure you have working features and then you can merge them and your master

12
00:00:55,190 --> 00:00:59,990
branches always like a working model of your project.

13
00:01:00,010 --> 00:01:05,980
But since I'm teaching you guys I'm going to create a branch off of the last branch and call it Lesson

14
00:01:05,980 --> 00:01:06,420
2.

15
00:01:06,430 --> 00:01:13,660
So when you pull up on my source code looking you can basically check out any of the branches to see

16
00:01:13,660 --> 00:01:15,530
exactly what we did in that lesson.

17
00:01:15,550 --> 00:01:22,030
So I'm going to go ahead and do a get check out dash be to create a new branch and call this lesson

18
00:01:22,210 --> 00:01:22,720
to

19
00:01:26,910 --> 00:01:28,120
help something.

20
00:01:28,140 --> 00:01:30,390
Let's see status

21
00:01:33,310 --> 00:01:38,360
Oh I put a space in don't put a space less than two.

22
00:01:38,420 --> 00:01:43,790
And now we're in a new branch and if you want to see that do a branch and you will see a new branch.

23
00:01:43,970 --> 00:01:44,730
I'm going to.

24
00:01:44,750 --> 00:01:55,390
Also I have a weird head fire also gets a drop get branch and that's still there.

25
00:01:57,900 --> 00:02:01,840
Stashed away we all know why this is here.

26
00:02:01,890 --> 00:02:03,470
We're going to get rid of it.

27
00:02:05,270 --> 00:02:05,870
There we go.

28
00:02:05,870 --> 00:02:09,800
So now we're on less than two on our new feature branch.

29
00:02:09,800 --> 00:02:11,630
So we are good to go.

30
00:02:11,840 --> 00:02:16,830
And our second Visi is down here and it's called the second view controller right now.

31
00:02:17,060 --> 00:02:21,960
Let's go ahead and just delete that label delete this label.

32
00:02:22,130 --> 00:02:25,960
And let's also go ahead and just rename this Visi right away.

33
00:02:26,060 --> 00:02:29,460
And I'm just going to call this visi.

34
00:02:29,660 --> 00:02:34,520
We can call it run log or run log is good.

35
00:02:34,520 --> 00:02:41,410
Run log Visi and then I also so I copy and paste I don't spell anything wrong.

36
00:02:41,420 --> 00:02:44,350
I change my comments so it doesn't bother me later.

37
00:02:44,720 --> 00:02:51,600
And then over here may actually change the file name and then back to the storyboard.

38
00:02:51,710 --> 00:03:01,130
Select this the bottom of the two table VCDs or tab bar VCs and go to your identity inspector.

39
00:03:01,160 --> 00:03:10,850
And then in the custom class make sure we find out not that where like I don't have it selected.

40
00:03:10,850 --> 00:03:11,810
There we go.

41
00:03:11,870 --> 00:03:17,210
So select this VC and then under custom class it still says second view controller but that doesn't

42
00:03:17,210 --> 00:03:18,330
exist anymore.

43
00:03:18,410 --> 00:03:23,180
So we need to find run log Visi and that is ready to go.

44
00:03:23,180 --> 00:03:26,590
So now let's go ahead and look at our docs.

45
00:03:26,870 --> 00:03:29,070
We're going to have to do the same background.

46
00:03:29,090 --> 00:03:36,620
So we need to put a image view that spans the whole thing and then it looks like we also need a label

47
00:03:36,620 --> 00:03:45,920
for log and then we need a table view that takes up everything from this point down probably and then

48
00:03:45,920 --> 00:03:48,560
we have to make a custom cell.

49
00:03:48,560 --> 00:03:50,240
So we got quite a bit to do here.

50
00:03:50,240 --> 00:03:53,230
Let's go ahead and get going.

51
00:03:53,460 --> 00:04:02,850
So let's go ahead and add a huge view or I'm sorry you I image view drag that on and since it's the

52
00:04:02,850 --> 00:04:03,640
whole background.

53
00:04:03,640 --> 00:04:10,020
I just like usually make sure I drag it close to the edges otherwise it will want to put the constraints

54
00:04:10,020 --> 00:04:16,770
to the tab bar or wherever you want but we want it behind the tab bar because it is the opacity of the

55
00:04:16,770 --> 00:04:21,960
taskbar is not 100 percent so you can kind of see things behind it.

56
00:04:21,990 --> 00:04:27,670
Let's go ahead and set these constraints and they should be 0 0 0 all the way around.

57
00:04:27,690 --> 00:04:34,170
Add those and then go to your attributes and inspector and let's find this image.

58
00:04:34,170 --> 00:04:42,020
It's called background and let's do aspect Phil and that should do it.

59
00:04:42,180 --> 00:04:48,610
And now we need the one we need the the log label just like the run label.

60
00:04:48,610 --> 00:04:54,050
And I'm actually going to copy and paste this and we want to make sure it is 8 from the top as well

61
00:04:54,060 --> 00:04:55,260
so it doesn't look funny.

62
00:04:55,260 --> 00:05:03,400
So I copied that command see and then just come down here and click on the View and command VI and then

63
00:05:03,400 --> 00:05:11,960
we'll drag it Center bring it down here and we'll go ahead and horizontally and container we want it

64
00:05:11,970 --> 00:05:13,070
Center.

65
00:05:13,290 --> 00:05:18,280
And then let's pivot it from the top right there and there we go.

66
00:05:18,280 --> 00:05:24,030
Now you can double click on the label or change it over here in the attributes and Specter whatever

67
00:05:24,030 --> 00:05:30,620
you want and we'll call it a log and we can keep the same font so it matches run right.

68
00:05:30,900 --> 00:05:34,110
So now with that done now we need our table view.

69
00:05:34,110 --> 00:05:36,580
So go ahead and search for table view.

70
00:05:38,380 --> 00:05:44,080
Down here in your object library and you don't want the first one that is a whole control or so like

71
00:05:44,080 --> 00:05:47,140
one of these we want just a table view.

72
00:05:47,140 --> 00:05:51,320
So drag that out and I can't remember.

73
00:05:51,640 --> 00:05:52,450
Excuse me.

74
00:05:52,690 --> 00:05:54,310
Let's check out our docs the table.

75
00:05:54,360 --> 00:05:56,080
OK it goes all the way to the edge.

76
00:05:56,080 --> 00:06:01,820
So we want to drag this guy just below log.

77
00:06:01,930 --> 00:06:02,950
Yeah that looks good.

78
00:06:02,980 --> 00:06:10,120
And we want it to go the whole screen and we probably don't have to go lower.

79
00:06:10,120 --> 00:06:16,300
So our background still shows through since April anyways so just drag it right to the top of the tab

80
00:06:16,300 --> 00:06:25,180
bar and let's go ahead and pin this zero to the left to zero to the right zero to the bottom and 8 from

81
00:06:25,180 --> 00:06:27,510
the label is probably great.

82
00:06:28,730 --> 00:06:29,720
There we go.

83
00:06:29,750 --> 00:06:40,670
So with that being done now we need a reusable table view cells so let's go ahead right underneath table

84
00:06:40,670 --> 00:06:42,770
view you'll see the cell.

85
00:06:42,960 --> 00:06:48,610
Let's drag that onto the table view and I'll add it as a prototype right here.

86
00:06:49,570 --> 00:06:51,010
Well let's see.

87
00:06:51,380 --> 00:06:56,610
Let's click on table view again and make sure the background is clear.

88
00:06:58,980 --> 00:07:13,770
And we also want the separator to be none one prototype is great and we don't want any selection.

89
00:07:14,010 --> 00:07:18,230
I think this is the background we want we want this to clear down here in view.

90
00:07:18,240 --> 00:07:18,960
Yeah.

91
00:07:19,000 --> 00:07:19,890
OK.

92
00:07:19,890 --> 00:07:27,000
So the the content view doesn't change but as you can see on the top where its prototype cells that

93
00:07:27,000 --> 00:07:33,120
went clear when we changed our view the background to clear and our cell is right here and we can make

94
00:07:33,120 --> 00:07:36,920
this any size we want and let's click on that.

95
00:07:36,960 --> 00:07:40,740
And we also see we need this one.

96
00:07:40,740 --> 00:07:44,420
It looks like it needs to be white with opacity.

97
00:07:44,550 --> 00:07:51,760
So let's just go ahead and make this white right now and we'll worry about the opacity in a moment.

98
00:07:54,390 --> 00:07:56,370
Oh I'm sorry.

99
00:07:56,370 --> 00:08:02,190
We want this clear because we can't actually do much.

100
00:08:02,190 --> 00:08:04,280
Shoot me fine.

101
00:08:04,750 --> 00:08:05,930
I'm in the wrong visi.

102
00:08:05,980 --> 00:08:06,910
All right.

103
00:08:07,000 --> 00:08:11,380
So in our cell on our content view our cell needs to be clear.

104
00:08:13,820 --> 00:08:16,560
And it already is up there it is.

105
00:08:16,560 --> 00:08:19,200
And then the content view is also clear this is good.

106
00:08:19,200 --> 00:08:20,770
This is what we need.

107
00:08:20,850 --> 00:08:29,770
It's a little you can't really if you drag things into the cell they have to be in the content view

108
00:08:30,160 --> 00:08:37,060
and our labels are on top and if they were in the content view they would also get the same opacity

109
00:08:37,090 --> 00:08:38,110
as that view.

110
00:08:38,110 --> 00:08:39,820
And we want to avoid doing that.

111
00:08:39,910 --> 00:08:42,220
So we need to add a another view to this.

112
00:08:42,220 --> 00:08:49,840
So go ahead and just type in you view and drag view right into the cell here and see how that entered

113
00:08:50,110 --> 00:08:50,950
the content view.

114
00:08:50,950 --> 00:08:54,580
That's exactly what we want.

115
00:08:54,610 --> 00:08:57,210
We just want it to take up the whole.

116
00:08:57,260 --> 00:08:58,180
So

117
00:09:01,560 --> 00:09:13,950
like so and let's go ahead and Pennis 000 zero and add those constraints and we want it to be white.

118
00:09:14,140 --> 00:09:22,320
But we want the opacity down so let's go ahead and make it like point to and that looks pretty cool

119
00:09:22,330 --> 00:09:26,940
you can see the color change between the background and the cell.

120
00:09:26,970 --> 00:09:32,160
So I think that's good we can always adjust it later if we want it a little darker right now that will

121
00:09:32,160 --> 00:09:34,900
do point three just to see it a little better.

122
00:09:35,430 --> 00:09:41,650
Ok so now on this cell we need one two three four.

123
00:09:41,670 --> 00:09:47,580
We need five labels and I'm going to go ahead and copy and paste this so I don't have to set up the

124
00:09:47,580 --> 00:09:49,400
font again.

125
00:09:49,980 --> 00:09:56,700
And if you come in to we want to paste these into the content view because if it went into this view

126
00:09:56,700 --> 00:10:03,970
the opacity would change and we don't want that see just dragging it around made it into that view.

127
00:10:03,990 --> 00:10:07,920
And it's a real pain in the butt when it does that.

128
00:10:07,920 --> 00:10:11,430
So a lot of times you have to just click on the label that you want

129
00:10:15,420 --> 00:10:24,120
one second put the view behind the label the order of these matters so the lower on the list the more

130
00:10:24,120 --> 00:10:29,520
forward the whatever your add in the view or in our case the label.

131
00:10:29,650 --> 00:10:30,960
So you're going to click on it.

132
00:10:30,970 --> 00:10:32,350
Don't drag it.

133
00:10:32,380 --> 00:10:40,410
You can either come over here to the your size inspector and move the y coordinate or the x coordinate

134
00:10:40,420 --> 00:10:45,420
to move it around or you can just use your arrows if you drag it.

135
00:10:45,430 --> 00:10:49,770
It's going to enter our background view and that's not what we want.

136
00:10:50,380 --> 00:10:56,920
So let's go ahead and just roughly move this right here and this label is going to be our duration label.

137
00:10:56,920 --> 00:11:08,960
So we want it to look like like this 0 0 0 0 0 0 enter.

138
00:11:09,120 --> 00:11:13,490
Click on that and then move it to the right.

139
00:11:13,610 --> 00:11:16,840
And obviously it's a lot smaller font.

140
00:11:16,850 --> 00:11:26,230
So let's lower the font size or attribute inspector click on Tex and let's go ahead and just lower that

141
00:11:26,260 --> 00:11:28,990
14 is probably good.

142
00:11:28,990 --> 00:11:29,320
All right.

143
00:11:29,320 --> 00:11:35,110
So now we're going to use this font size for the distance as well.

144
00:11:35,110 --> 00:11:43,150
So I'm going to copy and paste and just make sure you select the label and use the arrow keys on your

145
00:11:43,150 --> 00:11:44,570
keyboard.

146
00:11:45,880 --> 00:11:50,000
And we're not adding constraints yet because we're going to use stack views in a moment.

147
00:11:50,290 --> 00:11:52,910
And this just needs to have a default value.

148
00:11:52,910 --> 00:11:59,210
Right now 3.1 miles seems like a decent run right.

149
00:11:59,230 --> 00:12:01,240
And now we need our

150
00:12:04,330 --> 00:12:05,200
our pace.

151
00:12:05,200 --> 00:12:11,230
So this middle label is our pace and it's a little larger than our other fields and it looks bold.

152
00:12:11,380 --> 00:12:13,280
So let's go ahead and add that.

153
00:12:13,300 --> 00:12:20,870
So we'll copy and paste this guy selected and then just move it towards the center.

154
00:12:23,950 --> 00:12:34,440
There's the center and we'll just show two time spaces so minutes and seconds.

155
00:12:34,540 --> 00:12:35,700
That's good.

156
00:12:35,890 --> 00:12:39,230
And then let's select that and make the font bigger.

157
00:12:40,340 --> 00:12:44,100
I would say 18 maybe 20.

158
00:12:44,150 --> 00:12:48,270
And let's also see what semi bold looks like.

159
00:12:48,320 --> 00:12:50,390
I think semi bolds the one we want.

160
00:12:50,390 --> 00:12:51,790
So that looks good.

161
00:12:53,320 --> 00:12:53,670
Right.

162
00:12:53,680 --> 00:12:59,620
And now let's copy and paste the three point two and go ahead and just arrow that underneath and this

163
00:12:59,620 --> 00:13:01,500
is going to be our dash.

164
00:13:01,990 --> 00:13:03,750
You know our time per mile.

165
00:13:03,760 --> 00:13:07,410
Our average pace.

166
00:13:07,550 --> 00:13:14,800
Don't worry about centering it too much just get it underneath and just do a forward slash and my and

167
00:13:14,980 --> 00:13:18,780
I think it's good that it actually looks a little smaller to me.

168
00:13:19,060 --> 00:13:24,880
So let's go ahead and check the font and maybe let's just make it 12 that looks good.

169
00:13:25,090 --> 00:13:30,400
And then lastly we just need our our date label.

170
00:13:30,490 --> 00:13:40,000
So let's go ahead and copy and paste any of the non bolded labels and then let's just go ahead and arrow

171
00:13:40,000 --> 00:13:48,330
it over all the way over to the right of our cell.

172
00:13:48,580 --> 00:13:50,320
And that looks good.

173
00:13:50,530 --> 00:13:55,110
And let's see let's put the data in.

174
00:13:55,420 --> 00:14:10,340
It's going to be 0 6 1 5 7 10 and that looks quite a bit smaller and a little further off the edge.

175
00:14:10,400 --> 00:14:15,410
So let's go ahead and select that move that off the edge and let's just tone down the size a little

176
00:14:15,410 --> 00:14:19,510
we'll make it 12 like a smaller label.

177
00:14:19,520 --> 00:14:20,840
All right.

178
00:14:20,840 --> 00:14:22,490
So that looks good.

179
00:14:22,490 --> 00:14:28,850
Now we have to just put some constraints on the stuff and I believe we already have them for our view

180
00:14:29,470 --> 00:14:31,610
to make sure you can always go to the size inspector.

181
00:14:31,640 --> 00:14:40,300
And yeah we already have them on our our our white with the less opacity view.

182
00:14:40,440 --> 00:14:42,270
So we just have to worry about our labels now.

183
00:14:42,270 --> 00:14:51,450
So I'm going to go ahead and just select the zero the duration and total mileage here holding command

184
00:14:52,680 --> 00:14:55,560
and then go ahead and click on embed unstacked view

185
00:15:03,020 --> 00:15:04,530
and there it is.

186
00:15:04,550 --> 00:15:05,840
So that's done.

187
00:15:05,990 --> 00:15:07,330
And let's do the same thing.

188
00:15:07,370 --> 00:15:12,050
Command click to select both of these and embed this in a stack as well.

189
00:15:12,410 --> 00:15:15,520
And then obviously this guy doesn't need to be in a stacked view.

190
00:15:15,560 --> 00:15:22,520
So with this label we want to add about 8 pixels from the right side or eight points so go ahead and

191
00:15:22,520 --> 00:15:24,120
just set this one to eight.

192
00:15:24,270 --> 00:15:32,390
And we'll hit OK and then let's go ahead and just make sure it's vertically centered in container.

193
00:15:32,680 --> 00:15:33,970
And that one's good.

194
00:15:34,030 --> 00:15:40,120
And now let's just select our other stack we use over and the scene here and this guy we want to just

195
00:15:40,120 --> 00:15:43,240
be horizontally and vertically center.

196
00:15:43,510 --> 00:15:46,410
And this view and then select the other stack.

197
00:15:46,450 --> 00:15:52,660
And we want this one pinned eight from the left so eight points and hit add one constraint and then

198
00:15:52,660 --> 00:16:01,700
let's go ahead and also make sure it is yeah vertically center and container.

199
00:16:01,730 --> 00:16:02,480
All right.

200
00:16:02,780 --> 00:16:08,030
So now if we wanted spacing in between these labels you could just select the stack view and go to the

201
00:16:08,030 --> 00:16:11,090
attribute inspector and increase space here.

202
00:16:11,810 --> 00:16:15,460
But I actually think it looks good the way it is.

203
00:16:15,620 --> 00:16:22,280
So I think we can call that down for now and then over here in the scene let's click on the table view

204
00:16:22,340 --> 00:16:27,170
cell and we need to go to the identity inspector

205
00:16:31,890 --> 00:16:33,650
that's not what I'm looking for.

206
00:16:37,250 --> 00:16:38,020
Oh here we are.

207
00:16:38,030 --> 00:16:41,600
I'm sorry it's an attribute inspector and see this identifier.

208
00:16:41,630 --> 00:16:45,110
We need to name this so we can use it in our code later.

209
00:16:45,260 --> 00:16:50,380
And I always make sure I name the cell the same as the view that I create.

210
00:16:50,390 --> 00:16:56,500
So I would make sure we name it something like like run log.

211
00:16:56,500 --> 00:16:59,140
So I'll just call it exactly what it is.

212
00:16:59,150 --> 00:17:04,730
So we'll say run log because it belongs to the run log we see and it's the cell.

213
00:17:04,730 --> 00:17:06,350
So call it run log.

214
00:17:06,350 --> 00:17:08,760
So sorry about that.

215
00:17:08,780 --> 00:17:09,810
All right.

216
00:17:09,890 --> 00:17:15,620
And I think we are done here except for the tab bar.

217
00:17:15,650 --> 00:17:20,660
We need to set that we need a set image.

218
00:17:20,660 --> 00:17:26,210
So if you select the tab bar at the bottom and your attributes inspector you'll see the bar item and

219
00:17:26,210 --> 00:17:27,510
it's second.

220
00:17:27,890 --> 00:17:39,090
We need this to save my log and then the image needs to be the my log icon that's gray and there we

221
00:17:39,090 --> 00:17:46,500
go see our log and they're showing a blue because they show you the excuse me they show you the selected

222
00:17:46,500 --> 00:17:47,610
color.

223
00:17:48,180 --> 00:17:53,670
And later later on in a couple of lessons I'm actually going to show you how to override the selection

224
00:17:53,820 --> 00:17:59,490
the selected color and set it to our own blue because if you look at the designs it's a lot darker but

225
00:17:59,490 --> 00:18:01,910
we'll actually do that in code later.

226
00:18:02,160 --> 00:18:07,170
So with that being said I think this lesson is done.

227
00:18:07,230 --> 00:18:12,040
We got the log cell all hooked up and ready to go.

228
00:18:12,180 --> 00:18:20,760
And we got the table view there and we got the whole second tab bar view and in the next lesson we're

229
00:18:20,760 --> 00:18:27,600
going to do the third view and that is the current run view where we're going to do really cool stuff

230
00:18:27,600 --> 00:18:31,510
like a custom slider and a lot of cool string override.

231
00:18:31,530 --> 00:18:37,590
So I would like you guys to try to also build this UI without watching the lesson and then you can always

232
00:18:37,590 --> 00:18:40,120
watch the lesson if you need hints.

233
00:18:40,440 --> 00:18:41,430
And that would be the best.

234
00:18:41,430 --> 00:18:48,990
And before we're done let's go ahead and pull up that terminal and do a get ad period and then a commit

235
00:18:49,110 --> 00:19:01,010
dash am and we will say set up the UI for the log AVC answer.

236
00:19:01,180 --> 00:19:02,980
And there we go.

237
00:19:02,980 --> 00:19:08,170
So we're using get we're all committed and I will see you guys in the next lesson.