1
00:00:08,100 --> 00:00:10,520
Hey everybody this is Caleb with slopestyle.

2
00:00:10,800 --> 00:00:14,880
And in this video we're going to continue building out our app interface.

3
00:00:14,880 --> 00:00:17,560
We're going to build the interface for Trending feed visi.

4
00:00:17,660 --> 00:00:23,700
We're going to at our table view we're going to add some labels we're going to build in the visual part

5
00:00:23,790 --> 00:00:25,890
of the table cell.

6
00:00:26,070 --> 00:00:29,150
And then we're going to connect everything with Iby outlets.

7
00:00:29,160 --> 00:00:35,900
So let's go ahead and let's pull open our project just like so and let's zoom in on trending feed Visi

8
00:00:35,910 --> 00:00:41,030
and we're actually going to set the background back to white like we had it just like that.

9
00:00:41,040 --> 00:00:42,210
Very cool.

10
00:00:42,210 --> 00:00:48,550
Now we're going to also go ahead and add in a table view just like so.

11
00:00:48,860 --> 00:00:49,080
OK.

12
00:00:49,110 --> 00:00:55,180
Let's go ahead and drag it so that it stops right here at the top of the trending bar.

13
00:00:55,260 --> 00:00:59,640
And then we're going to leave some room for a label for the app name.

14
00:00:59,640 --> 00:01:01,440
Cable will do constraints in a second.

15
00:01:01,440 --> 00:01:03,100
So just go ahead and type UI.

16
00:01:03,140 --> 00:01:05,610
Whoops there we go UI label.

17
00:01:05,850 --> 00:01:12,540
Drag it on right there and I'm going to change the font to custom the family to Avenir next.

18
00:01:12,570 --> 00:01:18,350
And we're going to do let's try bold and let's do sys 20.

19
00:01:18,350 --> 00:01:20,130
It looks pretty good.

20
00:01:20,160 --> 00:01:27,120
All right let's go ahead and center the font and let's set the color to be this nice blue color which

21
00:01:27,150 --> 00:01:32,070
if you're wondering well maybe a little darker darker looks good.

22
00:01:32,220 --> 00:01:34,770
That's 4 7 7 6.

23
00:01:34,860 --> 00:01:37,240
If you want to use it you are welcome to.

24
00:01:37,450 --> 00:01:38,710
And that's great.

25
00:01:38,850 --> 00:01:44,190
OK so let's go ahead and leave it like that but we're going to rename this versey because that's the

26
00:01:44,190 --> 00:01:46,030
name of our application.

27
00:01:46,030 --> 00:01:49,060
Now you're probably noticing there is a safe area.

28
00:01:49,170 --> 00:01:52,590
OK and that is where our content will show up.

29
00:01:52,590 --> 00:01:57,750
Now this is where the status bar goes at the top of the iPhone so they're just helping us to basically

30
00:01:58,800 --> 00:02:03,860
pay attention to where the status bar is and not have content that is over the status bar.

31
00:02:03,870 --> 00:02:09,270
So as you can see that's nice and centered where it will be visible beneath the status bar so let's

32
00:02:09,270 --> 00:02:12,870
go ahead and let's pin this the way that we should.

33
00:02:12,900 --> 00:02:13,380
OK.

34
00:02:13,620 --> 00:02:18,450
We're going to pin 10 from the top and let's go ahead and pin 10 from the left and 10 from the right

35
00:02:18,450 --> 00:02:22,750
as well makes it a little bit longer but nothing else is going to be going there.

36
00:02:22,800 --> 00:02:24,280
So that's fine.

37
00:02:24,330 --> 00:02:25,190
Awesome.

38
00:02:25,210 --> 00:02:26,850
So versey is now in place.

39
00:02:26,850 --> 00:02:31,190
I think we could also afford to maybe bump it up to size 22.

40
00:02:31,590 --> 00:02:35,090
Although you know what that might make it a little off centered.

41
00:02:35,190 --> 00:02:39,220
So let's go ahead and change that from 10 on the top.

42
00:02:39,330 --> 00:02:41,040
Let's change that to eight.

43
00:02:41,040 --> 00:02:41,800
There we go.

44
00:02:42,210 --> 00:02:42,540
OK.

45
00:02:42,570 --> 00:02:47,700
So now let's go ahead and constrain our table view by adding constraints and we're going to set it to

46
00:02:47,700 --> 00:02:53,460
be zero from the label zero from the left zero from the right and zero from the bottom as well.

47
00:02:53,640 --> 00:02:54,420
Just like so.

