1
00:00:08,100 --> 00:00:10,620
Hey guys what's going on this is Caleb with slopes.

2
00:00:10,620 --> 00:00:15,660
And in this video we're going to build the UI of our app and we're also going to create some custom

3
00:00:15,660 --> 00:00:19,280
view subclasses to make it look really nice and pretty.

4
00:00:19,290 --> 00:00:24,940
So go ahead and pull open your X code project just like you might have expected.

5
00:00:24,960 --> 00:00:31,050
And basically what we're going to do is we're going to start by dragging in a UI view.

6
00:00:31,140 --> 00:00:35,580
First of course make sure that you're in main but storyboard blah blah blah you probably know that already

7
00:00:36,360 --> 00:00:42,650
but once you're in there we're going to start by dragging on a UI view just like so.

8
00:00:43,110 --> 00:00:49,380
Go ahead and pull the corners down so that it fits the entire frame of the View Controller and then

9
00:00:49,380 --> 00:00:52,910
click the constraints button or the pin button rather.

10
00:00:52,980 --> 00:00:59,340
And we're going to pin it zero from the top right bottom and left so that it stays exactly on the screen

11
00:00:59,340 --> 00:01:01,590
and it stays exactly the size of the screen.

12
00:01:01,950 --> 00:01:08,150
Click Add for constraints and this is going to be the view that houses our camera view.

13
00:01:08,370 --> 00:01:13,260
If you think about when you go into your camera if you record a video recorder the entire frame of the

14
00:01:13,260 --> 00:01:16,600
screen that's going to be basically what our app will do.

15
00:01:16,620 --> 00:01:21,540
So that's that very cool camera view is in place and you know what I'm going to add some other views

16
00:01:21,540 --> 00:01:22,310
on top of this.

17
00:01:22,320 --> 00:01:25,560
So to let us see it easier.

18
00:01:25,560 --> 00:01:30,480
I'm just going to change the color for now to kind of this green color so that we can see the other

19
00:01:30,480 --> 00:01:32,760
views that I drop on on top of it.

20
00:01:33,060 --> 00:01:33,300
OK.

21
00:01:33,330 --> 00:01:37,610
So now that that views in place go ahead and drag on another view here.

22
00:01:37,910 --> 00:01:38,350
OK.

23
00:01:38,400 --> 00:01:39,510
And that looks good.

24
00:01:39,510 --> 00:01:45,700
And we're going to go ahead and pull this so that it is about that wide.

25
00:01:45,720 --> 00:01:47,490
You see how it snaps there on those lines.

26
00:01:47,490 --> 00:01:48,460
That's good.

27
00:01:48,720 --> 00:01:52,990
And I'm going to make it about 60 points tall.

28
00:01:53,220 --> 00:01:54,230
Yeah that looks good.

29
00:01:54,240 --> 00:01:56,020
Let's go ahead and click the pin button.

30
00:01:56,190 --> 00:02:00,140
And we're going to actually pin this 20 from the left 20 from the right.

31
00:02:00,300 --> 00:02:05,070
And let's do 30 from the top just to put it a little bit below the status bar.

32
00:02:05,430 --> 00:02:10,110
I'm going to give it a fixed height of 60 and add four constraints.

33
00:02:10,110 --> 00:02:10,310
All right.

34
00:02:10,320 --> 00:02:11,430
That looks pretty good.

35
00:02:11,460 --> 00:02:14,050
That's in place next.

36
00:02:14,060 --> 00:02:15,570
What do we need to do.

37
00:02:15,570 --> 00:02:20,240
We're going to go ahead and we're going to add a button.

38
00:02:20,250 --> 00:02:21,060
That's right.

39
00:02:21,300 --> 00:02:27,150
Because in our app we're going to be able to turn on and off the flash at will and that's that's exactly

40
00:02:27,150 --> 00:02:28,080
what we need to do.

41
00:02:28,320 --> 00:02:30,980
So let's go ahead and put this here.

42
00:02:31,080 --> 00:02:36,610
We're going to go ahead and pin this just like we did with the view up top We're going to pin it 20

