1
00:00:07,200 --> 00:00:08,220
Everybody what's going on.

2
00:00:08,220 --> 00:00:10,100
This is Caleb with slopestyle.

3
00:00:10,200 --> 00:00:15,180
And we're about to build out the store Visi which is the front view controller that you see first.

4
00:00:15,180 --> 00:00:16,620
When you load up food Zilah.

5
00:00:16,800 --> 00:00:18,480
So let's go ahead and let's do that now.

6
00:00:18,480 --> 00:00:24,940
Pull open X code go into main storyboard and we are going to go ahead and build this out.

7
00:00:24,960 --> 00:00:27,580
It's going to be really easy it's not a very involved interface.

8
00:00:27,590 --> 00:00:33,030
So go ahead and we're going to start with the UI collection view and we're going to go ahead and type

9
00:00:33,030 --> 00:00:35,070
that UI collection view.

10
00:00:35,070 --> 00:00:40,790
We're going to drag it on just like so and snap it into place just like that.

11
00:00:40,800 --> 00:00:45,360
Now the cool thing with you I collection view is that it already drops in a cell for us which is really

12
00:00:45,360 --> 00:00:46,630
helpful.

13
00:00:46,650 --> 00:00:51,690
But you know what I'm actually going to go ahead and bring this in 20 from all sides because I don't

14
00:00:51,690 --> 00:00:54,830
want my cells touching the very far edge of the screen.

15
00:00:54,930 --> 00:00:56,830
I want there to be a little bit of cushioning.

16
00:00:57,270 --> 00:01:02,310
And for the cell I'm going to go ahead and drag this to a bigger size and you'll notice you can actually

17
00:01:02,310 --> 00:01:03,540
see it happening.

18
00:01:03,630 --> 00:01:08,520
But when you release it it updates if you drag from one of these corners which is really helpful.

19
00:01:08,520 --> 00:01:13,140
So supercool collection views in place there is a cell already there for us.

20
00:01:13,140 --> 00:01:16,800
And now we need to go ahead and drag on a label and a button.

21
00:01:16,830 --> 00:01:26,610
Super easy UI label drop it there and UI button and drop it there.

22
00:01:27,240 --> 00:01:28,200
All right.

23
00:01:28,200 --> 00:01:32,490
So what we're going to do for the button or for the label I mean is we're going to stretch it all the

24
00:01:32,490 --> 00:01:37,470
way over to the button and we're going to drag it all the way down to the collection view.

25
00:01:37,470 --> 00:01:42,600
We're going to do the same thing for the button although you know what I'm going to start pinning these

26
00:01:42,600 --> 00:01:48,900
in place so I'm going to pin this zero from the top and 16 from the right with margins constrained.

27
00:01:48,900 --> 00:01:54,120
And I'm also going to make it 50 and 50 50 for the height and 50 for the width.

28
00:01:54,360 --> 00:01:59,120
Add those constraints and then we should be good to go with our label as well.

29
00:01:59,130 --> 00:02:06,090
So let's go ahead and let's pin this zero from the top 16 from the left let's do 8 from the right not

30
00:02:06,140 --> 00:02:11,620
4 and let's do 8 from the bottom meaning the well eight to the to the top of the collection.

31
00:02:11,640 --> 00:02:15,450
You add four constraints and that's going to give us some trouble.

32
00:02:15,450 --> 00:02:16,240
What's the deal.

33
00:02:17,440 --> 00:02:17,980
Let's see.

34
00:02:17,980 --> 00:02:24,660
Do you do we said eight to the collection view and that is very much not all but it's because we haven't

35
00:02:24,660 --> 00:02:26,250
constrained the collection view yet.

36
00:02:26,250 --> 00:02:31,500
So let's go ahead and do that 16 from the left 20 from the bottom 16 from the right.

37
00:02:31,770 --> 00:02:38,040
And let's go ahead and let's give it a fixed height of 567 that's fine.

38
00:02:38,040 --> 00:02:38,490
There we go.

39
00:02:38,490 --> 00:02:40,920
So that fixed our constraint issue.

40
00:02:40,920 --> 00:02:42,720
Now let's set the font here.

