1
00:00:07,780 --> 00:00:13,630
Hey everybody this is Caleb with slopestyle common in this video we're going to build our view controller

2
00:00:13,630 --> 00:00:18,340
that's going to display the images that we select from our collection view.

3
00:00:18,340 --> 00:00:23,200
We're also going to set it up so that when you tap on a cell it actually presents that view controller

4
00:00:23,200 --> 00:00:26,170
will pass some data will do all that kind of stuff.

5
00:00:26,270 --> 00:00:27,340
It'll be really really cool.

6
00:00:27,340 --> 00:00:30,730
So let's go ahead and pull open our tax code project.

7
00:00:30,730 --> 00:00:31,620
There we go.

8
00:00:31,930 --> 00:00:36,470
And as it currently stands we have one view controller Matt visi.

9
00:00:36,490 --> 00:00:41,210
Now before we do anything else we need to first create a view control or file.

10
00:00:41,260 --> 00:00:48,130
So go ahead and right click on your controller folder click new file and select cocoa touch class.

11
00:00:48,130 --> 00:00:52,400
Now of course this is going to be of type you view controller.

12
00:00:52,630 --> 00:01:00,080
And I'm going to call this pop Visi because later we're going to use 3D Pekan pop to display the View

13
00:01:00,100 --> 00:01:00,540
Controller.

14
00:01:00,540 --> 00:01:05,360
So I'm just going to name pop Visi because we're popping The View Controller up yeah.

15
00:01:05,380 --> 00:01:09,870
So click Next go ahead and add it to your project.

16
00:01:10,210 --> 00:01:11,140
And here we go.

17
00:01:11,140 --> 00:01:14,900
So let's get rid of this boilerplate nonsense that we don't need.

18
00:01:15,310 --> 00:01:21,940
And now let's go ahead and head into the story board and let's create the actual interface builder element

19
00:01:22,030 --> 00:01:23,870
for The View Controller.

20
00:01:23,860 --> 00:01:24,190
Awesome.

21
00:01:24,190 --> 00:01:31,330
So there is Matt Visi and we're going to just drag in a new View Controller like so before we do anything

22
00:01:31,340 --> 00:01:37,340
we need to make sure we set the identity to be pop V-6 otherwise it's not going to do anything for us.

23
00:01:37,480 --> 00:01:42,880
And while we're here we're actually going to go ahead and set the storyboard ideas well to be pop Visi

24
00:01:43,780 --> 00:01:47,980
because we're going to use the storyboard later to instantiate our view controller.

25
00:01:48,060 --> 00:01:48,600
OK.

26
00:01:48,910 --> 00:01:50,390
So that is done.

27
00:01:50,560 --> 00:01:52,910
And now let's go ahead and add what we need.

28
00:01:52,930 --> 00:01:57,890
This view controller is going to be super simple it's basically going to be a giant UI image of you

29
00:01:58,240 --> 00:02:01,870
and we're going to put a little label down at the bottom just to give the user a clue that they should

30
00:02:01,870 --> 00:02:03,190
double tap to dismiss it.

31
00:02:03,190 --> 00:02:05,680
We're going to add that functionality later as well.

32
00:02:05,680 --> 00:02:11,230
So first let's go ahead and add on that image of you so search for image view.

33
00:02:11,230 --> 00:02:15,430
Drag it on and we're going to make it the entire size of the screen.

34
00:02:15,820 --> 00:02:17,050
Very easy.

35
00:02:17,050 --> 00:02:22,870
Now we're going to pin this to all four corners zero so that it stays put.

36
00:02:23,080 --> 00:02:28,870
And of course we need to set the content mode so that if an image is filling this it does not look stretched

37
00:02:28,900 --> 00:02:35,000
or distorted so select content mode and choose aspect fill.

38
00:02:35,260 --> 00:02:39,250
That way the image will fill up the screen but stay in aspect mode.

39
00:02:39,250 --> 00:02:46,300
Now some of the photos might get clipped a little bit but that's fine as long as they're not looking