43
00:02:36,810 --> 00:02:37,550
from the left.

44
00:02:37,560 --> 00:02:40,650
We're also going to pin it 20 from the bottom.

45
00:02:40,890 --> 00:02:41,500
OK.

46
00:02:41,760 --> 00:02:43,860
And don't give it a size constraint yet.

47
00:02:43,890 --> 00:02:48,870
Just go ahead and add those two constraints and now we're going to do is we're going to change this

48
00:02:48,870 --> 00:02:54,220
font or not the font but the text rather to say flash off.

49
00:02:54,370 --> 00:02:58,290
That will be the default setting so we can go ahead and just have it say off.

50
00:02:58,290 --> 00:03:00,510
When we first launch the app that's fine.

51
00:03:00,630 --> 00:03:04,130
We're going to change the font because the system font is just ugly.

52
00:03:04,170 --> 00:03:07,250
Change it to Avenir next that's the font that I really like.

53
00:03:07,380 --> 00:03:10,770
If you've seen any of my other courses you know that I love Avenir next.

54
00:03:10,770 --> 00:03:13,960
And go ahead and set it to be demi bolds so we can see it.

55
00:03:13,980 --> 00:03:18,840
Nice and clear and blue is not a great color for what we're doing.

56
00:03:18,840 --> 00:03:21,970
So I think we should set it to be.

57
00:03:22,260 --> 00:03:23,290
Yeah I really like.

58
00:03:23,370 --> 00:03:25,050
Well no I don't like that.

59
00:03:25,080 --> 00:03:26,350
What would be a better color.

60
00:03:26,670 --> 00:03:28,080
Let's do the slopes red.

61
00:03:28,080 --> 00:03:31,810
If you're wondering does slopes red is d 8 4 7 1 e.

62
00:03:31,830 --> 00:03:33,930
That's the hexadecimal value.

63
00:03:34,140 --> 00:03:40,650
So with that set go ahead and scroll down in the attributes and Specter and we're going to get this

64
00:03:40,650 --> 00:03:46,200
button a white background and then we're going to stretch it out a little bit so that there's a little

65
00:03:46,200 --> 00:03:48,600
bit of cushioning on the left and right side.

66
00:03:48,690 --> 00:03:49,450
Whoops.

67
00:03:49,560 --> 00:03:53,700
And I just messed that up there but we're going to go ahead and click this button which updates the

68
00:03:53,700 --> 00:03:55,030
frames and.

69
00:03:55,050 --> 00:03:55,770
Oh right.

70
00:03:55,770 --> 00:03:56,130
Sorry.

71
00:03:56,130 --> 00:03:57,630
No wonder it's not staying in place.

72
00:03:57,630 --> 00:04:00,710
Let's go ahead and give it a fixed width but let's make it.

73
00:04:00,730 --> 00:04:03,550
Maybe not.

74
00:04:03,870 --> 00:04:09,180
Let's give it five on either side so let's give it a width of 85.

75
00:04:09,180 --> 00:04:09,600
There we go.

76
00:04:09,600 --> 00:04:10,400
That looks pretty good.

77
00:04:10,400 --> 00:04:14,580
So now we have a little bit of cushioning on the left and right side and it will also stay in place

78
00:04:14,580 --> 00:04:15,660
which That's what we want.

79
00:04:15,660 --> 00:04:16,560
Right.

80
00:04:16,590 --> 00:04:17,720
Very cool.

81
00:04:17,730 --> 00:04:24,990
So next let's go ahead and let's drag on a UI image view and we're going to put it in this position

82
00:04:25,050 --> 00:04:26,170
right here.

83
00:04:26,520 --> 00:04:33,750
And you know what we're going to actually want it to be about the same size or I guess orientation as

84
00:04:33,750 --> 00:04:34,590
our screen.

85
00:04:34,590 --> 00:04:37,590
So I'm just going to go ahead and eyeball there.

86
00:04:37,890 --> 00:04:39,340
That's fine that looks pretty good.

