1
00:00:08,090 --> 00:00:11,510
Hey guys has gone this is Caleb with Debb slopes dot com.

2
00:00:11,540 --> 00:00:16,880
And in this video we're going to build out the feed we see and the groups we see which if you remember

3
00:00:16,880 --> 00:00:20,660
from our simulator Let's go take a peek let's sorry.

4
00:00:20,660 --> 00:00:24,160
Let me log in to my account here.

5
00:00:27,200 --> 00:00:29,140
OK we're going to log in.

6
00:00:29,150 --> 00:00:30,130
Very cool.

7
00:00:30,170 --> 00:00:36,620
The feed we see has a nice long table view here of every post that anyone has posted publicly.

8
00:00:36,620 --> 00:00:42,290
And we're going to set up groups Visi so that we have a nice channel here where you can access all the

9
00:00:42,290 --> 00:00:44,060
groups that you're part of.

10
00:00:44,090 --> 00:00:44,870
Very cool.

11
00:00:44,880 --> 00:00:48,890
And let's do it now pull open your X code project.

12
00:00:48,890 --> 00:00:50,090
Lovely.

13
00:00:50,090 --> 00:00:51,740
Very very good let's close that.

14
00:00:51,740 --> 00:00:55,280
Let's stop the running so that we do not waste any memory.

15
00:00:55,460 --> 00:00:58,270
And let's go to the main story board.

16
00:00:58,270 --> 00:00:59,260
OK.

17
00:00:59,270 --> 00:00:59,840
Very cool.

18
00:00:59,840 --> 00:01:04,670
And this is where we're actually going to start using our Tabar controller so you can zoom on over to

19
00:01:04,670 --> 00:01:05,510
that.

20
00:01:05,630 --> 00:01:11,960
And you know what there's something we need to do what we need to do first is we need to select the

21
00:01:11,960 --> 00:01:14,830
document here and there is something that you can do that.

22
00:01:14,840 --> 00:01:20,600
I actually just learned when I was starting to make this course is that you can set a global tint so

23
00:01:20,600 --> 00:01:26,580
every button you add every tab bar button is set to the same tent which I thought was really cool.

24
00:01:26,750 --> 00:01:30,600
And for all the buttons we're going to actually be using that teal color.

25
00:01:30,740 --> 00:01:34,850
So go ahead and set that Teal 0 for ABC 5.

26
00:01:34,850 --> 00:01:36,630
Set that to be your global tent.

27
00:01:36,630 --> 00:01:42,280
And now as you can see the button here for the tab bar set to that global tent which is really cool.

28
00:01:42,410 --> 00:01:47,290
You can of course change it but it's great for what we're doing in this course.

29
00:01:47,300 --> 00:01:54,410
So now let's go ahead and build out feed Visi and to do that we're going to actually modify these View

30
00:01:54,410 --> 00:01:57,470
Controller files so that they fit the name.

31
00:01:57,470 --> 00:02:00,430
I don't like that this is just called first view controller that's boring.

32
00:02:00,560 --> 00:02:03,940
So I'm going to change it to say feed visi.

33
00:02:04,550 --> 00:02:10,850
This one I'm going to change to be groups VC and back in the storyboard.

34
00:02:10,850 --> 00:02:15,450
We of course need to change this because it still thinks that it's a first controller.

35
00:02:15,650 --> 00:02:24,650
It's not OK change that to feed Visi then we're going to change this two groups visi.

36
00:02:24,740 --> 00:02:25,730
All right.

37
00:02:25,730 --> 00:02:27,140
Very cool.

38
00:02:27,140 --> 00:02:28,190
Not too bad.

39
00:02:28,190 --> 00:02:33,620
And now what we can do is we can actually start building out the interface.

40
00:02:33,650 --> 00:02:36,830
So get rid of these labels that are provided by X code.

41
00:02:36,890 --> 00:02:40,720
We don't need those and we're going to start in on feed's VC.

42
00:02:40,850 --> 00:02:44,900
So go ahead and let's change the title here.

43
00:02:46,170 --> 00:02:52,010
To say feed we're also going to set the image to be our feed tab icon.

44
00:02:52,050 --> 00:02:52,620
Very cool.

