1
00:00:07,950 --> 00:00:13,130
Hey buddy this is Caleb again with slopes dot com and in this video we're going to build goals.

2
00:00:13,130 --> 00:00:18,380
VC This is like the home screen of our app that will show all of the different goals that we have set

3
00:00:18,410 --> 00:00:24,320
and saved we're going to create the subclass the code file that goes along with this view controller

4
00:00:24,320 --> 00:00:28,550
and we're also going to link up the Iby actions and Iby outlets for this view controller.

5
00:00:28,550 --> 00:00:30,860
So let's dive into it now.

6
00:00:31,010 --> 00:00:37,160
Pull open your X code project and what we're going to do is first we're going to go ahead and modify

7
00:00:37,160 --> 00:00:41,120
the view subclass or The View Controller subclass rather.

8
00:00:41,120 --> 00:00:43,090
And we're going to rename this goals.

9
00:00:43,090 --> 00:00:47,060
VC ok cause that's what it is it's the homescreen that shows our goals.

10
00:00:47,060 --> 00:00:51,060
So we're going to rename the class goals Visi as well.

11
00:00:51,130 --> 00:00:55,160
And you know what it still says View Controller here so I'm going to change it to say.

12
00:00:55,160 --> 00:00:57,040
VC that's great.

13
00:00:57,050 --> 00:01:00,180
But now we need to go into the storyboard.

14
00:01:00,200 --> 00:01:04,430
And we also need to set the identity because this is still referencing that view controller file but

15
00:01:04,460 --> 00:01:07,220
it's no longer added in our in our project.

16
00:01:07,220 --> 00:01:13,100
So click on the View Controller click on the identity inspector remove your controller and change it

17
00:01:13,160 --> 00:01:13,580
to gols.

18
00:01:13,590 --> 00:01:16,150
VC OK press enter to save it.

19
00:01:16,170 --> 00:01:18,020
And we're now good to go.

20
00:01:18,050 --> 00:01:21,800
So supercool Let's go ahead and let's build it out.

21
00:01:21,800 --> 00:01:24,430
So we're going to start with a UI view.

22
00:01:24,630 --> 00:01:28,530
OK drag one on and we're going to make it.

23
00:01:28,580 --> 00:01:30,580
Let's see we're going to stretch it out like so.

24
00:01:30,590 --> 00:01:33,980
And let's make it maybe 70 high.

25
00:01:34,320 --> 00:01:35,620
OK that looks pretty good.

26
00:01:36,930 --> 00:01:38,000
Nice.

27
00:01:38,040 --> 00:01:40,110
And let's go ahead and give it some constraints.

28
00:01:40,110 --> 00:01:45,440
Click the pin button and let's pinnate zero from the left to zero from the top and zero from the right.

29
00:01:45,480 --> 00:01:48,730
Of course we need to give it a fixed height of 70.

30
00:01:48,840 --> 00:01:50,490
Click Add four constraints.

31
00:01:50,730 --> 00:01:53,700
Then we're going to go ahead and give it a background color.

32
00:01:53,700 --> 00:02:00,940
Now I've been using this nice green color and that green color just so you know the hex value is 6 db

33
00:02:01,230 --> 00:02:02,770
C 6 3.

34
00:02:02,940 --> 00:02:08,310
So if you want to use the same one you can you can borrow this code and pasted in there and you will

35
00:02:08,310 --> 00:02:10,010
be good to go.

36
00:02:10,050 --> 00:02:10,730
Cool.

37
00:02:10,800 --> 00:02:16,820
So we're going to make this look like a UI navigation controller by adding a button here and we're going

38
00:02:16,810 --> 00:02:19,330
to put a title up at the top so to do that.

39
00:02:19,350 --> 00:02:22,260
Let's go ahead let's do the title first.

40
00:02:22,260 --> 00:02:25,750
Go ahead and type you I label and drag on a label.

41
00:02:25,770 --> 00:02:28,170
Now if you know anything about me you know that I love the font.

42
00:02:28,170 --> 00:02:29,050
Avenir next.

43
00:02:29,070 --> 00:02:30,380
So I'm going to use that.

44
00:02:30,450 --> 00:02:34,500
But you are more than welcome to use whatever font you want in your next.

45
00:02:34,510 --> 00:02:35,880
Just my personal favorite.

46
00:02:36,120 --> 00:02:37,420
Now to change that sorry.

47
00:02:37,440 --> 00:02:40,670
I went from system to custom and then to Avenir next.