48
00:02:54,450 --> 00:03:00,270
And of course that's actually zero from the top of the UI tab bar which is exactly what we want which

49
00:03:00,270 --> 00:03:01,650
is really neat.

50
00:03:01,650 --> 00:03:07,460
And now we can go ahead and drag on AUI table view cell just like this.

51
00:03:07,470 --> 00:03:13,620
Now obviously this is not going to be tough enough because if you remember on the simulator each cell

52
00:03:13,950 --> 00:03:16,340
is nice and tall.

53
00:03:16,380 --> 00:03:23,940
So in order to do that we're going to go ahead and drag it down so that it's about I can't remember

54
00:03:23,940 --> 00:03:25,910
exactly how high I made it.

55
00:03:25,920 --> 00:03:28,220
I want to say 400.

56
00:03:28,260 --> 00:03:29,660
That sounds about right.

57
00:03:29,730 --> 00:03:30,970
Yeah that looks fine.

58
00:03:31,230 --> 00:03:34,230
And that will be the size of our cells.

59
00:03:34,250 --> 00:03:36,740
OK 400 is going to be the height.

60
00:03:36,840 --> 00:03:43,890
And now what we can do is we can go ahead and build in a UI view because that's what I did to get this

61
00:03:44,160 --> 00:03:48,810
shadow view here and we'll add the subclass for this later but we're going to go ahead and drop in a

62
00:03:49,170 --> 00:03:55,050
view like so and I'm going to position it about where I want it and then we're going to perfect it with

63
00:03:55,050 --> 00:03:56,090
constraints.

64
00:03:56,160 --> 00:04:03,120
So we're going to go ahead and set this to be maybe 12 from all sides and there we go.

65
00:04:03,120 --> 00:04:08,730
Now of course you saw that the background is that same blue as the text so we can go into the attributes

66
00:04:08,730 --> 00:04:12,510
and Specter and set the background color just like we want.

67
00:04:12,600 --> 00:04:13,030
OK.

68
00:04:13,110 --> 00:04:13,560
There it is.

69
00:04:13,560 --> 00:04:14,880
Very cool.

70
00:04:14,880 --> 00:04:21,120
So as you can see this is going to allow for us to put a shadow underneath the cell which gives it kind

71
00:04:21,120 --> 00:04:23,220
of a bit of depth which is pretty neat.

72
00:04:23,400 --> 00:04:26,120
And again we'll do that in a future video.

73
00:04:26,670 --> 00:04:29,480
But let's go ahead and let's build this out.

74
00:04:29,700 --> 00:04:34,410
So we need a UI label let's drag that on.

75
00:04:34,410 --> 00:04:36,440
We need another label beneath that.

76
00:04:36,450 --> 00:04:38,430
So let's do another one.

77
00:04:38,580 --> 00:04:43,660
We need a image view like so.

78
00:04:44,250 --> 00:04:49,200
OK and we're going to position that exactly where it should go which is here.

79
00:04:49,350 --> 00:04:53,730
And the same width as everything although we're going to use a stack view in a second so it doesn't

80
00:04:53,730 --> 00:04:54,950
really matter.

81
00:04:55,500 --> 00:05:00,780
But next we're going to go ahead and add in these three elements which this will be it's own little

82
00:05:00,780 --> 00:05:01,360
stack.

83
00:05:01,620 --> 00:05:02,960
This will be its own little stack.

84
00:05:03,000 --> 00:05:09,040
And so will this then we're going to go ahead and set these all into a stack view with UI views to act

85
00:05:09,040 --> 00:05:11,110
as those little lines in the middle.

86
00:05:11,110 --> 00:05:13,360
So let's go ahead and let's set it up.

87
00:05:13,360 --> 00:05:16,650
We need a little UI image view like so.

88
00:05:16,870 --> 00:05:22,300
And we don't need to make it perfect for now but we also need a label there to hold the text.

89
00:05:22,390 --> 00:05:27,130
So go ahead and drag on a label and we're going to pin these together are not pin these together but

90
00:05:27,130 --> 00:05:30,460
stack them together by selecting both and choosing stack.

91
00:05:30,460 --> 00:05:33,090
You can obviously that's huge.

92
00:05:33,100 --> 00:05:33,900
It's way too big.

93
00:05:33,910 --> 00:05:40,780
But we're going to go ahead and set it up with a little bit of spacing maybe 10 and that will be great.

94
00:05:40,780 --> 00:05:49,270
So then we're going to go ahead and let's set the stack you to be well you know what let's duplicate

95
00:05:49,270 --> 00:05:51,930
it three times first because we're going to need it three times.