45
00:02:52,620 --> 00:02:59,370
And so now that will show up while we're at it let's go ahead and change second to say groups and we'll

46
00:02:59,370 --> 00:03:03,340
also change the icon to be our group's tab icon.

47
00:03:03,360 --> 00:03:04,550
Simple enough.

48
00:03:04,650 --> 00:03:09,300
And you know what I thought that these looked actually cooler in green.

49
00:03:09,300 --> 00:03:15,650
And so what we're going to do is on the tab bar the tent is blue like it like it we've set it to be.

50
00:03:15,810 --> 00:03:17,830
But we're actually going to change it to be green.

51
00:03:18,090 --> 00:03:18,740
OK.

52
00:03:18,990 --> 00:03:23,070
And you know you don't really notice that change until you go off the Tabar and selected again.

53
00:03:23,070 --> 00:03:25,340
But they are now green.

54
00:03:25,380 --> 00:03:30,240
Now there's another thing we need to change and that is this Tabar is currently kind of a gray color.

55
00:03:30,240 --> 00:03:32,160
We want it to be dark.

56
00:03:32,220 --> 00:03:38,160
So select the tab bar controller tab and then for the bar tent set it to be that kind of light ish gray

57
00:03:38,160 --> 00:03:42,790
color and you'll see it turns to that really cool gray suite.

58
00:03:42,810 --> 00:03:48,580
So next up what we're going to do is we're going to dive into feed visi.

59
00:03:48,690 --> 00:03:51,000
Let's go ahead and begin by actually setting the.

60
00:03:51,000 --> 00:03:54,030
Far this back background to be that light gray colors.

61
00:03:54,040 --> 00:03:56,690
Well that looks good.

62
00:03:56,850 --> 00:04:04,290
And if you're wondering that color is 4 1 4 5 5 0 and we're going to put a view up at the top here and

63
00:04:04,290 --> 00:04:06,170
that's going to house all of our buttons.

64
00:04:06,180 --> 00:04:12,910
So go ahead and type you I view and you view drag it on.

65
00:04:12,930 --> 00:04:15,580
And of course we need to resize it.

66
00:04:15,690 --> 00:04:18,480
So go ahead and let's make this 70.

67
00:04:18,620 --> 00:04:20,130
I think that looks pretty good.

68
00:04:20,610 --> 00:04:24,900
Let's set the background to be that very dark black color.

69
00:04:25,220 --> 00:04:25,590
OK.

70
00:04:25,590 --> 00:04:27,120
Very cool.

71
00:04:27,120 --> 00:04:28,280
That looks pretty good.

72
00:04:28,590 --> 00:04:32,120
And now we need to give it a label and a button.

73
00:04:32,400 --> 00:04:36,920
So let's do that now by typing UI label.

74
00:04:37,410 --> 00:04:40,180
Drag one on here and center it.

75
00:04:40,200 --> 00:04:41,610
That looks good.

76
00:04:41,610 --> 00:04:43,790
Next we need a button.

77
00:04:44,460 --> 00:04:47,360
Drag it on and you'll see because of the global tint.

78
00:04:47,370 --> 00:04:49,920
The text color is already the right blue.

79
00:04:49,920 --> 00:04:51,040
Very helpful.

80
00:04:51,270 --> 00:04:56,310
Let's get rid of button and this is going to be to compose a new post.

81
00:04:56,310 --> 00:05:03,030
So tap compose and you'll see it changes to the compose image like we want for these buttons on the

82
00:05:03,030 --> 00:05:09,910
side we're trying to mimic a navigation controller we're not actually using one but we want to do that.

83
00:05:09,930 --> 00:05:17,580
And so we're going to set this actually to be 30 from the top and 20 from the right give it a fixed

84
00:05:17,580 --> 00:05:21,480
width and height of 30 and pin that exactly in place.

85
00:05:21,480 --> 00:05:31,920
Now we're getting some issues here because it appears that we are not properly pinned in our place.

86
00:05:31,920 --> 00:05:32,870
What's the deal.

87
00:05:34,380 --> 00:05:39,900
Oh of course we have not yet set constraints on this outer view so go ahead and pin this zero from the

88
00:05:39,900 --> 00:05:45,980
left top and right and then give it a fixed height of 70 and you'll see the button goes back into its