87
00:04:39,360 --> 00:04:43,480
And we're going to set it to be aspect Phil. Anyway so it doesn't really matter.

88
00:04:43,590 --> 00:04:45,790
So go ahead and let's give it some constraints now.

89
00:04:45,900 --> 00:04:52,800
So select the image click the pin button and we're going to make it 20 from the bottom and 20 from the

90
00:04:52,800 --> 00:04:57,870
left let's give it a fixed width and height and add four constraints.

91
00:04:57,870 --> 00:04:58,930
Very cool.

92
00:04:59,010 --> 00:05:02,390
You know what guys our UI is pretty much done now.

93
00:05:02,400 --> 00:05:09,250
We're going to do is we're going to connect it all connect all the elements to our view controller so

94
00:05:09,260 --> 00:05:11,260
that we can interact with them and use them.

95
00:05:11,270 --> 00:05:16,220
But we actually forgot one little thing we need to you eye labels.

96
00:05:16,220 --> 00:05:22,510
Of course this bar up here is going to display what item our app thinks that it took a picture of.

97
00:05:22,520 --> 00:05:26,790
So we need to actually add the labels so we can have that text it's kind of important.

98
00:05:26,900 --> 00:05:34,090
So let's go ahead and drag on to you I labels the top label is going to be changed of course to Avenir.

99
00:05:34,090 --> 00:05:35,820
Next my favorite font.

100
00:05:36,350 --> 00:05:41,300
And let's go ahead and set that to be demi bold so it stands out a little bit and a size 18 is pretty

101
00:05:41,300 --> 00:05:42,350
good.

102
00:05:42,350 --> 00:05:49,830
Let's change the font color to be deft slopes red and let's make it a little whip's little bit wider

103
00:05:50,300 --> 00:05:51,740
and let's center it.

104
00:05:52,060 --> 00:05:52,880
OK.

105
00:05:53,180 --> 00:05:58,290
Now I'm called up yet center the text.

106
00:05:58,300 --> 00:05:59,150
Very good.

107
00:05:59,500 --> 00:06:00,120
All right.

108
00:06:00,160 --> 00:06:05,530
Next we're going to go ahead and we are going to make this a little bit bigger.

109
00:06:05,530 --> 00:06:06,510
We're going to center it.

110
00:06:06,520 --> 00:06:11,820
We're going to change the font to a custom font and select Avenir next.

111
00:06:12,100 --> 00:06:15,040
And let's make it smaller Let's make it a size 12.

112
00:06:15,040 --> 00:06:17,590
And we're also going to make this Demi bold.

113
00:06:17,980 --> 00:06:18,610
OK.

114
00:06:18,970 --> 00:06:22,990
Now if you're wondering about the lining up of all of these don't worry we're going to put them in a

115
00:06:22,990 --> 00:06:25,340
stack view in just a moment.

116
00:06:25,340 --> 00:06:31,750
But for now let's go ahead and let's select both of these and let's let's put them in a stack.

117
00:06:31,810 --> 00:06:32,890
All right.

118
00:06:32,990 --> 00:06:34,710
So yeah I clicked the stack.

119
00:06:34,720 --> 00:06:38,890
You button down at the bottom and it put them into a nice little stack view of course.

120
00:06:38,890 --> 00:06:40,920
This is inside of this view.

121
00:06:40,990 --> 00:06:44,930
And so we're going to go ahead and drag it to the sides so that it snaps.

122
00:06:44,950 --> 00:06:46,460
You see those little grids.

123
00:06:46,690 --> 00:06:47,790
Lovely.

124
00:06:47,830 --> 00:06:51,730
And what we're going to do is we're going to pin it and we're going to actually make it.

125
00:06:51,760 --> 00:06:53,870
Let's let's go ahead and do eight.

126
00:06:53,890 --> 00:06:54,370
All around.

127
00:06:54,370 --> 00:07:02,180
So eight from the top eight from the left from the right and eight from the bottom nice k.