96
00:05:52,010 --> 00:05:53,850
Whoops sorry.

97
00:05:53,980 --> 00:05:59,750
Go ahead and copy then paste inside the same view and do that one more time.

98
00:06:00,390 --> 00:06:05,670
Next we're going to go ahead and select all three stack views and that might be easiest to do from the

99
00:06:05,670 --> 00:06:06,740
document outline.

100
00:06:07,110 --> 00:06:12,630
Then we're going to put those into a stack view and in the middle of both of them we're going to go

101
00:06:12,630 --> 00:06:15,410
ahead and drop in a view like so.

102
00:06:15,960 --> 00:06:21,450
You'll notice that it's trying to drop it into the stack for you there and we want to drop it in the

103
00:06:21,450 --> 00:06:25,950
middle so we're actually going to go ahead and add it to the stack of you and then we can go ahead and

104
00:06:25,950 --> 00:06:27,340
duplicate it.

105
00:06:27,410 --> 00:06:28,140
No we can't sorry.

106
00:06:28,140 --> 00:06:34,920
I mean copy and paste so select it copy and paste and then we can manually position this so that one

107
00:06:34,920 --> 00:06:36,010
is on.

108
00:06:36,030 --> 00:06:39,310
Whoops one is on one side of the stack.

109
00:06:39,320 --> 00:06:44,820
You make sure that you have the far out arrow like this not the inside one that will actually put it

110
00:06:44,820 --> 00:06:46,830
on the outside which is what we want.

111
00:06:47,100 --> 00:06:51,630
And now for these two views if we hold command we can select both.

112
00:06:51,720 --> 00:06:56,360
And we're going to set an explicit width of maybe three pixels.

113
00:06:56,520 --> 00:07:02,540
And as you can see that creates a nice little barrier line between all of our UI views.

114
00:07:02,580 --> 00:07:04,770
Are all of our stack views with our images.

115
00:07:04,770 --> 00:07:09,860
So now let's go ahead and let's set an explicit height for these stack views.

116
00:07:09,870 --> 00:07:15,150
And so I think let's try 30 K that looks pretty great.

117
00:07:15,150 --> 00:07:19,700
And now let's go ahead and let's space out each element 10.

118
00:07:19,770 --> 00:07:21,100
That looks pretty good.

119
00:07:21,540 --> 00:07:28,860
And next let's think we want these images to be squares although they don't have to be because the image

120
00:07:28,860 --> 00:07:31,380
will just be centered in the middle of them.

121
00:07:31,740 --> 00:07:38,340
But let's go ahead and let's see if we can set up our alignment and our distribution to properly fill

122
00:07:38,340 --> 00:07:39,370
these the way that we want.

123
00:07:39,360 --> 00:07:41,800
Which I don't know if it will.

124
00:07:42,160 --> 00:07:44,600
You know what it's looking like it's not going to.

125
00:07:44,600 --> 00:07:48,820
So what I'm going to actually do is I'm going to go ahead and pin this inside my view.

126
00:07:49,230 --> 00:07:53,110
I'm going to pin it let's do eight from the top is good.

127
00:07:53,220 --> 00:08:01,170
And then how about we do let's do 20 from the left and 20 from the right.

128
00:08:01,170 --> 00:08:07,130
We already have an explicit height so that won't matter as far as all of that goes.

129
00:08:07,130 --> 00:08:14,310
But we do now have a problem we are having some issues with how our data is going to be displayed because

130
00:08:14,310 --> 00:08:21,240
we're obviously pinching some of these off because they are not going to properly fill the way we want.

131
00:08:21,240 --> 00:08:23,970
So now that we have set the size we can set them to fill.

132
00:08:24,000 --> 00:08:31,600
Equally we can set them to fill proportionally equal spacing or equal centering K and equal centering

133
00:08:31,600 --> 00:08:36,090
is what I'm actually going to go with because that's going to put us closest to what we want.

134
00:08:36,090 --> 00:08:40,410
Now since these are in their own individual stack views I'm going to go ahead and open all these up

135
00:08:40,440 --> 00:08:43,830
and select the image views since we have a height of 30.

136
00:08:43,830 --> 00:08:46,330
I'm going to give it a with 30 as well.

137
00:08:46,530 --> 00:08:50,250
Just to go ahead and make sure we have room for all the labels and there we go.

138
00:08:50,310 --> 00:08:52,780
So we now have room for everything which is cool.

139
00:08:52,920 --> 00:08:55,370
We can set the images because we've dropped in the assets.

140
00:08:55,470 --> 00:08:57,670
This is going to be downloads.