40
00:02:46,300 --> 00:02:47,490
stretched and ugly.

41
00:02:47,560 --> 00:02:48,660
So very cool.

42
00:02:48,660 --> 00:02:50,360
We have an image view there.

43
00:02:50,380 --> 00:02:50,650
All right.

44
00:02:50,650 --> 00:02:56,530
So let's go ahead and let's drop on a view and we're going to just make a little you eye view here we're

45
00:02:56,530 --> 00:02:59,070
going to make it pretty small.

46
00:02:59,080 --> 00:03:02,780
Let's go ahead and just shrink it down to about that size should be good.

47
00:03:02,780 --> 00:03:09,370
I'll zoom in here so you can see now I'm just going to pin this 20 from the bottom like so I'm going

48
00:03:09,370 --> 00:03:10,770
to give it a fixed width and height.

49
00:03:10,780 --> 00:03:17,050
Let's make it nice even numbers here let's make it 100 wide by 25 high.

50
00:03:17,350 --> 00:03:21,750
And now I'm going to go ahead and pendant horizontally in the container so that it stays perfectly centered.

51
00:03:21,760 --> 00:03:26,840
And about this high next we're going to go ahead and add a label.

52
00:03:27,290 --> 00:03:28,330
If only I could spell it right.

53
00:03:28,330 --> 00:03:29,040
There we go.

54
00:03:29,230 --> 00:03:37,530
So drag it on and we're going to type double tap to dismiss.

55
00:03:37,570 --> 00:03:42,000
Now I'm seeing that I need to make this a little wider Let's try 200.

56
00:03:42,490 --> 00:03:48,110
And then our label we're going to need to stretch to fit the constraints of this.

57
00:03:48,280 --> 00:03:49,050
That looks good.

58
00:03:49,060 --> 00:03:54,580
Let's go to the attributes inspector and let's center our label and of course we want to change the

59
00:03:54,580 --> 00:03:58,030
font because you know how I feel about the system font.

60
00:03:58,040 --> 00:04:00,980
Change it to Avenir next door another nice font.

61
00:04:01,000 --> 00:04:06,830
And you know what just for fun let's make Demi bold looks pretty good.

62
00:04:06,940 --> 00:04:13,570
Now let's go ahead and let's center this horizontally and vertically in the container which is the little

63
00:04:13,570 --> 00:04:14,610
view that it's in.

64
00:04:14,790 --> 00:04:18,660
Add those constraints and you know what our view controller is done.

65
00:04:18,670 --> 00:04:20,180
That was super easy.

66
00:04:20,200 --> 00:04:24,850
We don't need to have a cancel button or anything because we're going to set up a double tap gesture

67
00:04:24,850 --> 00:04:26,370
to dismiss the view controller.

68
00:04:26,380 --> 00:04:28,540
So very simple.

69
00:04:28,540 --> 00:04:33,250
Now let's go ahead and set up the Iby outlet that's going to control the image view by going to the

70
00:04:33,250 --> 00:04:35,230
assistant editor.

71
00:04:35,230 --> 00:04:37,370
We are going to select pop the scene.

72
00:04:37,390 --> 00:04:40,270
You'll see it opens up nicely right there.

73
00:04:40,270 --> 00:04:45,280
Right click and drag from UI image view and drop it on your view controller.

74
00:04:45,280 --> 00:04:49,340
We're just going to call this pop image view.

75
00:04:49,480 --> 00:04:51,100
All right.

76
00:04:51,310 --> 00:04:56,440
And that's really all we need to do as far as interface builder goes so go ahead and close the assistant

77
00:04:56,440 --> 00:05:03,100
editor and open up just pop B.C now is where we need to think about what are we going to do to get the

78
00:05:03,130 --> 00:05:06,190
image in the UI image view.

79
00:05:06,220 --> 00:05:09,400
So let's go ahead and let's think about that now.

80
00:05:09,790 --> 00:05:14,540
I think it would be best for us to create a function that we will call when we initialize this view

81
00:05:14,540 --> 00:05:21,460
controller after we tap on one of the collection cells we can pass at an image and then we can present