128
00:07:02,190 --> 00:07:08,650
So let's go ahead and let's set a default message for when the app loads and what I think sounds good

129
00:07:08,670 --> 00:07:12,200
is maybe the names of items

130
00:07:14,630 --> 00:07:18,510
captured will appear here.

131
00:07:18,530 --> 00:07:23,280
Now you notice that's a little too big and sometimes you get more than just one word return.

132
00:07:23,300 --> 00:07:28,940
Like for instance you might take a picture of your closet you might get wardrobe closet bureau or something

133
00:07:28,940 --> 00:07:29,670
like that.

134
00:07:29,690 --> 00:07:33,830
So if there is not enough space we need to make sure that the font can scale.

135
00:07:33,830 --> 00:07:34,970
So go ahead and click.

136
00:07:34,970 --> 00:07:36,560
Minimum font size.

137
00:07:36,560 --> 00:07:42,360
And we're going to make size 10 be the minimum font so it'll automatically scale down to fit.

138
00:07:42,470 --> 00:07:43,360
Pretty cool.

139
00:07:43,790 --> 00:07:48,950
And you know what for this label we're just going to say confidence and we're going to just leave a

140
00:07:48,950 --> 00:07:49,400
space.

141
00:07:49,400 --> 00:07:55,970
Now that will fill in automatically and we're going to actually make it hidden until we have scanned

142
00:07:55,970 --> 00:07:56,380
an image.

143
00:07:56,390 --> 00:07:59,870
But for now just garden type confidence and you know what.

144
00:08:00,230 --> 00:08:03,280
Let's make that a little smaller maybe.

145
00:08:07,450 --> 00:08:08,500
Let's do a size 10.

146
00:08:08,560 --> 00:08:10,590
I think size 10 looks pretty good.

147
00:08:10,930 --> 00:08:11,420
And you know what.

148
00:08:11,440 --> 00:08:14,750
With that done let's go ahead and connect this to our view controller.

149
00:08:14,770 --> 00:08:19,640
So go ahead and click the assistant editors so that we can see both at the same time.

150
00:08:19,720 --> 00:08:22,360
Get rid of did receive memory warning.

151
00:08:22,360 --> 00:08:24,360
Anybody got time for that.

152
00:08:24,370 --> 00:08:25,490
I mean seriously though.

153
00:08:25,990 --> 00:08:31,060
And we're basically going to right click and drag from each of these elements and create an IP outlet.

154
00:08:31,060 --> 00:08:34,420
So go ahead and right click and drag from the UI image view.

155
00:08:34,540 --> 00:08:42,560
We're going to just call this maybe capture image view OK whatever we capture We'll go there.

156
00:08:42,970 --> 00:08:47,890
Let's go ahead and right click and create an outlet for this UI button.

157
00:08:48,160 --> 00:08:50,630
Let's call this flash button.

158
00:08:52,170 --> 00:09:05,250
Let's go ahead and right click and drag from this label Let's call this identification label because

159
00:09:05,250 --> 00:09:12,750
that's where what we identify shows up right click and drag here we'll call this confidence label.

160
00:09:13,170 --> 00:09:15,260
And of course we almost forgot.

161
00:09:15,270 --> 00:09:20,630
Right click from our green view here and we're going to call this camera view.

162
00:09:20,670 --> 00:09:25,650
All right so now we need to do is basically create some custom view subclasses so that we can round

163
00:09:25,650 --> 00:09:31,950
the edges of this nice little view around the edges of our button and image view and also add a nice

164
00:09:31,950 --> 00:09:37,580
drop shadow on it just really improves what the app looks like it makes it look a little more professional.

165
00:09:37,800 --> 00:09:41,300
So go ahead and click on your view folder here.

166
00:09:41,760 --> 00:09:47,440
Right click and we're not going to create a new group sorry but create a new file.

167
00:09:47,680 --> 00:09:48,150
OK.

168
00:09:48,180 --> 00:09:50,500
It's of course going to be a cocoa touch class.

169
00:09:50,500 --> 00:09:52,550
And let's start with you view.