48
00:02:40,680 --> 00:02:44,160
Now the first word is going to be goal.

49
00:02:44,280 --> 00:02:49,370
And that's going to be in regular weight font size 18 I think looks good.

50
00:02:49,500 --> 00:02:52,590
Then the second label is going to be in bold.

51
00:02:52,590 --> 00:02:54,310
So for now just click done.

52
00:02:54,390 --> 00:02:59,370
Change the color to white and stretch it out a little bit.

53
00:02:59,370 --> 00:03:00,310
Very cool.

54
00:03:00,570 --> 00:03:06,360
Now what I'm going to do is I'm going to go ahead and just type goal in all caps and I'm going to go

55
00:03:06,360 --> 00:03:08,080
ahead and center this as well.

56
00:03:08,340 --> 00:03:09,870
Then I'm going to duplicate it.

57
00:03:09,870 --> 00:03:16,710
So click on the label press command d to duplicate and I'm going to change this from regular to bold

58
00:03:17,280 --> 00:03:18,690
just like that.

59
00:03:18,720 --> 00:03:22,860
Now I'm going to make this save post and these together just look kind of cool.

60
00:03:22,860 --> 00:03:25,610
It's a cool combo goalpost and.

61
00:03:25,730 --> 00:03:26,090
Yeah.

62
00:03:26,100 --> 00:03:29,410
So that's the that's the title but these are not going to stay in place.

63
00:03:29,610 --> 00:03:33,330
And we actually want them to stay right next to each other so we may as well just throw them into a

64
00:03:33,330 --> 00:03:34,320
stack view.

65
00:03:34,320 --> 00:03:39,930
So with both selected go ahead and click the stack button down at the bottom and there you go.

66
00:03:39,930 --> 00:03:42,660
Look at that it looks like one label but it's not.

67
00:03:42,720 --> 00:03:46,030
So with that in mind go ahead and click on the stack view.

68
00:03:46,320 --> 00:03:53,880
And we're going to just drag it to center it and we're going to move it so that it's a little bit above

69
00:03:53,970 --> 00:03:56,130
the are a little bit below the midline.

70
00:03:56,130 --> 00:04:00,540
We don't want it to be exactly in the middle because then it might appear too close and if you click

71
00:04:00,540 --> 00:04:03,860
on the safe area you can see where the top bar goes.

72
00:04:03,990 --> 00:04:08,580
And as it is right now that's pretty much in the middle of the safe area that we can see on the green

73
00:04:08,580 --> 00:04:10,120
you use used That's great.

74
00:04:10,170 --> 00:04:11,660
Let's go ahead and pin it in place.

75
00:04:11,790 --> 00:04:17,550
So select the stack you click the pin button and we're going to go ahead and pin this eight from the

76
00:04:17,550 --> 00:04:20,370
bottom and add one constraint.

77
00:04:20,370 --> 00:04:25,140
Now we're going to go ahead and select the alignment button and we're going to pin it horizontally in

78
00:04:25,140 --> 00:04:27,680
the container and we're going to add one constraint.

79
00:04:27,720 --> 00:04:30,120
So now it will stay there perfectly.

80
00:04:30,150 --> 00:04:35,790
Next we're going to go ahead and add a UI button and this is the button you'll press to open the next

81
00:04:35,790 --> 00:04:37,100
screen to create a goal.

82
00:04:37,100 --> 00:04:43,320
So go ahead and search for a white button and drag one onto the view.

83
00:04:43,350 --> 00:04:44,550
Very cool.

84
00:04:44,550 --> 00:04:50,570
Now we're going to get rid of the label like so by pressing delete and then enter to to lock it in place.

85
00:04:50,700 --> 00:04:55,130
And now we need an image but we have not yet imported our assets.

86
00:04:55,140 --> 00:05:01,260
And so to do that I'm going to go ahead and I'm going to pull open an asset folder that you can download

87
00:05:01,260 --> 00:05:06,210
if you use the airdropped feature of the slopes app you can download the assets and when you open them

88
00:05:06,750 --> 00:05:11,760
you will be able to drag in these elements into your assets folder.

89
00:05:11,760 --> 00:05:19,050
So open the assets the assets folder and drag in these elements and you'll see there are three different

90
00:05:19,290 --> 00:05:21,310
images that we can use now.

91
00:05:21,390 --> 00:05:21,780
Cool.

92
00:05:21,780 --> 00:05:23,210
So let's go Adam.

93
00:05:23,580 --> 00:05:29,370
Click on main story storyboard and for this button we're going to change the image to add Gore.