82
00:05:21,460 --> 00:05:23,970
the view controller after we have initialized it.

83
00:05:24,160 --> 00:05:31,270
So let's write an initializer function now called func in that data and we're just going to go ahead

84
00:05:31,300 --> 00:05:38,840
and in this data function we're basically going to pass it an image from our collection view cell.

85
00:05:38,840 --> 00:05:45,490
So let's do enet data for Image and I'll create an internal parameter here called image and it's going

86
00:05:45,490 --> 00:05:47,690
to be of type II image.

87
00:05:48,190 --> 00:05:55,480
So now let's just assume that we have instantiated an instance of pop b c we call it data we pass in

88
00:05:55,480 --> 00:06:02,380
an image and we want to basically set a property in the view controller that can hold our image so that

89
00:06:02,410 --> 00:06:08,010
in view the load we can set our image to actually fill the image view that we want.

90
00:06:08,050 --> 00:06:14,150
So I'm going to create a variable called Past image and I'm actually going to put it.

91
00:06:14,890 --> 00:06:17,240
Now I'm going to put it beneath my Iby outlet.

92
00:06:17,320 --> 00:06:23,440
So go ahead and call or not call but right var past image because it's going to be the image that's

93
00:06:23,440 --> 00:06:26,620
passed in and it's going to be of type II image.

94
00:06:26,620 --> 00:06:32,650
Now we're going to put an exclamation mark because we definitely will have a value but we don't yet

95
00:06:32,830 --> 00:06:33,240
have it.

96
00:06:33,250 --> 00:06:36,090
And we're going to set it in our data function.

97
00:06:36,430 --> 00:06:41,750
So to do that just call self past image equals image.

98
00:06:41,770 --> 00:06:46,720
Now when we call this when we create an instance we'll be able to pass at an image set it to have a

99
00:06:46,720 --> 00:06:48,280
value from the get go.

100
00:06:48,460 --> 00:06:54,850
And then when the view loads we can call pop image view image and we can set its image property to be

101
00:06:55,120 --> 00:06:56,110
passed image.

102
00:06:56,320 --> 00:06:57,410
Very very cool.

103
00:06:57,430 --> 00:07:02,850
OK so now we can pass an image to our pop B.C instance.

104
00:07:02,860 --> 00:07:08,770
Now let's go back to map sea and let's see what we need to do in order to send an image through to this

105
00:07:08,770 --> 00:07:09,770
view controller.

106
00:07:09,790 --> 00:07:15,590
So go ahead and click on that B.C and there's a function we need to call from the collection view delegate

107
00:07:15,850 --> 00:07:23,710
and it is did select item an index path right there.

108
00:07:23,740 --> 00:07:28,840
This is what is called when one of the cells is tapped and the cool thing is that we can access the

109
00:07:28,840 --> 00:07:29,920
index path.

110
00:07:29,920 --> 00:07:37,150
Now if you remember our cells are set up by pulling out the images at the index path for every single

111
00:07:37,150 --> 00:07:43,720
row of our photos so we can get the specific photo we tap on by calling its index row and pulling it

112
00:07:43,720 --> 00:07:44,980
from our image array.

113
00:07:44,980 --> 00:07:46,350
It's very cool that way.

114
00:07:46,690 --> 00:07:52,060
So first we're going to have to create an instance of pop Visi then after that we're going to have to

115
00:07:52,060 --> 00:07:59,230
call our data function and pass the image from our image array and then we need to present it and that

116
00:07:59,260 --> 00:08:03,080
all happens when we select an item at a certain index path.

117
00:08:03,250 --> 00:08:09,100
So to create the pop Visi instance let's go ahead and use guard so that we're nice and safe let's call

118
00:08:09,100 --> 00:08:11,250
guard let pop.

119
00:08:11,260 --> 00:08:17,740
VC equals storyboard instantiate view controller with identifier.

120
00:08:17,740 --> 00:08:21,720
Now do you remember earlier I had you said a storyboard ID.