89
00:05:45,980 --> 00:05:48,290
spot and the constraints are perfect.

90
00:05:48,300 --> 00:05:50,320
Next choose your label.

91
00:05:50,370 --> 00:05:55,170
We're going to actually stretch it out here a little ways and we're going to center the font change

92
00:05:55,170 --> 00:05:59,490
the color to that nice bright green and change the font.

93
00:05:59,490 --> 00:06:01,080
To be Menlo.

94
00:06:01,250 --> 00:06:01,790
OK.

95
00:06:01,830 --> 00:06:07,800
Set it to be 18 and then change the words to say feed.

96
00:06:07,830 --> 00:06:09,150
Very cool.

97
00:06:09,150 --> 00:06:12,880
Now let's go ahead and let's pin this.

98
00:06:12,930 --> 00:06:14,380
How do we want to do this.

99
00:06:14,400 --> 00:06:19,500
I want it to be perfectly centered but I also want it to be perfectly in line with the button so to

100
00:06:19,500 --> 00:06:25,830
do that I'm going to go ahead and select my label here I'm going to go ahead and select the alignment

101
00:06:25,830 --> 00:06:28,890
button and pin it horizontally in the container.

102
00:06:28,890 --> 00:06:34,290
Then I'm going to select the label and the button and I'm going to go ahead and give these the same

103
00:06:34,290 --> 00:06:35,830
vertical centers.

104
00:06:35,880 --> 00:06:36,580
OK.

105
00:06:36,960 --> 00:06:43,360
Now to make sure this stays the same size I'm going to go ahead and give this a height and width that

106
00:06:43,380 --> 00:06:44,600
is fixed.

107
00:06:45,090 --> 00:06:45,780
And now we're good.

108
00:06:45,780 --> 00:06:48,350
That'll stay exactly in its place.

109
00:06:48,360 --> 00:06:50,840
We're actually going to replicate this later on.

110
00:06:50,850 --> 00:06:55,620
And we're going to use it throughout our app so this is just a cool way to make a sort of a pseudo UI

111
00:06:55,620 --> 00:06:58,890
navigation controller type view.

112
00:06:59,060 --> 00:06:59,330
OK.

113
00:06:59,340 --> 00:07:00,720
Simple as that.

114
00:07:00,720 --> 00:07:07,170
Now what we're going to do is we're going to drag on AUI table view and that is where we're going to

115
00:07:07,170 --> 00:07:14,100
house all of our posts so drag it onto The View and we're going to scale it so that it fits the entire

116
00:07:14,100 --> 00:07:15,050
width of the view.

117
00:07:15,420 --> 00:07:20,300
You'll notice though that it snaps 8 from the top and it won't actually snap on to this view.

118
00:07:20,670 --> 00:07:23,220
That's because we have to do it manually using constraints.

119
00:07:23,220 --> 00:07:29,970
So once you've stretched it out click the pin button and we're going to pin it from all sides but change

120
00:07:29,970 --> 00:07:34,020
this eight to zero and watch what happens when you add four constraints.

121
00:07:34,020 --> 00:07:36,280
It moves up exactly where it's supposed to be.

122
00:07:36,480 --> 00:07:37,680
Very cool.

123
00:07:37,680 --> 00:07:42,320
Now we're going to drop in a table view cell just like that.

124
00:07:42,390 --> 00:07:47,880
We're going to stretch it so that it is 100 high and you know what we're going to actually modify this

125
00:07:47,940 --> 00:07:49,440
custom Lee.

126
00:07:49,470 --> 00:07:50,310
So that's good.

127
00:07:50,340 --> 00:07:51,890
The row height is 100.

128
00:07:51,960 --> 00:07:56,310
But we need to also set that in our table view to be 100.

129
00:07:56,340 --> 00:07:58,610
Otherwise there will be differences.

130
00:07:58,610 --> 00:07:59,280
OK.

131
00:07:59,760 --> 00:08:04,650
We're going to come back to this cell later on we're going to actually build out the cell and change

132
00:08:04,650 --> 00:08:07,320
the colors at Image views labels et et cetera.

133
00:08:07,470 --> 00:08:08,710
But for now this is great.