94
00:05:29,670 --> 00:05:30,180
OK.

95
00:05:30,360 --> 00:05:33,360
And you'll notice it's a little squishy if I move it and stretch it.

96
00:05:33,360 --> 00:05:35,180
It kind of modifies the size.

97
00:05:35,280 --> 00:05:37,850
So we need to lock this to a fixed width and height.

98
00:05:37,890 --> 00:05:40,890
And we also need to center it with the goal post button.

99
00:05:40,890 --> 00:05:47,310
So to do that select the button click the pin button and we're going to pin this let's see how about

100
00:05:48,450 --> 00:05:55,020
15 from the right and instead of pinning it to the bottom we're going to actually pin the center of

101
00:05:55,020 --> 00:05:57,780
this to the center of the stack view.

102
00:05:57,840 --> 00:06:04,710
But for now let's go ahead and give it a fixed width and height of 30 and 30 add three constraints and

103
00:06:04,740 --> 00:06:07,350
you'll see actually it does kind of squishes.

104
00:06:07,350 --> 00:06:09,350
So that's not what we want.

105
00:06:09,450 --> 00:06:14,760
Let's go ahead let's undo the with constraint and that should stretch out to the appropriate aspect

106
00:06:14,760 --> 00:06:16,720
ratio that looks good.

107
00:06:17,010 --> 00:06:23,580
So now what we're going to do is we're going to select both the stack and the button by holding Shift.

108
00:06:23,670 --> 00:06:30,740
And now in the alignment menu we can select vertical centers and we'll give them the same vertical center.

109
00:06:30,840 --> 00:06:31,700
Add one constraint.

110
00:06:31,710 --> 00:06:33,750
And now it's going to stay in its place.

111
00:06:33,750 --> 00:06:35,220
Pretty cool.

112
00:06:35,220 --> 00:06:41,220
It's looking a little bit too low so I think I'm actually going to move this stack you up a little ways

113
00:06:41,220 --> 00:06:42,680
like maybe 12.

114
00:06:42,960 --> 00:06:48,410
And I think that just gives it a little bit more space to look the way it's supposed to.

115
00:06:48,780 --> 00:06:52,830
But you know what if I zoom in that still look a little bit.

116
00:06:53,400 --> 00:06:54,140
Whoops.

117
00:06:55,920 --> 00:06:57,070
We can't zoom in that way.

118
00:06:57,070 --> 00:06:59,650
It still looks a little bit squished to me.

119
00:06:59,710 --> 00:07:02,470
So let's let's get rid of the height constraint as well.

120
00:07:02,560 --> 00:07:04,560
And you know what I think actually it's fine.

121
00:07:04,570 --> 00:07:09,520
I think when we dragged it in for some reason it was getting squished it looks better now looks more

122
00:07:09,520 --> 00:07:10,780
like a perfect circle.

123
00:07:10,780 --> 00:07:11,620
All right.

124
00:07:11,740 --> 00:07:13,530
Supercool So that is in place now.

125
00:07:13,540 --> 00:07:14,050
That's great.

126
00:07:14,050 --> 00:07:15,680
It's going to stay where it is.

127
00:07:15,820 --> 00:07:24,910
And now what we need to do is we basically need to create a label here that kind of is like a welcome

128
00:07:24,910 --> 00:07:26,970
to the app type message.

129
00:07:27,100 --> 00:07:29,140
And then we need to add a table view as well.

130
00:07:29,140 --> 00:07:32,140
So let's go ahead and search for a UI label.

131
00:07:32,140 --> 00:07:33,470
Let's drag it on.

132
00:07:33,940 --> 00:07:37,180
And of course you know me we're going to make this Avenir next.

133
00:07:37,180 --> 00:07:39,310
My favorite font.

134
00:07:39,430 --> 00:07:40,620
Here we go Abbondio next.

135
00:07:40,630 --> 00:07:46,240
And I'm going to make this size 24 it can afford to be a little bit bigger.

136
00:07:46,280 --> 00:07:48,070
And now let's go ahead and type.

137
00:07:48,130 --> 00:07:51,080
Welcome to goalpost.

138
00:07:51,560 --> 00:07:51,980
OK.

139
00:07:52,030 --> 00:07:57,520
Just a little welcome message for our users and this is going to be displayed when the user first opens

140
00:07:57,520 --> 00:08:02,230
the app and it will be shown every time they have no goals set.

141
00:08:02,260 --> 00:08:07,750
So we're going to go ahead and just position this right about here and we're going to center that font.