41
00:02:42,750 --> 00:02:43,700
This is not going to change.

42
00:02:43,710 --> 00:02:45,440
It's just a static label.

43
00:02:45,480 --> 00:02:51,420
Of course I am going to change the font to Avenir next and I'm going to go with bold and we're going

44
00:02:51,420 --> 00:02:54,460
to do size 30.

45
00:02:54,580 --> 00:02:55,770
OK that looks cool.

46
00:02:55,920 --> 00:02:58,290
And let's call this food Zilah.

47
00:02:58,650 --> 00:03:04,350
Now the font color is black and that's really really dark which is OK but things that are that dark

48
00:03:04,350 --> 00:03:07,950
tend to be a little just too intense on a screen.

49
00:03:07,950 --> 00:03:12,030
So what I'm actually going to do is just make it a really dark gray and it just kind of softens it makes

50
00:03:12,030 --> 00:03:13,690
it look a little nicer.

51
00:03:13,770 --> 00:03:19,860
Now for the button I'm going to do the same thing I'm going to change the font to Avenir next bold so

52
00:03:19,950 --> 00:03:25,470
you can do that with me here bold and I'm going up this to 30 as well.

53
00:03:25,470 --> 00:03:27,610
Now there's a good reason for that.

54
00:03:27,840 --> 00:03:30,890
I'm going to change the word button to a question mark.

55
00:03:31,110 --> 00:03:31,420
OK.

56
00:03:31,440 --> 00:03:37,200
So that's like a question mark for help or whatever and that's going to allow us to restore our purchases.

57
00:03:37,200 --> 00:03:41,420
It could be extended to even allow a user to tap on the question mark.

58
00:03:41,420 --> 00:03:46,530
And you know we could add buttons to that pop up view to let them go to your support page or something

59
00:03:46,530 --> 00:03:47,250
like that.

60
00:03:47,580 --> 00:03:52,790
So the text color we need to set to a soft blue like so I don't like the default blue.

61
00:03:52,980 --> 00:03:56,570
If you're interested this blue is 4 7 8 C6.

62
00:03:56,610 --> 00:04:01,610
I've used it before really like this blue anyway so that's now in place.

63
00:04:01,650 --> 00:04:02,700
Wonderful.

64
00:04:02,700 --> 00:04:07,710
Now let's build the interface for our cell which is going to be an image and two labels.

65
00:04:07,710 --> 00:04:08,660
Super easy.

66
00:04:08,670 --> 00:04:11,520
So go ahead and type you image.

67
00:04:11,790 --> 00:04:14,550
Drag it on center it like so.

68
00:04:14,730 --> 00:04:18,900
And we're going to just stretch it to fit and then constrain it to the outside edges.

69
00:04:18,900 --> 00:04:21,490
Whoops missed my slider there.

70
00:04:21,540 --> 00:04:22,320
All right cool.

71
00:04:22,320 --> 00:04:23,430
So now that it's in.

72
00:04:23,490 --> 00:04:28,980
Let's go ahead and pinnate zero from all sides like so and add four constraints.

73
00:04:28,980 --> 00:04:30,300
Very cool.

74
00:04:30,300 --> 00:04:35,490
Next we're going to go ahead and drop on a label put it right there in the center.

75
00:04:35,490 --> 00:04:39,290
We're going to copy and paste that label and put it below.

76
00:04:39,300 --> 00:04:42,930
This is going to be the name of the food and this is going to be the price.

77
00:04:42,930 --> 00:04:45,510
Now there are going to be different sizes but the same font.

78
00:04:45,510 --> 00:04:52,090
So let's go ahead and select both select font select font and custom Avenir next.

79
00:04:52,110 --> 00:04:54,070
And we're going to make these.

80
00:04:54,210 --> 00:04:56,450
How about Demy bold.

81
00:04:56,820 --> 00:04:59,040
We'll make it size 18 now.

82
00:04:59,070 --> 00:05:06,110
The bottom one we're actually going to whoopsies the bottom one we're going to make size maybe 14.

83
00:05:06,120 --> 00:05:06,780
That looks good.

84
00:05:06,780 --> 00:05:10,170
And we don't need it to be Demy bold but just medium.