134
00:08:08,730 --> 00:08:12,300
Let's leave it at this with one small change.

135
00:08:12,300 --> 00:08:17,460
Click on your table view and we want to set the background of our table view to match the background

136
00:08:17,460 --> 00:08:19,570
that is now hiding behind this.

137
00:08:19,590 --> 00:08:21,810
So undo that.

138
00:08:21,810 --> 00:08:24,240
Select the table view and scroll down.

139
00:08:24,240 --> 00:08:28,740
Change the background color to be the lighter of the two grace and that's that.

140
00:08:28,740 --> 00:08:29,700
Very cool.

141
00:08:29,700 --> 00:08:34,680
If we build and run this now we should take a look and see if our feet is actually showing up the way

142
00:08:34,680 --> 00:08:35,090
we want.

143
00:08:35,100 --> 00:08:36,750
So build and run.

144
00:08:37,350 --> 00:08:38,750
Let's see how it does.

145
00:08:40,750 --> 00:08:44,070
Beautiful looks like our simulator is up.

146
00:08:44,300 --> 00:08:46,600
We're switching over and look at that.

147
00:08:46,610 --> 00:08:47,870
We get a feed.

148
00:08:47,900 --> 00:08:54,740
Each cell is one hundred high we have a button a label and it looks like these are stuck showing the

149
00:08:54,740 --> 00:08:56,180
wrong color.

150
00:08:56,180 --> 00:08:57,900
That is not what we want.

151
00:08:57,950 --> 00:09:01,570
So let's go ahead let's head back and change this.

152
00:09:01,640 --> 00:09:09,570
It appears that these are successfully showing it appears that these are good as well.

153
00:09:10,570 --> 00:09:13,980
OK we have set our bar item.

154
00:09:14,640 --> 00:09:15,730
OK that's good.

155
00:09:15,940 --> 00:09:19,240
We have set these to look good our image tint.

156
00:09:19,270 --> 00:09:20,110
That might be the problem.

157
00:09:20,110 --> 00:09:23,350
Let's set that green and let's try to build and run it again.

158
00:09:23,350 --> 00:09:29,740
Let's see if that changes from the default blue to our appropriate green color much better.

159
00:09:29,740 --> 00:09:29,970
OK.

160
00:09:29,980 --> 00:09:30,340
Awesome.

161
00:09:30,340 --> 00:09:33,770
So the tent and the text are now both the right green color.

162
00:09:33,850 --> 00:09:39,230
We have an awesome table view here and now let's build out groups visi.

163
00:09:39,370 --> 00:09:45,340
First of all we need to set the identity here to be groups Visi we push enter.

164
00:09:45,340 --> 00:09:47,680
It looks like it's still holding onto its name.

165
00:09:47,680 --> 00:09:50,640
So let's go ahead let's actually change this to groups.

166
00:09:51,130 --> 00:09:51,760
Oh you know what.

167
00:09:51,760 --> 00:09:52,480
It won't let us.

168
00:09:52,480 --> 00:09:54,990
That's odd huh.

169
00:09:57,590 --> 00:09:58,010
Interesting.

170
00:09:58,010 --> 00:10:03,400
Well it looks like we're successfully setting its identity to groups of.

171
00:10:03,650 --> 00:10:05,820
And it's showing up as a groups scene.

172
00:10:05,840 --> 00:10:09,740
But for some reason we can't really seem to get rid of that second name.

173
00:10:09,740 --> 00:10:12,440
Maybe that's just a bug in Interface Builder.

174
00:10:13,010 --> 00:10:15,700
Let's check huh.

175
00:10:15,750 --> 00:10:16,220
Interesting.

176
00:10:16,260 --> 00:10:19,560
OK well you know what if we run into issues we can fix that later on.

177
00:10:19,560 --> 00:10:22,140
But for now let's just go ahead and keep what we're doing.

178
00:10:22,320 --> 00:10:22,800
And you know what.

179
00:10:22,800 --> 00:10:28,140
For this view controller we're basically going to duplicate what we have here but we're going to change

180
00:10:28,140 --> 00:10:30,480
it and modify it so that it's four groups.

181
00:10:30,480 --> 00:10:36,640
So I'm actually going to go ahead and copy this select this view controller and paste it.