142
00:08:07,750 --> 00:08:10,830
Next we're going to go ahead and give them some directions.

143
00:08:10,930 --> 00:08:17,110
So let's duplicate that label by pressing command D and we're going to lower this down to maybe size

144
00:08:17,170 --> 00:08:24,290
16 K and we're going to change this to say to begin create a goal.

145
00:08:24,460 --> 00:08:28,570
And that's just going to kind of give them the give them some directions tell them what to do and guide

146
00:08:28,570 --> 00:08:29,010
them.

147
00:08:29,020 --> 00:08:34,960
So go ahead and select both of these and just like the other text UI labels we're going to go ahead

148
00:08:34,990 --> 00:08:41,020
and put them in a stack view that keeps them in the same area keeps them nice and centered and beautiful

149
00:08:41,260 --> 00:08:42,100
which is what we want.

150
00:08:42,250 --> 00:08:48,400
So now let's go ahead and let's select the alignment button let's make sure that this stays horizontally

151
00:08:48,460 --> 00:08:51,430
in the container and add one constraint.

152
00:08:51,430 --> 00:08:58,060
Now we're going to go ahead and we're going to pin this may be 75 from the top and press enter.

153
00:08:58,060 --> 00:09:01,930
Now you'll see that it will stay right there in its place and that's exactly what we want.

154
00:09:01,990 --> 00:09:02,900
Really cool.

155
00:09:03,100 --> 00:09:07,380
So now what we need to do is add on AUI table view.

156
00:09:07,560 --> 00:09:12,900
OK let's do the search for UI table view and drag one on.

157
00:09:13,180 --> 00:09:13,460
OK.

158
00:09:13,480 --> 00:09:15,070
Really really cool.

159
00:09:15,070 --> 00:09:21,380
Now the thing that we need to think about is you can see this is dropping into our background view.

160
00:09:21,590 --> 00:09:28,060
Okay that's fine but we need to remember this needs to actually go on top of our label here because

161
00:09:28,090 --> 00:09:33,090
if there are goals that have been saved this table view should be shown.

162
00:09:33,130 --> 00:09:39,200
So we're actually going to need to make sure that this is on top of the label here when we're done.

163
00:09:39,220 --> 00:09:41,970
So we're just going to drag this to fill the screen.

164
00:09:41,980 --> 00:09:44,680
And as you can see it definitely is covering it.

165
00:09:44,680 --> 00:09:45,390
So that's what we want.

166
00:09:45,390 --> 00:09:46,420
That's great.

167
00:09:46,420 --> 00:09:48,430
Now let's go ahead and pin it in place.

168
00:09:48,430 --> 00:09:53,100
So let's pinnate zero from the left to zero from the bottom zero from the right and we're going to pinnate

169
00:09:53,110 --> 00:09:54,090
zero from the top.

170
00:09:54,100 --> 00:09:59,510
But you're going to need to change that eight to zero so that it pulls up right next to the green you

171
00:09:59,600 --> 00:09:59,860
view.

172
00:09:59,860 --> 00:10:01,090
Nice and snug.

173
00:10:01,090 --> 00:10:04,200
So tap add four constraints and there you go.

174
00:10:04,210 --> 00:10:09,010
Now we can go ahead and drag on a table view cell just like we want and we can drop it into our table

175
00:10:09,010 --> 00:10:09,920
view.

176
00:10:10,030 --> 00:10:10,610
Awesome.

177
00:10:10,660 --> 00:10:12,270
Super duper cool.

178
00:10:12,350 --> 00:10:20,320
But this is a really skinny little cell Let's go ahead and drag it down to maybe looks like 60 maybe

179
00:10:20,320 --> 00:10:21,410
70.

180
00:10:21,860 --> 00:10:22,310
Let's go.

181
00:10:22,330 --> 00:10:26,590
Let's set the row height to 70 and then so that it matches.

182
00:10:26,590 --> 00:10:32,290
We need to select the table view as well like so and then go into the row height and type 70 just to

183
00:10:32,290 --> 00:10:37,340
make sure that it stays with that 70 height for our table cell.

184
00:10:37,570 --> 00:10:41,800
And we're going to go ahead and build out this table for you cell later but for now we're going to go

185
00:10:41,800 --> 00:10:44,050
ahead and just go ahead.

186
00:10:44,050 --> 00:10:50,890
But for now we're just going to go ahead and hide this table view by default because we want our view

187
00:10:50,890 --> 00:10:58,010
back here to show if there is no goal set but for the most part we're going to be wanting to see this.