85
00:05:10,170 --> 00:05:11,310
All right.

86
00:05:11,310 --> 00:05:11,850
Great.

87
00:05:11,930 --> 00:05:15,240
But stretch these so they fit.

88
00:05:15,270 --> 00:05:16,850
And we'll do the same thing with the other one.

89
00:05:16,860 --> 00:05:21,960
And then we're going to center both of them as well for the font orientation or alignment.

90
00:05:21,960 --> 00:05:23,120
I mean.

91
00:05:23,270 --> 00:05:23,870
OK.

92
00:05:23,880 --> 00:05:25,380
So that looks pretty good.

93
00:05:25,680 --> 00:05:26,220
Let's think.

94
00:05:26,220 --> 00:05:27,460
Is there anything else we need to do.

95
00:05:27,660 --> 00:05:28,100
Yes.

96
00:05:28,110 --> 00:05:32,880
Actually I want to change the font color to white because it just tends to stand out better on top of

97
00:05:32,880 --> 00:05:33,880
photos.

98
00:05:33,930 --> 00:05:43,920
And let's just call this item name and we'll call this item price like so.

99
00:05:44,190 --> 00:05:46,860
And now let's go go ahead and constrain these.

100
00:05:46,860 --> 00:05:51,740
I need to make sure that they're not going to be in the way of each other.

101
00:05:51,930 --> 00:05:54,820
They might be anyway so let's go ahead and pin this 12.

102
00:05:54,840 --> 00:06:01,830
From all sides and set a fixed height of 25 looks great then I'm going to do the same thing here but

103
00:06:01,860 --> 00:06:06,650
I'm going to do zero to the bottom of that item name label 12.

104
00:06:06,660 --> 00:06:08,070
From the left 12 from the right.

105
00:06:08,070 --> 00:06:11,370
And let's do a fixed height of 20 because it's smaller font.

106
00:06:11,550 --> 00:06:13,470
Press enter and there we go.

107
00:06:13,470 --> 00:06:16,430
That's literally all we need to do for our cell.

108
00:06:16,650 --> 00:06:22,350
But we do need to set up our view controller here so select the view controller and we're going to rename

109
00:06:22,350 --> 00:06:24,030
it to store visi.

110
00:06:24,150 --> 00:06:25,790
That's a little more specific.

111
00:06:25,820 --> 00:06:27,300
How about storefront the sea.

112
00:06:27,300 --> 00:06:29,230
That sounds a little better.

113
00:06:29,290 --> 00:06:30,430
Not with the capital.

114
00:06:30,780 --> 00:06:31,120
All right.

115
00:06:31,140 --> 00:06:36,960
So now I'm going to copy this and paste it in all the relevant places it needs to go like the name of

116
00:06:36,960 --> 00:06:39,330
the class and the file boom.

117
00:06:39,630 --> 00:06:44,580
But now we're all screwed up because this is referencing view controller and its identity.

118
00:06:44,580 --> 00:06:49,790
So we're going to go ahead and get rid of that paste in storefront B C and now we're all linked up.

119
00:06:50,010 --> 00:06:54,960
So let's go ahead and let's actually link up these button and let's link up the collection view to the

120
00:06:54,960 --> 00:07:00,540
subclass by opening the assistant editor and look at that we have storefront Visi ready for us right

121
00:07:00,540 --> 00:07:01,250
there.

122
00:07:01,620 --> 00:07:07,530
So go ahead and get rid of did receive memory morning and go ahead and right click and drag from collection

123
00:07:07,530 --> 00:07:08,370
view.

124
00:07:08,370 --> 00:07:12,610
We're going to just call this collection view like so.

125
00:07:13,020 --> 00:07:18,300
And what else we need to drag from our button here and make an IB action which I like to put at the

126
00:07:18,300 --> 00:07:19,590
bottom of my class.

127
00:07:19,930 --> 00:07:25,380
And we'll call this restore per whip's restore purchases.

128
00:07:25,390 --> 00:07:27,600
Let's just say restore button was pressed.

129
00:07:27,610 --> 00:07:33,430
That's a little less long and there we go we have a function here that is linked to our button.

130
00:07:33,550 --> 00:07:35,270
We have viewed load with a comment.