121
00:08:22,060 --> 00:08:26,410
That's what goes here and we've used this before but that's what goes here.

122
00:08:26,450 --> 00:08:29,090
Papa Visi that's the idea that we have set.

123
00:08:29,350 --> 00:08:35,260
And the cool thing is we can use the storyboard just like this we can instantiate a view controller

124
00:08:35,260 --> 00:08:37,480
from the storyboard with an ID.

125
00:08:37,480 --> 00:08:43,420
Now to get this to work properly to actually have it be a true instance of pop VC we need to cast it

126
00:08:44,020 --> 00:08:45,590
as pop visi.

127
00:08:46,070 --> 00:08:47,230
OK so there's that.

128
00:08:47,230 --> 00:08:51,320
But if this fails else we need to just return.

129
00:08:51,520 --> 00:08:55,380
We need to leave this function so that we don't cause a crash.

130
00:08:55,390 --> 00:09:02,230
So assuming it works though we have a nice instance of B C and now we can call pop B C in it.

131
00:09:02,230 --> 00:09:03,700
Data for image.

132
00:09:04,000 --> 00:09:10,690
And we can get that specific image by calling image array and pulling out the item at the specific index

133
00:09:10,690 --> 00:09:11,840
path we selected.

134
00:09:12,040 --> 00:09:20,900
So go ahead and type image array and then call index path dot row and that will send the exact image

135
00:09:20,900 --> 00:09:23,920
we tapped to this instance of the view controller.

136
00:09:24,230 --> 00:09:29,270
And once that data is there we are good to present this view controller so go ahead and call present

137
00:09:30,890 --> 00:09:36,500
and pass in a view controller to present which is pop you see animated of course because that just looks

138
00:09:36,500 --> 00:09:40,130
nice and when it's done we don't need to do anything specifically.

139
00:09:40,250 --> 00:09:41,120
That's it.

140
00:09:41,120 --> 00:09:46,820
We have now created an instance of B C we've passed the photo and we're now going to present it when

141
00:09:46,820 --> 00:09:49,320
we select a collection view item.

142
00:09:49,550 --> 00:09:52,510
I want to go test this out let's build and run it and let's see how we did

143
00:09:56,080 --> 00:09:58,990
our simulators opening up here.

144
00:09:58,990 --> 00:10:00,110
There we go.

145
00:10:00,570 --> 00:10:00,950
And.

146
00:10:00,970 --> 00:10:01,240
OK.

147
00:10:01,240 --> 00:10:03,940
So to review we should be able to drop a pin.

148
00:10:03,940 --> 00:10:10,570
Our view will animate up the images will load as we select an image it should pop up our view controller

149
00:10:10,570 --> 00:10:11,800
with our image passed right in.

150
00:10:11,800 --> 00:10:12,930
So let's give it a shot.

151
00:10:13,240 --> 00:10:19,700
Dropping a pin the simulator's a little slow at the animations but it's going to go ahead and download

152
00:10:19,730 --> 00:10:23,650
all the images that we need.

153
00:10:23,660 --> 00:10:24,750
Very cool.

154
00:10:25,560 --> 00:10:27,140
It's taking its time.

155
00:10:29,090 --> 00:10:31,760
It's almost done.

156
00:10:31,760 --> 00:10:32,250
All right cool.

157
00:10:32,300 --> 00:10:37,060
So if I click on an image let's see hey it's kind of weird.

158
00:10:37,370 --> 00:10:42,050
I guess someone likes to take photos in the doctor in a way but look at the photo we selected gets passed

159
00:10:42,050 --> 00:10:47,810
into this view controller and it's nice and we're using aspect fill so we don't have any issues with

160
00:10:48,200 --> 00:10:50,710
the photo being stretched or anything like that.

161
00:10:50,720 --> 00:10:51,610
So this is awesome.

162
00:10:51,620 --> 00:10:52,250
But you know what.

163
00:10:52,250 --> 00:10:53,690
It says double tap to dismiss.

164
00:10:53,690 --> 00:10:58,100
And if I double tap nothing happens so we're going to go fix that.