141
00:08:58,050 --> 00:09:03,070
This one is going to be language and this one is going to be what is it.

142
00:09:03,390 --> 00:09:04,990
I believe contributor's.

143
00:09:05,010 --> 00:09:06,080
Yeah.

144
00:09:06,120 --> 00:09:09,630
The only issue is that we are definitely cutting these off.

145
00:09:09,630 --> 00:09:11,400
They're not looking the way they're supposed to.

146
00:09:11,400 --> 00:09:14,580
So we're going to set aspect fit I believe.

147
00:09:14,790 --> 00:09:15,030
Yeah.

148
00:09:15,030 --> 00:09:17,550
And that way it'll maintain its aspect ratio.

149
00:09:17,550 --> 00:09:23,670
Now of course it does look a bit pixilated and that's because these images are actually bigger than

150
00:09:23,700 --> 00:09:26,780
it's supposed to be so we're going to actually reduce the size.

151
00:09:27,020 --> 00:09:32,640
We're going to modify the constraint here modify the height maybe to be 24 and then we can go ahead

152
00:09:32,670 --> 00:09:38,460
and select all three image views or you know what actually we do them individually and change the width

153
00:09:38,460 --> 00:09:40,140
to 24 as well.

154
00:09:40,140 --> 00:09:45,630
And these will start to look a little better and there we go boom boom boom.

155
00:09:45,630 --> 00:09:46,530
All right.

156
00:09:46,530 --> 00:09:47,760
Very cool.

157
00:09:47,760 --> 00:09:53,700
Let's go ahead and let's set the font for all of these labels by selecting them all selecting the attributes

158
00:09:53,700 --> 00:09:58,700
and Specter and we can go ahead and go to custom Avenir next.

159
00:09:58,890 --> 00:10:02,630
And we're going to set a different font style for each of these.

160
00:10:02,640 --> 00:10:05,260
This one for instance is going to be size 24.

161
00:10:05,830 --> 00:10:06,320
OK.

162
00:10:06,360 --> 00:10:13,540
Like so they were going to center it there and let's make 2006 let's do 24.

163
00:10:13,620 --> 00:10:16,770
And we want to make it Demi bold as well.

164
00:10:16,770 --> 00:10:19,010
So go ahead and choose that Demi bold.

165
00:10:19,680 --> 00:10:20,280
OK.

166
00:10:20,610 --> 00:10:23,220
This one we want to stretch out a little bit as well.

167
00:10:23,310 --> 00:10:24,210
Center it.

168
00:10:24,270 --> 00:10:28,170
And you know what all these are going to be white font so I'm going to select them all again and just

169
00:10:28,170 --> 00:10:30,240
change the color to white.

170
00:10:30,690 --> 00:10:34,600
OK and let's go ahead and let's just say Ribault name.

171
00:10:34,780 --> 00:10:36,800
All right.

172
00:10:37,020 --> 00:10:37,550
Whoops.

173
00:10:37,620 --> 00:10:49,720
Repo description and let's say maybe one two three see sharp let's just choose a random language and

174
00:10:49,720 --> 00:10:55,580
then let's say one 1000 or 1000 three people contributing.

175
00:10:55,580 --> 00:10:58,370
So as you can see this is starting to come together.

176
00:10:58,390 --> 00:11:00,400
It's starting to look really cool.

177
00:11:00,400 --> 00:11:05,250
Everything is nicely spaced and maybe we can fit in a an image here.

178
00:11:05,260 --> 00:11:06,990
I don't really have a big enough image.

179
00:11:07,030 --> 00:11:07,650
That's OK.

180
00:11:07,720 --> 00:11:08,960
We know that's coming.

181
00:11:09,040 --> 00:11:13,530
But let's go ahead and let's move our stack you down like so.

182
00:11:13,660 --> 00:11:17,660
And we can also move our image down as well just like that.

183
00:11:17,680 --> 00:11:22,600
Now I don't believe we have set constraints for this the way we need to because we need to actually

184
00:11:22,600 --> 00:11:26,530
bump all of these into a singular stack view.

185
00:11:26,680 --> 00:11:27,070
You know what.

186
00:11:27,070 --> 00:11:27,450
Sorry.

187
00:11:27,460 --> 00:11:28,700
No we are forgetting a button.

188
00:11:28,720 --> 00:11:31,040
We need to use a button as well.

189
00:11:31,210 --> 00:11:33,530
So let's go ahead and drag that down below.

190
00:11:33,850 --> 00:11:38,760
We're going to go ahead and set the font to Avenir next.