188
00:10:58,030 --> 00:11:04,690
So we're going to set it as hidden by default and show it if there definitely are goals saved.

189
00:11:04,690 --> 00:11:10,350
So to do this go ahead and click on the attributes and Specter scroll down and select hidden.

190
00:11:10,630 --> 00:11:11,260
OK.

191
00:11:11,560 --> 00:11:16,660
Now let's go ahead and let's set up the I.D. outlets and actions so that we can interface with this

192
00:11:16,660 --> 00:11:18,140
in our view control or file.

193
00:11:18,190 --> 00:11:24,100
So to do that select the assistant editor and you'll see goals Visi shows up right away.

194
00:11:24,220 --> 00:11:29,500
Get rid of did receive memory warning and for now let's go ahead and let's think what we need to do.

195
00:11:29,500 --> 00:11:31,810
We need to create an outlet for Table View.

196
00:11:31,810 --> 00:11:33,220
Let's do that.

197
00:11:33,220 --> 00:11:36,230
Just call it Table View and click connect.

198
00:11:36,230 --> 00:11:36,580
All right.

199
00:11:36,580 --> 00:11:38,000
Very cool.

200
00:11:38,080 --> 00:11:42,720
We need to modify the button.

201
00:11:42,730 --> 00:11:47,530
What we don't need to modify but we need to do something when we press it so let's right click and let's

202
00:11:47,530 --> 00:11:52,850
create an IB action called add gold button was pressed.

203
00:11:52,990 --> 00:11:54,440
And that's great.

204
00:11:54,450 --> 00:11:59,730
Now inside of this function we can call whatever we want and the button will do it and you know what

205
00:11:59,730 --> 00:12:00,730
for now.

206
00:12:00,840 --> 00:12:03,630
I think this is actually all we're going to need.

207
00:12:03,630 --> 00:12:08,850
We need action from our button and we need an outlet to our table views that we can properly interface

208
00:12:08,850 --> 00:12:11,590
with it and display all of our goals that we've saved.

209
00:12:11,670 --> 00:12:14,010
We've not done that yet but we will.

210
00:12:14,070 --> 00:12:15,280
Guys amazing work.

211
00:12:15,300 --> 00:12:20,040
Our first view controller is done and we can now appropriately interface with it.

212
00:12:20,040 --> 00:12:21,360
So that's amazing.

213
00:12:21,430 --> 00:12:29,640
We should test it to make sure it works so I'm just going to go ahead and print button was pressed.

214
00:12:29,940 --> 00:12:30,510
OK.

215
00:12:30,720 --> 00:12:31,770
Just to make sure it works.

216
00:12:31,800 --> 00:12:33,470
And now let's go ahead and build it.

217
00:12:33,480 --> 00:12:34,730
So build and run.

218
00:12:34,740 --> 00:12:39,180
Let's make sure that our interface looks good the way it's supposed to.

219
00:12:39,240 --> 00:12:44,270
And then after it's done being built we're going to go ahead and move on to the next video but let's

220
00:12:44,280 --> 00:12:45,940
make sure everything's good to go first.

221
00:12:45,960 --> 00:12:51,050
It's really good that we build this along the way just to check and verify that everything is good.

222
00:12:51,450 --> 00:12:52,580
So here we go.

223
00:12:52,580 --> 00:12:57,280
It's opening up and let's see how we did.

224
00:12:57,540 --> 00:12:58,730
All right look at that.

225
00:12:58,750 --> 00:12:59,380
That looks great.

226
00:12:59,380 --> 00:13:03,390
So our table to use hidden by default like it should be our labels are centered.

227
00:13:03,400 --> 00:13:04,720
Everything looks good.

228
00:13:04,810 --> 00:13:07,690
And when I click on my button button was pressed.

229
00:13:07,690 --> 00:13:09,630
OK our action is firing properly.

230
00:13:09,640 --> 00:13:11,020
Very very cool.

231
00:13:11,020 --> 00:13:12,390
Amazing work guys.

232
00:13:12,490 --> 00:13:19,180
In the next video we're going to build out our our goal cell in the next video we're going to build

233
00:13:19,180 --> 00:13:20,830
out our goal cell.

234
00:13:20,830 --> 00:13:24,970
We're going to write the subclass and we're also going to set up the outlets and actions for that goal

235
00:13:24,970 --> 00:13:28,690
sell so that we can properly interface with it when the time is right.

236
00:13:28,690 --> 00:13:31,690
Very Great job guys and I'll see in the next video.