165
00:10:58,100 --> 00:11:04,700
Now we're going to go ahead and head back to Pop Visi and in pop b c we need to go ahead and create

166
00:11:05,390 --> 00:11:10,270
a tap gesture recognizer and we need to go ahead and add it to the view.

167
00:11:10,340 --> 00:11:16,250
So let's go ahead and do that by entering or you know what let's try to function actually that's a little

168
00:11:16,450 --> 00:11:17,870
a little better way to do it.

169
00:11:17,870 --> 00:11:24,820
So let's go ahead and call or write phunk add double tap.

170
00:11:25,160 --> 00:11:32,890
And now let's go ahead and create an instance of you I'd tap gesture recognizer let double tap lips

171
00:11:34,310 --> 00:11:37,330
equals you tap gesture recognizer.

172
00:11:37,490 --> 00:11:41,030
And of course we've done this before you know the target needs to be self.

173
00:11:41,040 --> 00:11:47,870
That's this view controller and the action is going to be a function that we need to write below.

174
00:11:47,870 --> 00:11:57,410
So when we call a selector selector it is looking for a function to pass in here and basically whenever

175
00:11:57,410 --> 00:12:00,440
the double tap is called it calls that function.

176
00:12:00,440 --> 00:12:07,740
So let's go ahead and write that function now and let's just call it screen was double tapped.

177
00:12:08,390 --> 00:12:08,840
OK.

178
00:12:08,900 --> 00:12:14,810
And inside the screen was double tap let's just dismiss the view controller and we don't need to do

179
00:12:14,810 --> 00:12:15,890
anything when it's complete.

180
00:12:15,890 --> 00:12:18,200
So let's just give it nil for the completion.

181
00:12:18,380 --> 00:12:23,690
But the selector here we need to call screen was double tapped.

182
00:12:24,050 --> 00:12:28,880
OK supercool that functions in there that means that when we double tap it's going to call this function

183
00:12:28,880 --> 00:12:31,120
which dismisses our view.

184
00:12:31,130 --> 00:12:35,810
We're getting an error which we've had every single time and that's because we have not yet exposed

185
00:12:35,810 --> 00:12:37,100
this method to Objective-C.

186
00:12:37,100 --> 00:12:38,450
So Click Fix.

187
00:12:38,570 --> 00:12:43,510
It adds an O B C and it allows you I tap gesture recognizer to play nicely.

188
00:12:43,660 --> 00:12:44,600
OK.

189
00:12:44,630 --> 00:12:46,040
Easy as that.

190
00:12:46,040 --> 00:12:50,720
So now let's go ahead and let's set up our double tap so that it requires two taps.

191
00:12:50,840 --> 00:12:58,580
We can do that by calling double tap number of taps required and set it to be equal to 2.

192
00:12:58,610 --> 00:13:03,320
Then of course in order to get this to work we need to set the delegate of our double tap to be this

193
00:13:03,320 --> 00:13:04,210
view controller.

194
00:13:04,220 --> 00:13:08,540
So go ahead and type double tap delegate equal self.

195
00:13:08,810 --> 00:13:09,440
OK.

196
00:13:09,800 --> 00:13:13,270
And then we're going to go ahead and add this gesture recognizer to the view.

197
00:13:13,490 --> 00:13:20,090
So go ahead and type view add gesture recognizer and we're going to pass it double tap.

198
00:13:20,090 --> 00:13:25,400
So we have now successfully added it to our view and whenever we double tap it's going to go ahead and

199
00:13:25,400 --> 00:13:29,830
call screen was double tapped which dismisses the View Controller.

200
00:13:29,870 --> 00:13:34,970
So we're getting an error here and that's because we have not yet conformed to you I gesture recognize

201
00:13:34,970 --> 00:13:38,110
or delegate but we can do that right at the top.

202
00:13:38,330 --> 00:13:45,360
You gesture recognizer delegate build it and you'll notice that the error goes away.

203
00:13:45,380 --> 00:13:46,550
Very very cool.

204
00:13:46,550 --> 00:13:50,210
So let's go try it now and see if this view controller dismisses.