191
00:11:38,860 --> 00:11:43,540
It's like our system font here or not our system Fonkoze system font is early.

192
00:11:43,990 --> 00:11:44,270
OK.

193
00:11:44,290 --> 00:11:49,190
And let's set to be Demy bold font color to be white.

194
00:11:49,190 --> 00:11:50,500
That looks awesome.

195
00:11:50,590 --> 00:11:57,490
And this is going to save you read me because when they select this button it's going to create a read

196
00:11:57,490 --> 00:11:57,960
me.

197
00:11:58,060 --> 00:12:02,590
Now it doesn't have a border at the moment but we're going to create that subclass in a moment that

198
00:12:02,590 --> 00:12:08,350
will add a nice rounded white border around it that just makes it look pretty cool but that's good.

199
00:12:08,440 --> 00:12:13,600
So now that this is here let's select all of our items put them in a stack view and then we're going

200
00:12:13,600 --> 00:12:18,250
to need to actually fix this we're going to fix the constraints we're going to add some spacing and

201
00:12:18,250 --> 00:12:19,510
we're almost done.

202
00:12:19,510 --> 00:12:21,950
So let's go ahead and let's drop that in there.

203
00:12:22,120 --> 00:12:26,440
Let's make this what do we want to do we want to do.

204
00:12:26,560 --> 00:12:33,190
Let's think think think think how about 10 from the top zero from the left to 0 from the right and 10

205
00:12:33,190 --> 00:12:34,660
from the bottom.

206
00:12:34,660 --> 00:12:35,660
That's pretty cool.

207
00:12:35,890 --> 00:12:40,890
Now that everything is centered we can go ahead and give it 20 bits of spacing.

208
00:12:41,070 --> 00:12:43,820
And as you can see that's too much so let's try 10.

209
00:12:44,170 --> 00:12:46,350
And that looks awesome.

210
00:12:46,450 --> 00:12:52,360
So we can get a repo name a description downloads language contributors and we can select the read me

211
00:12:52,390 --> 00:12:53,300
button.

212
00:12:53,320 --> 00:12:58,810
Now all that we need to do is actually to set up our table view with our trending feed Visi view controller

213
00:12:58,810 --> 00:13:02,590
class and we can set up the cell and a future video.

214
00:13:02,710 --> 00:13:05,380
But guys we're really darn close to being done with this.

215
00:13:05,380 --> 00:13:10,900
Let's go ahead and pull open our attributes Inspektor trending feed we see already shows up and all

216
00:13:10,900 --> 00:13:16,810
we need to do is to go ahead and select that table view right click and drag into trending feed we see.

217
00:13:16,810 --> 00:13:19,920
And let's just name this table view.

218
00:13:20,110 --> 00:13:22,570
Now it's connected super duper easy.

219
00:13:22,570 --> 00:13:23,730
Very cool we can get rid of.

220
00:13:23,740 --> 00:13:28,720
Did you know did receive memory warning we don't need it also don't need this comment of information

221
00:13:28,840 --> 00:13:30,230
don't need it.

222
00:13:30,230 --> 00:13:31,380
Look guys look at this.

223
00:13:31,390 --> 00:13:34,690
We have built the app interface for our project.

224
00:13:34,690 --> 00:13:35,760
Very very cool.

225
00:13:35,770 --> 00:13:41,230
Let's go ahead and let's build and run these cells obviously will not show up because we have not yet

226
00:13:41,230 --> 00:13:44,930
set up the table you delegate and you are table view data source.

227
00:13:45,070 --> 00:13:50,800
But we can at least get an appearance of what it is we have a table view we have our versey label guys

228
00:13:50,800 --> 00:13:52,060
we're looking good.

229
00:13:52,120 --> 00:13:54,010
We are looking so good.

230
00:13:54,040 --> 00:13:58,780
And in the next video we're going to go ahead and actually build out the rounded border button which

231
00:13:58,780 --> 00:14:00,670
is going to go on this button.

232
00:14:00,670 --> 00:14:05,990
We're also going to build out the rounded border textfield which we're going to use in our search Visi

233
00:14:06,010 --> 00:14:09,930
but we're going to build the subclass so that we can actually drag and drop that on.

234
00:14:10,600 --> 00:14:13,990
We have a lot to do but it's really really cool it's fun stuff.

235
00:14:13,990 --> 00:14:18,820
So I will see you in the next video where we're going to go ahead and start building out some of those

236
00:14:18,820 --> 00:14:20,170
custom subclasses.

237
00:14:20,170 --> 00:14:21,380
Let's head over there now.