170
00:09:52,770 --> 00:10:00,070
So we're going to make it a subclass of you I view and I'm going to call it rounded rounded shadow view

171
00:10:00,720 --> 00:10:02,960
OK the language of course is swift.

172
00:10:03,150 --> 00:10:09,030
And once you've done that go ahead and just click Create and it'll automatically make you a nice subclass

173
00:10:09,090 --> 00:10:09,590
of you.

174
00:10:09,630 --> 00:10:13,350
You can't get rid of this boilerplate code.

175
00:10:13,470 --> 00:10:18,210
And what we're going to do is we're actually going to go ahead and call awake from NIB and we're going

176
00:10:18,210 --> 00:10:24,750
to just modify for properties K three properties to make a shadow and one property to round the corner

177
00:10:24,750 --> 00:10:25,550
radius.

178
00:10:25,620 --> 00:10:32,350
So to begin go ahead n type self dot layer dot shadow color and the shadow color.

179
00:10:32,370 --> 00:10:38,580
I like to use is dark grey and of course we need to convert that to a C.G. color and let's get this

180
00:10:38,580 --> 00:10:41,000
assistant editor out of the way so we have the full screen.

181
00:10:41,010 --> 00:10:42,080
There we go.

182
00:10:42,090 --> 00:10:42,360
All right.

183
00:10:42,360 --> 00:10:47,010
So dark grey and to use this as a color for a shadow.

184
00:10:47,010 --> 00:10:49,640
We need to convert it into a Siggi color.

185
00:10:49,680 --> 00:10:49,900
All right.

186
00:10:49,920 --> 00:10:52,160
Next self top layer.

187
00:10:52,170 --> 00:10:55,790
And what we're going to modify is the shadow radius.

188
00:10:55,980 --> 00:11:01,320
You can see that here now it's the blur radius in points used to render the layers shadow.

189
00:11:01,350 --> 00:11:09,180
So if we give it a value it will blur the shadow at a certain amount so obviously a bigger number is

190
00:11:09,180 --> 00:11:12,310
more blurry less of a number is more sharp.

191
00:11:12,390 --> 00:11:14,590
The number that I like to use is 15.

192
00:11:14,610 --> 00:11:16,560
You can try anything else that you'd like.

193
00:11:16,560 --> 00:11:18,270
I just like 15.

194
00:11:18,270 --> 00:11:18,810
All right.

195
00:11:18,810 --> 00:11:21,370
So we have shadow color we have a shadow radius.

196
00:11:21,390 --> 00:11:27,620
Next we're going to move on to shadow opacity WIPs shadow opacity is part of the layer.

197
00:11:27,630 --> 00:11:31,470
So self-taught layer that shadow opacity.

198
00:11:31,950 --> 00:11:34,710
And we're going to set it to be 75 percent opaque.

199
00:11:34,710 --> 00:11:40,650
We don't want it to be so intense that it's what we want it to be subtle you don't want it to be very

200
00:11:40,650 --> 00:11:41,190
intense.

201
00:11:41,190 --> 00:11:44,710
Cake is supposed to kind of just be in the background out of the way.

202
00:11:44,930 --> 00:11:45,210
OK.

203
00:11:45,210 --> 00:11:48,630
So 75 percent opacity for the shadow.

204
00:11:48,840 --> 00:11:54,900
And finally call self dot layer and this is where we're going to modify the corner radius to give it

205
00:11:55,500 --> 00:11:58,020
that nice rounded Pille shape.

206
00:11:58,020 --> 00:12:03,900
So go ahead and type self-taught layer dot corner radius and in order to do this we're going to go ahead

207
00:12:04,230 --> 00:12:11,740
and calculate the the height of the view and then from that view we're going to cut it in half and then

208
00:12:11,740 --> 00:12:13,860
around that much.

209
00:12:13,860 --> 00:12:20,340
If you think about it if we had a square and you were to start in the middle of the top of the square

210
00:12:20,550 --> 00:12:25,710
and round down to the middle of the other side and did that all the way around it would make a perfect