205
00:13:50,210 --> 00:13:55,190
And if it does then this video will be done and will be moving on to the last video where we're going

206
00:13:55,190 --> 00:14:00,770
to add 3D touch capabilities so that we can peek at the images to see what they are and push a little

207
00:14:00,770 --> 00:14:03,710
bit harder to pop them onto the next View Controller.

208
00:14:03,710 --> 00:14:04,310
It's very cool.

209
00:14:04,310 --> 00:14:10,710
So let's go ahead let's double tap here to drop a pin and we'll wait to see if the photos load.

210
00:14:11,000 --> 00:14:18,190
After that we will select it and then we'll try to dismiss the View Controller.

211
00:14:18,220 --> 00:14:18,460
All right.

212
00:14:18,460 --> 00:14:20,130
Looks like we're almost there.

213
00:14:20,950 --> 00:14:21,410
All right cool.

214
00:14:21,430 --> 00:14:27,680
So if I click on an image it pops up if I double tap nothing happens.

215
00:14:27,680 --> 00:14:28,820
Interesting.

216
00:14:28,870 --> 00:14:30,590
Oh guys I'm so sorry.

217
00:14:30,590 --> 00:14:32,770
That's because we never called add double tap.

218
00:14:32,770 --> 00:14:38,120
From our view to load who let's do that add double tap build and run one more time.

219
00:14:38,120 --> 00:14:42,820
Sorry guys sometimes it's the smallest things that get you caught up.

220
00:14:43,070 --> 00:14:44,300
OK let's try that one more time.

221
00:14:44,300 --> 00:14:45,800
Drop a pin.

222
00:14:45,800 --> 00:14:46,900
There we go.

223
00:14:48,350 --> 00:14:48,950
Sweet.

224
00:14:48,950 --> 00:14:49,160
All right.

225
00:14:49,160 --> 00:14:50,020
Looks good.

226
00:14:50,300 --> 00:14:55,480
And we should get some photos here we should be able to select one and double tap to dismiss it.

227
00:14:55,970 --> 00:14:59,450
Let's just wait to see when this finishes and then we will test that out

228
00:15:02,600 --> 00:15:02,930
right.

229
00:15:02,930 --> 00:15:04,040
Looks like we're done.

230
00:15:04,040 --> 00:15:04,730
There we go.

231
00:15:04,730 --> 00:15:05,730
Very cool.

232
00:15:06,050 --> 00:15:07,670
OK so let's choose a photo.

233
00:15:07,680 --> 00:15:08,210
There's that.

234
00:15:08,210 --> 00:15:14,980
And if I double tap awesome it dismisses perfect so you can go check out the photos see what's in there

235
00:15:16,110 --> 00:15:16,750
and.

236
00:15:16,920 --> 00:15:17,450
Oh my.

237
00:15:17,450 --> 00:15:18,100
Who.

238
00:15:18,180 --> 00:15:19,280
Scary.

239
00:15:19,290 --> 00:15:23,660
Anyway you can see what's in there you can double tap and dismiss them.

240
00:15:23,680 --> 00:15:24,560
Oh that's nice.

241
00:15:24,570 --> 00:15:26,140
Nice little barbecue.

242
00:15:26,160 --> 00:15:27,240
Very cool.

243
00:15:27,630 --> 00:15:34,170
And you guys that is working that's great our tap gesture dismisses our pop VC is receiving images from

244
00:15:34,170 --> 00:15:36,050
our you know collection view.

245
00:15:36,510 --> 00:15:37,740
Yeah this is awesome.

246
00:15:37,740 --> 00:15:43,020
Let's go ahead and move on to our final video where we're going to add in 3-D touch and we're going

247
00:15:43,020 --> 00:15:50,030
to enable users with 3D touch enabled devices to push on an image to preview it or to peek at it.

248
00:15:50,040 --> 00:15:53,570
They say and then push harder to pop it on to the next controller.

249
00:15:53,580 --> 00:15:56,130
Nicely done with this video and we'll see in the next one.