131
00:07:35,290 --> 00:07:37,330
We're going to get rid of.

132
00:07:37,420 --> 00:07:39,970
Let's think what else do we need to do.

133
00:07:40,180 --> 00:07:47,680
We'll create a subclass for this cell later on we're going to go ahead and I guess conform to collection

134
00:07:47,680 --> 00:07:56,440
view data source and delegate like so UI collection view delegate and collection view data source like

135
00:07:56,440 --> 00:07:57,170
so.

136
00:07:57,250 --> 00:08:02,260
Now if I build and run you'll notice there's an error and that's because we need to conform to the three

137
00:08:02,320 --> 00:08:09,820
delegate methods that are required like so a number of sections in collection be a number of items in

138
00:08:09,820 --> 00:08:13,840
Section and sell for item an index path.

139
00:08:13,840 --> 00:08:18,940
Now for a number of sections we're just going to return one that'll never change for a number of items

140
00:08:18,970 --> 00:08:19,680
in section.

141
00:08:19,690 --> 00:08:23,800
That will depend on some static data we build in later.

142
00:08:23,800 --> 00:08:31,560
But let's go ahead and let's just return re 3 for now.

143
00:08:31,630 --> 00:08:32,970
Just a static number.

144
00:08:33,100 --> 00:08:36,850
And for the cell we're just going to go ahead and for now return

145
00:08:39,400 --> 00:08:41,740
a blank UI collection view cell.

146
00:08:41,890 --> 00:08:42,130
OK.

147
00:08:42,130 --> 00:08:43,690
We're going to change it later.

148
00:08:43,690 --> 00:08:49,440
The only things we need to do still are to set the collection to use delegate and data source to be

149
00:08:49,480 --> 00:08:50,700
this view controller.

150
00:08:50,710 --> 00:08:52,200
So go ahead and type collection view.

151
00:08:52,240 --> 00:08:58,810
Delegate equals self collection view data source equals self as well.

152
00:08:58,900 --> 00:09:03,220
And I'm moving a little fast but I'm assuming that if you're taking an app purchased course that you

153
00:09:03,220 --> 00:09:05,620
have prior knowledge in Iowa development.

154
00:09:05,620 --> 00:09:08,150
So this is this is important for you to know.

155
00:09:08,200 --> 00:09:13,300
Now if I build and run you'll notice those errors about conformance go away because I now have properly

156
00:09:13,300 --> 00:09:16,770
linked my collection view and set up its delegate and data source.

157
00:09:16,780 --> 00:09:17,080
All right.

158
00:09:17,080 --> 00:09:18,400
So let's go ahead and build and run.

159
00:09:18,430 --> 00:09:22,570
Let's go see how we did and see if see what it looks like.

160
00:09:22,570 --> 00:09:24,450
I think we did pretty good.

161
00:09:24,550 --> 00:09:31,380
We got a crash what's this says the cell returned from cell and index path does not have a reuse identifier.

162
00:09:31,390 --> 00:09:33,340
Oh right we did not set that.

163
00:09:33,490 --> 00:09:37,800
We're not going to and I'm asking it to return cells that it does not know about.

164
00:09:37,860 --> 00:09:38,340
Whoops.

165
00:09:38,350 --> 00:09:44,080
Let's go ahead and let's just return 0 for now because we have not yet told it how it should be rhis

166
00:09:45,040 --> 00:09:47,020
how it should be retrieving those cells.

167
00:09:47,020 --> 00:09:48,490
So with it change to zero.

168
00:09:48,490 --> 00:09:49,700
Go ahead and build and run.

169
00:09:49,870 --> 00:09:56,440
And we should be able to get a good look at the interface then here we go food Zilah opening up and

170
00:09:56,440 --> 00:09:57,700
there we go take a look.

171
00:09:57,700 --> 00:10:00,840
We have our label our button and our collection you.

172
00:10:00,860 --> 00:10:02,590
Now I'm noticing they're off center.

173
00:10:02,590 --> 00:10:03,580
They don't look great.

174
00:10:03,580 --> 00:10:06,090
Let's go figure out why they're off centered.