211
00:12:25,800 --> 00:12:26,220
circle.

212
00:12:26,220 --> 00:12:31,910
So we're basically doing that but only on the left and right sides of our rectangle view.

213
00:12:32,310 --> 00:12:40,860
So go ahead and type self layer frame that height you know what I don't know if I actually need the

214
00:12:40,860 --> 00:12:44,680
layer there I might just be able to get away with self-doubt framed that height yet.

215
00:12:44,700 --> 00:12:49,850
So could do that self-trust framed up height and then divided by 2.

216
00:12:49,860 --> 00:12:53,520
Believe it or not this will round the corners to make a perfect kill shape.

217
00:12:53,520 --> 00:12:54,550
Pretty cool.

218
00:12:55,310 --> 00:13:02,030
So now we need to do is set up our storyboards so that it knows to use this class and to do that all

219
00:13:02,030 --> 00:13:09,350
we need to do is to go into maned that storyboard select the view here that white view and we are going

220
00:13:09,350 --> 00:13:16,480
to go ahead and set its identity in the identity Inspektor to be rounded shadow view.

221
00:13:16,830 --> 00:13:18,050
OK that's easy enough.

222
00:13:18,050 --> 00:13:22,970
But there's one thing we need to do in camera AVC if we look here.

223
00:13:22,970 --> 00:13:26,660
Camera view is coming in as a huge view not rounded châteaux view.

224
00:13:26,660 --> 00:13:28,820
So we need to change it here as well.

225
00:13:29,000 --> 00:13:33,740
So just start by typing and autocomplete will help you supercool that way.

226
00:13:33,740 --> 00:13:34,710
Now it's good to go.

227
00:13:34,910 --> 00:13:38,620
So that is now set up as rounded châteaux view.

228
00:13:38,900 --> 00:13:44,100
Although wait a minute sorry our camera view is now it needs to be rounded.

229
00:13:44,630 --> 00:13:47,900
We actually never even made a connection for that view.

230
00:13:47,900 --> 00:13:48,740
Let's do that now.

231
00:13:48,740 --> 00:13:50,030
My mistake.

232
00:13:50,030 --> 00:13:52,910
So go into your view controller again.

233
00:13:53,300 --> 00:13:56,850
Sneaky little view trying to get out of doing his job.

234
00:13:56,930 --> 00:14:03,860
Right click and drag and let's create this let's just call this rounded label view.

235
00:14:03,950 --> 00:14:05,180
Very cool.

236
00:14:05,180 --> 00:14:05,450
All right.

237
00:14:05,490 --> 00:14:12,310
So going back now to our controller we can see that it is of type rounded shadow view supercool.

238
00:14:12,470 --> 00:14:13,700
OK that's great.

239
00:14:13,700 --> 00:14:18,800
There are no other views we need to round and give a shadow but we do need to round the corners of our

240
00:14:18,800 --> 00:14:20,700
button and give it the same shadow so.

241
00:14:20,780 --> 00:14:25,550
Believe it or not we're basically going to pass in the same thing in a week from Nibbe.

242
00:14:25,750 --> 00:14:26,320
OK.

243
00:14:26,330 --> 00:14:31,700
So I don't normally do this but I am going to for this case because we need to create a separate class

244
00:14:32,780 --> 00:14:33,470
for the button.

245
00:14:33,470 --> 00:14:36,390
So I'm going to copy this awake from NIB override.

246
00:14:36,440 --> 00:14:41,780
I'm going to create a new file and a new cocoa touch class but this time it's going to be a subclass

247
00:14:41,810 --> 00:14:43,550
of UI button.

248
00:14:43,550 --> 00:14:48,410
We're going to call it round it shadow button click next.

249
00:14:48,440 --> 00:14:49,660
Then click Create.

250
00:14:50,090 --> 00:14:55,770
And what we can do is we can replace this boilerplate code here with our awake from NIB function.

251
00:14:55,800 --> 00:15:01,730
And just like that we can go into our storyboard select our button and then change the class and the