182
00:10:36,990 --> 00:10:40,500
And that's actually going to allow me to just kind of duplicate what I've already done.

183
00:10:40,530 --> 00:10:45,210
The only thing I need to change is the constraints pinning it to the left top and right and giving it

184
00:10:45,210 --> 00:10:50,860
a fixed height of 70 although it looks like that constraint carried over.

185
00:10:51,040 --> 00:10:51,750
Yes.

186
00:10:51,780 --> 00:10:55,230
So get rid of the one that says greater than or equal to 70.

187
00:10:55,260 --> 00:11:00,890
And of course we're going to want to change this to say groups with the underscore of course.

188
00:11:01,140 --> 00:11:07,500
And let's change the width to 70 or so maybe 100 so that everything fits awesome.

189
00:11:07,860 --> 00:11:11,910
Now for groups we're going to give the ability to add a group.

190
00:11:11,910 --> 00:11:19,170
So go ahead and we're going to change the image to add new icon and that'll give us a nice little plus

191
00:11:19,170 --> 00:11:20,650
button which is really cool.

192
00:11:20,970 --> 00:11:25,410
Next we're going to add a table view just like we did here and you know what we're going to copy and

193
00:11:25,410 --> 00:11:30,300
paste it to the nice thing that we have not set up any Iby outlets or actions that could carry over

194
00:11:30,300 --> 00:11:31,590
and causes problems.

195
00:11:31,590 --> 00:11:33,170
That's why I'm doing this for now.

196
00:11:33,240 --> 00:11:39,780
So go ahead and select your table view copy it select your other view controller and paste it and now

197
00:11:39,780 --> 00:11:43,360
will just drag it into its perfect place and give it some constraints.

198
00:11:43,410 --> 00:11:48,900
So pinnate zero from the left top right and bottom and that's that.

199
00:11:48,930 --> 00:11:55,450
Let's go see if it worked let's build and run and let's check to see if we have a nice lovely feed VC

200
00:11:55,530 --> 00:11:58,750
and group VC feed.

201
00:11:58,800 --> 00:12:00,690
VC looks awesome groups.

202
00:12:00,730 --> 00:12:02,210
VC also looks awesome.

203
00:12:02,210 --> 00:12:07,380
There's our plus button feed VC looks good but I'm seeing a problem.

204
00:12:07,500 --> 00:12:11,900
The inactive icon hides.

205
00:12:11,900 --> 00:12:16,860
It's the same color as the Tabar So we need to fix that as well.

206
00:12:16,860 --> 00:12:21,190
Let's go ahead and let's find out what the deal is.

207
00:12:21,210 --> 00:12:27,590
So groups if we select this it appears that the selected image is good.

208
00:12:27,840 --> 00:12:32,050
Okay that's great.

209
00:12:32,060 --> 00:12:34,500
It appears that the selected image is good.

210
00:12:34,580 --> 00:12:39,930
The unselected image I believe the tent is supposed to be light gray.

211
00:12:40,250 --> 00:12:43,820
Let's see if that works let's set it to our like gray here.

212
00:12:43,820 --> 00:12:48,620
Let's move on and let's go ahead and let's check to see if that fixed our problem by changing it to

213
00:12:48,620 --> 00:12:49,550
gray.

214
00:12:50,740 --> 00:12:51,130
OK.

215
00:12:51,230 --> 00:12:53,200
So that definitely changed the tint of the image.

216
00:12:53,210 --> 00:12:54,750
We want it to be green.

217
00:12:54,830 --> 00:12:58,510
The bartend we want to be gray and 0 and the overall tint.

218
00:12:58,520 --> 00:13:00,990
Perhaps we want to be that like Gray.

219
00:13:01,010 --> 00:13:04,080
Let's give that a shot and see if that fixes the problem.

220
00:13:08,750 --> 00:13:11,990
So no I did not fix the problem it looks like they're still hiding.

221
00:13:11,990 --> 00:13:14,290
So let's go change it again maybe.

222
00:13:14,300 --> 00:13:15,300
Let's try red.

223
00:13:15,380 --> 00:13:21,640
Make it very obvious that it's the right color see if that fixes the problem.

224
00:13:21,650 --> 00:13:23,780
OK it appears that does not solve the problem either.