175
00:10:06,100 --> 00:10:13,900
We have pinned this eight from the left eight from the 16 from the left eight from the right eight from

176
00:10:13,900 --> 00:10:17,460
the bottom and align the top to the safe area.

177
00:10:17,920 --> 00:10:23,440
Now we also have this aligned to the safe area left right.

178
00:10:23,440 --> 00:10:31,070
Oh but you know we did not align this to the collection view so let's go ahead and do that.

179
00:10:31,170 --> 00:10:36,680
That was at the top of the bottom yeah the bottom is not aligned to the collection view.

180
00:10:36,840 --> 00:10:37,600
So let's do that.

181
00:10:37,600 --> 00:10:40,460
Set it to be 10 from the collection view.

182
00:10:40,550 --> 00:10:41,640
I think that was right.

183
00:10:43,420 --> 00:10:46,550
You know what the button is 10 but the other one is eight.

184
00:10:46,550 --> 00:10:50,210
So change the bottom space to the collection view to be eight actually.

185
00:10:50,290 --> 00:10:52,690
And now it's going to give us all kinds of problems.

186
00:10:52,690 --> 00:10:54,020
What is this.

187
00:10:54,340 --> 00:11:01,110
Looks like we are 10 from the question mark and 10 from the label.

188
00:11:01,220 --> 00:11:01,660
You know what.

189
00:11:01,660 --> 00:11:03,770
When I'm doing both of these it's going to cause some issues.

190
00:11:03,770 --> 00:11:07,350
Let's go ahead and put these into a stack if you like so.

191
00:11:07,550 --> 00:11:14,300
And then let's go ahead and constrain these to be zero from the top 16 from the left 16 from the right

192
00:11:15,320 --> 00:11:17,810
and 10 from the collection view.

193
00:11:18,050 --> 00:11:21,850
Let's see how that does that looks a little better.

194
00:11:21,850 --> 00:11:22,380
All right.

195
00:11:22,420 --> 00:11:22,870
Right.

196
00:11:22,900 --> 00:11:24,810
That's exactly what I was hoping to see.

197
00:11:24,820 --> 00:11:27,620
So let's build and run this and oh you know what.

198
00:11:27,670 --> 00:11:32,040
We have a height constraint on our collection to you that's also going to cause problems so.

199
00:11:32,360 --> 00:11:34,150
Well I mean let's see how it looks.

200
00:11:34,880 --> 00:11:35,060
Yeah.

201
00:11:35,090 --> 00:11:36,640
OK so our collection is here.

202
00:11:36,680 --> 00:11:39,930
Our label gets pulled down because we have a height constraint here.

203
00:11:40,040 --> 00:11:41,160
Let's get rid of that.

204
00:11:41,240 --> 00:11:48,320
And now when we build and run it should look much better.

205
00:11:48,330 --> 00:11:53,430
There we go OK our labels at the top are button is here and our collection to it is here.

206
00:11:53,430 --> 00:11:54,330
We can't see it.

207
00:11:54,360 --> 00:11:59,730
I could fill it with an image just to show you what to do that really fast.

208
00:11:59,730 --> 00:12:05,800
Set the whip's set the image here and maybe two food one.

209
00:12:06,370 --> 00:12:08,970
Oh you know what aspect Phills should be used.

210
00:12:08,970 --> 00:12:09,850
There we go.

211
00:12:10,850 --> 00:12:14,760
And oh we're returning 0 sell so it's not going to show up.

212
00:12:14,780 --> 00:12:17,720
I'll show you that later when we create our subclass.

213
00:12:17,720 --> 00:12:20,690
So this is looking great so far we have our collection be wired up.

214
00:12:20,690 --> 00:12:22,350
We have our label our button.

215
00:12:22,430 --> 00:12:27,260
We're good to go in the next video we're going to build detail see which is the view controller that

216
00:12:27,320 --> 00:12:31,310
pops up when we select one of these cells from the table view.

217
00:12:31,400 --> 00:12:35,540
We're going to wire that up as well and then we're going to talk about how to pass values between them

218
00:12:35,960 --> 00:12:38,370
in order to instantiate and present detail visi.

219
00:12:38,390 --> 00:12:40,930
So let's head over to that video and let's do that now.