252
00:15:01,730 --> 00:15:04,270
identity inspector to rounded shadow button.

253
00:15:04,450 --> 00:15:05,810
OK very cool.

254
00:15:06,260 --> 00:15:08,430
And let's think what do we need to do now.

255
00:15:09,070 --> 00:15:17,350
K in camera VC we need to change the button to be rounded shadow button and the last thing we need to

256
00:15:17,350 --> 00:15:22,870
do is to round the edges of our image view as well as give it a shadow so we're going to do the same

257
00:15:22,870 --> 00:15:24,170
exact thing.

258
00:15:24,280 --> 00:15:29,980
New File Cocco touch class UI image view image.

259
00:15:30,130 --> 00:15:35,390
We're going to call this rounded shadow in image view.

260
00:15:36,130 --> 00:15:37,210
OK very good.

261
00:15:37,270 --> 00:15:39,340
Create it going faster.

262
00:15:39,370 --> 00:15:40,600
We've done this already.

263
00:15:40,630 --> 00:15:46,630
Replace that boilerplate code with awake from NIB and our shadow creation and quarter radius modifications

264
00:15:46,690 --> 00:15:54,070
although we need to pause here for a second our image view we don't want to make it like a pill on the

265
00:15:54,070 --> 00:15:58,570
sides that'll actually kind of make it look like a football or Arnold's head if you watch Hey Arnold.

266
00:15:58,570 --> 00:16:03,190
But anyway what we want it to look like is just nicely rounded corners so I'm actually going to make

267
00:16:03,190 --> 00:16:06,580
it match the corner radius or the shadow radius of the shadow.

268
00:16:06,580 --> 00:16:12,670
So let's give it a corner radius of 15 for the image view then go back to the storyboard and we're going

269
00:16:12,670 --> 00:16:14,420
to repeat the same process we have been.

270
00:16:14,420 --> 00:16:21,430
Click image view change the class to the one we just made rounded shadow image view go to camera AVC

271
00:16:22,060 --> 00:16:27,180
change it to rounded shadow image view and let's go see if it worked.

272
00:16:27,190 --> 00:16:33,630
Let's go ahead and build this to an iPhone 7 and let's go see how we did.

273
00:16:33,640 --> 00:16:38,700
Let's make sure that our UI is looking pretty and that'll be that will be up for this video.

274
00:16:38,830 --> 00:16:41,850
Looks like it built to pull up in my sim here.

275
00:16:43,080 --> 00:16:44,820
And I'll center it by the way.

276
00:16:44,820 --> 00:16:47,460
I just love the new simulator in code 9.

277
00:16:47,460 --> 00:16:50,040
It's super cool all these buttons actually work.

278
00:16:50,040 --> 00:16:55,770
You can see as I hover over them they move power button volume on volume off you can really do everything.

279
00:16:55,770 --> 00:16:57,090
It's very cool.

280
00:16:57,090 --> 00:16:59,270
All right so cool look at this it works.

281
00:16:59,280 --> 00:17:02,250
We have a nice rounded view with a shadow.

282
00:17:02,250 --> 00:17:04,650
We have a nice rounded button with a nice pillowy shadow.

283
00:17:04,650 --> 00:17:09,870
And of course our image view is not showing up because we don't have an image yet but the override awake

284
00:17:09,870 --> 00:17:11,980
from NIB stuff that we just did.

285
00:17:12,270 --> 00:17:14,190
It worked here and I know that it will work there.

286
00:17:14,190 --> 00:17:19,820
So let's go ahead and let's move on to the next video where we're going to be starting to make the camera

287
00:17:19,820 --> 00:17:20,760
view work.

288
00:17:20,760 --> 00:17:24,130
We're going to go ahead and add a tap gesture so that you can take a photo.

289
00:17:24,300 --> 00:17:27,660
And we're also going to display that photo in the image view.

290
00:17:27,660 --> 00:17:29,310
So let's go ahead and head over to the next video.

291
00:17:29,310 --> 00:17:30,880
Awesome job with this one.