225
00:13:23,780 --> 00:13:28,810
So let's just go ahead and set this to default and interesting.

226
00:13:28,820 --> 00:13:36,320
So what is the deal here looks like when we are selected that is the image OK the position is fine the

227
00:13:36,320 --> 00:13:38,570
image is fine.

228
00:13:38,810 --> 00:13:41,170
Images also find yet they're all fine.

229
00:13:41,270 --> 00:13:42,920
That looks good.

230
00:13:42,920 --> 00:13:43,770
The background.

231
00:13:43,790 --> 00:13:46,870
You know what Perhaps this is the problem.

232
00:13:46,910 --> 00:13:50,350
Let's go ahead and let's try to set this to our dark gray color.

233
00:13:50,570 --> 00:13:54,580
Let's build and run let's see if that fixes anything for us.

234
00:13:56,790 --> 00:13:57,130
OK.

235
00:13:57,140 --> 00:13:57,450
No.

236
00:13:57,460 --> 00:14:12,720
So interesting we're still having trouble here.

237
00:14:12,820 --> 00:14:20,580
OK so let's go ahead let's change this Tabar to have a clear color in the background.

238
00:14:20,920 --> 00:14:27,130
Change the tent back to that green and let's go ahead and let's try this again build and run WIPs build

239
00:14:27,130 --> 00:14:33,420
and run to the simulator of course and let's see if that fixed our problem this is really odd.

240
00:14:33,430 --> 00:14:38,080
I did not have this problem before so you're kind of getting to see me solve this.

241
00:14:38,080 --> 00:14:39,500
Like I would in real life.

242
00:14:39,700 --> 00:14:42,370
Let's see if that fixed our issue.

243
00:14:42,580 --> 00:14:50,990
And no weird even if I zoom in it appears that that is just totally not there.

244
00:14:51,010 --> 00:14:52,660
Super weird.

245
00:14:52,660 --> 00:14:55,200
We've given it up.

246
00:14:55,390 --> 00:14:56,530
I see the problem.

247
00:14:56,530 --> 00:14:59,140
It's really obvious guys.

248
00:14:59,320 --> 00:15:01,760
So I've set the image here.

249
00:15:01,780 --> 00:15:08,830
I have chosen an image from the selected image but the bar item is still referencing that old first

250
00:15:08,860 --> 00:15:09,130
image.

251
00:15:09,130 --> 00:15:12,340
That's one of the dangers of using the pre-built projects from Apple.

252
00:15:12,340 --> 00:15:14,860
Sometimes you forgot forget very simple things like that.

253
00:15:14,860 --> 00:15:15,640
My goodness.

254
00:15:15,650 --> 00:15:19,890
OK choose feed tab icon and now it shows up here.

255
00:15:20,080 --> 00:15:20,650
Look at that.

256
00:15:20,710 --> 00:15:25,950
OK select groups and change second to groups tab icon.

257
00:15:25,960 --> 00:15:28,360
Sorry guys that took far too long.

258
00:15:28,390 --> 00:15:34,600
If we build and run now you can actually see that it is going to appropriately show up the right color

259
00:15:34,600 --> 00:15:35,860
when not selected.

260
00:15:35,860 --> 00:15:36,460
There it is.

261
00:15:36,460 --> 00:15:40,020
And when selected it changes to the green icon.

262
00:15:40,060 --> 00:15:41,200
My goodness sorry guys.

263
00:15:41,260 --> 00:15:43,660
You probably were watching me going just fix it.

264
00:15:43,660 --> 00:15:46,920
You probably saw it before me so I apologize for that.

265
00:15:46,930 --> 00:15:49,120
But it's now fixed.

266
00:15:49,150 --> 00:15:54,540
We have an awesome feed we and groups we see it looks great.

267
00:15:54,550 --> 00:15:59,370
Let's go ahead and let's move on to the next video where we're going to create the profile of you controller.

268
00:15:59,560 --> 00:16:04,030
We're going to add a new controller to the UI tab bar controller and we're going to make sure that all

269
00:16:04,030 --> 00:16:06,490
the icons are working the way they're supposed to.

270
00:16:06,730 --> 00:16:10,150
And let's go ahead and let's head over to the next video and let's do it.