1
00:00:07,540 --> 00:00:12,340
Hey hey guys this is Caleb with slopes dot com and can you believe it.

2
00:00:12,350 --> 00:00:17,780
This is our last video in the map kit section and it's not even about MAP kit.

3
00:00:17,960 --> 00:00:20,540
We're going to be actually integrating 3D touch.

4
00:00:20,540 --> 00:00:29,060
This is a cool extra bonus for this app where we're going to basically allow for 3D touch to be pressed

5
00:00:29,960 --> 00:00:35,750
where we're basically going to allow for the images on the UI collection view to be pressed with a little

6
00:00:35,750 --> 00:00:36,330
bit of force.

7
00:00:36,350 --> 00:00:42,500
And you can peek at the content and then a firmer press pops it onto that pop Visi that we created.

8
00:00:42,500 --> 00:00:44,810
It's very very cool and it's super easy.

9
00:00:44,930 --> 00:00:48,950
So I wanted to show you to make sure that you guys could integrate this into this app because it just

10
00:00:49,070 --> 00:00:53,030
adds something very special to it that I think you're really going to like.

11
00:00:53,030 --> 00:00:55,850
So go ahead and pull open your X code project.

12
00:00:55,850 --> 00:00:57,270
I love doing that.

13
00:00:57,270 --> 00:00:59,180
So like I have the force anyway.

14
00:00:59,190 --> 00:01:05,240
So yeah pull up your next code project and we're going to actually start in MAP B C and we're going

15
00:01:05,240 --> 00:01:12,850
to extend map b c so that we can conform to the you eye view controller previewing delegate.

16
00:01:12,890 --> 00:01:13,720
That's what it's called.

17
00:01:13,730 --> 00:01:17,260
And if you want to use 3D touch you need to know about this.

18
00:01:17,270 --> 00:01:21,350
So let's begin in MAP B.C by typing extension.

19
00:01:21,770 --> 00:01:29,420
Matt Visi UI view controller and you can see right here you IDE controller previewing a delegate.

20
00:01:29,420 --> 00:01:35,270
Now it says a set of methods used by the delegate to respond with a preview view controller.

21
00:01:35,270 --> 00:01:39,020
That's what we get that's the peak part and a commit view controller.

22
00:01:39,080 --> 00:01:46,040
That's the part 2 to the user pressing a view object on the screen of a device that supports 3D touch.

23
00:01:46,040 --> 00:01:47,630
OK there we go.

24
00:01:47,630 --> 00:01:53,900
So we are now conforming to this delegate and we need to call two methods to do this properly.

25
00:01:53,900 --> 00:01:56,020
You'll see that it's not yet letting us conform.

26
00:01:56,050 --> 00:02:03,430
That's because we're missing two very important methods and one is called View Controller for location.

27
00:02:04,090 --> 00:02:11,850
And the other is called View Controller to commit.

28
00:02:12,390 --> 00:02:12,980
OK.

29
00:02:13,140 --> 00:02:15,580
Now they're part of previewing context.

30
00:02:15,690 --> 00:02:22,250
And of course for 3D touch it needs to know the context it needs to know what you're trying to present.

31
00:02:22,350 --> 00:02:24,090
Now View Controller for a location.

32
00:02:24,090 --> 00:02:28,680
This is where we're going to set up pop Visi and this is actually what happens when you push all the

33
00:02:28,680 --> 00:02:34,620
way through to present the view controller preview in-context view controller to commit.

34
00:02:34,620 --> 00:02:39,090
This is where we're going to set up the Peak part where when you push a little bit it will show you

35
00:02:39,090 --> 00:02:40,770
the peak of what you will see.

36
00:02:41,010 --> 00:02:45,800
And then you will push all the way through to present the view controller from this function above.

37
00:02:45,810 --> 00:02:48,880
So let's go ahead and let's start with.

38
00:02:49,350 --> 00:02:52,950
Well it doesn't really matter because we actually need both to work.

39
00:02:52,950 --> 00:02:58,310
So let's just begin here with The View Controller for location.

40
00:02:58,470 --> 00:03:03,690
And basically what we're going to do is we're going to tell it where we are pressing and we're going

41
00:03:03,690 --> 00:03:08,820
to give it an idea of where we are pressing on our cell so that it knows where to animate from.

42
00:03:08,820 --> 00:03:13,290
So if we push from the bottom left corner it will animate the image up to the Center for pushing from

43
00:03:13,290 --> 00:03:16,060
the top it will animate a little bit up to the center.

44
00:03:16,500 --> 00:03:22,050
But before that we need to basically create a constant that will hold the index path so it knows where

45
00:03:22,050 --> 00:03:28,320
we're pushing from and we're going to also create a cell from that index path so that we can access

46
00:03:28,320 --> 00:03:34,200
the photo value or the photo the image from that cell.

47
00:03:34,200 --> 00:03:40,710
So let's go ahead and let's use guard left so we can be extra safe and let's go ahead and type guard

48
00:03:40,710 --> 00:03:50,970
left index path equals collection view index path for item at location and you know what we actually

49
00:03:50,970 --> 00:03:53,070
get a location from our view controller.

50
00:03:53,070 --> 00:03:55,230
So we're going to pass in that location.

51
00:03:55,440 --> 00:04:00,030
And this is what helps us to know exactly where we're pressing from so we can get an index path from

52
00:04:00,030 --> 00:04:00,870
that.

53
00:04:00,870 --> 00:04:05,070
Now I don't know if you know this but you can actually create multiple constants inside the same guard

54
00:04:05,070 --> 00:04:05,520
statement.

55
00:04:05,520 --> 00:04:08,720
So all you have to do is just create a comma and type let.

56
00:04:08,730 --> 00:04:10,400
And now we can create a second one.

57
00:04:10,590 --> 00:04:17,490
So we're going to call this one cell and we're going to set it to be equal to collection view cell for

58
00:04:17,490 --> 00:04:18,870
item an index path.

59
00:04:18,870 --> 00:04:19,550
And you know what.

60
00:04:19,560 --> 00:04:28,680
Hahaha we already have one so let's give it let's give it the index path we just create it.

61
00:04:28,860 --> 00:04:30,120
Very cool.

62
00:04:30,120 --> 00:04:32,930
Now of course at the end of a guard statement we need to call.

63
00:04:32,940 --> 00:04:33,840
Else.

64
00:04:33,840 --> 00:04:40,630
And if we do not do this successfully if it fails we still need to return a view control.

65
00:04:40,710 --> 00:04:45,630
But it is optional so we have the option to return nil meaning there is no view controller to pop through

66
00:04:45,630 --> 00:04:47,640
to so we can just say return nil.

67
00:04:47,640 --> 00:04:52,230
We could also just return a blank controller but it would just pop up a blank view controller and that's

68
00:04:52,230 --> 00:04:52,530
ugly.

69
00:04:52,530 --> 00:04:56,810
So if we return nil it basically just is like telling it to cancel.

70
00:04:56,850 --> 00:05:00,050
So that's what we're going to do is return nil instead.

71
00:05:00,270 --> 00:05:05,540
So now we have an index path and we have a sell at that specific index path.

72
00:05:05,550 --> 00:05:11,340
And now we can actually get the important stuff that we need from that sell which is awesome like the

73
00:05:11,340 --> 00:05:12,630
image for instance.

74
00:05:12,630 --> 00:05:17,610
So let's go ahead and let's set up an instance of pop VC because remember that's the one that will be

75
00:05:17,610 --> 00:05:19,520
popping on at the end.

76
00:05:19,650 --> 00:05:23,420
And this previewing context controller for location.

77
00:05:23,660 --> 00:05:30,020
This is for the final presentation like the app currently when you tap on a cell just touch it.

78
00:05:30,030 --> 00:05:31,690
It presents the view controller.

79
00:05:31,740 --> 00:05:35,520
This is what we'll show when we push all the way through.

80
00:05:35,520 --> 00:05:39,710
So we're going to set up another guard let to How's pop visi.

81
00:05:39,740 --> 00:05:42,610
So go ahead and type guard let me see.

82
00:05:42,900 --> 00:05:48,140
And it's going to be equal to storyboard instantiate storyboard with identifier.

83
00:05:48,180 --> 00:05:55,770
The identifier of course being poppyseed we're going to cast it as pop visi.

84
00:05:55,920 --> 00:06:01,240
And then of course if that doesn't work we can say else whoops else.

85
00:06:01,260 --> 00:06:05,390
And you know what we're going to return nil as well.

86
00:06:05,400 --> 00:06:06,140
OK.

87
00:06:06,300 --> 00:06:09,510
Because if this doesn't work we're going to return nil to the view controller.

88
00:06:09,630 --> 00:06:11,870
That's what it needs or not what it needs.

89
00:06:11,880 --> 00:06:17,220
But what it can accept if this were different if this was an exclamation mark or nothing we would need

90
00:06:17,220 --> 00:06:18,580
to return something.

91
00:06:18,600 --> 00:06:23,820
But for this we can actually return nil since it's since it's optional.

92
00:06:23,820 --> 00:06:30,090
So cool assuming that pop VC works and we get a pop b c we should initialize it with that photo data

93
00:06:30,120 --> 00:06:31,220
from the cell.

94
00:06:31,230 --> 00:06:34,690
So let's go ahead and type pop Visi in that data.

95
00:06:34,710 --> 00:06:38,310
And you know what the cell pulls its image from the index path.

96
00:06:38,310 --> 00:06:42,100
So I think we should do the same thing from the image array.

97
00:06:42,150 --> 00:06:42,830
Go ahead and call.

98
00:06:42,840 --> 00:06:43,780
Image array.

99
00:06:43,950 --> 00:06:50,430
Then get the index path and pull out the row because that will tell us the exact spot that we're touching

100
00:06:50,900 --> 00:06:51,900
from the index path.

101
00:06:51,930 --> 00:06:53,370
And it will pass the proper image.

102
00:06:53,370 --> 00:06:56,160
Otherwise we'd end up with a random image that we didn't select.

103
00:06:56,160 --> 00:06:58,410
You don't want that does not look good.

104
00:06:58,470 --> 00:07:05,070
So now that we have properly initialized B C with the proper amount of data there there's one thing

105
00:07:05,070 --> 00:07:08,340
we need for this and it is the previewing text.

106
00:07:08,460 --> 00:07:09,230
OK.

107
00:07:09,550 --> 00:07:17,930
Now we're basically going to set up the size that is previewed when we push on the View Controller.

108
00:07:18,100 --> 00:07:20,250
So let's let me just show you what this is like.

109
00:07:20,250 --> 00:07:28,090
We're going to type preview in-context source rect meaning the size of the rectangle of the photo like

110
00:07:28,090 --> 00:07:30,610
if it was a square photo the rectangle would be circle.

111
00:07:30,700 --> 00:07:37,540
If it was a 16 by 9 photo it would be kind of like a landscape photo if it was the size of the screen

112
00:07:37,570 --> 00:07:40,580
it would be like a smaller version of the size of the screen.

113
00:07:40,870 --> 00:07:48,190
So the source racks we're just going to set to be equal to sell content view frame because the content

114
00:07:48,210 --> 00:07:53,310
you could change in the cell itself is square but the content view might be a different size.

115
00:07:53,320 --> 00:07:57,490
So we want to show what the actual image looks like so you can see the full thing and then we'll show

116
00:07:57,490 --> 00:07:59,020
the zoomed in version.

117
00:07:59,020 --> 00:08:04,840
So this source recked if you look here it says the rectangle in the source views coordinate system that

118
00:08:04,840 --> 00:08:11,080
responds to a forceful touch by a user and remains visually sharp while surrounding content blurs.

119
00:08:11,320 --> 00:08:14,020
If you've ever used 3-D touch you know what this is like.

120
00:08:14,110 --> 00:08:18,220
This is the rectangle that will zoom up and then everything else behind it gets blurry until we push

121
00:08:18,220 --> 00:08:20,470
it through to show the full view controller.

122
00:08:20,480 --> 00:08:21,060
OK.

123
00:08:21,460 --> 00:08:27,460
Then of course at the very end assuming that all of this is hunky dory and it's good to go we just return

124
00:08:27,910 --> 00:08:28,620
poppyseed.

125
00:08:28,870 --> 00:08:34,690
OK because we've now set it up properly and we've given a preview in context for 3D touch.

126
00:08:34,690 --> 00:08:37,110
Now the cool thing this is all set up.

127
00:08:37,120 --> 00:08:42,940
The only thing we need to do for this is to tell it which View Controller it's supposed to commit.

128
00:08:42,970 --> 00:08:43,660
Check this out.

129
00:08:43,660 --> 00:08:50,650
All we need to type is show and we're going to pass it the controller to commit because we've already

130
00:08:50,650 --> 00:08:51,570
set this up.

131
00:08:51,670 --> 00:08:57,700
We've told it the preview in context the view controller to commit is the controller to commit.

132
00:08:57,700 --> 00:09:00,670
I know that doesn't make sense but it's getting this from this function.

133
00:09:00,670 --> 00:09:06,410
We've set up pop B C and then when this function is called when this delegate method is called Pop VC

134
00:09:06,460 --> 00:09:12,170
is the function or sorry is the controller that is passed through here and the sender is self.

135
00:09:12,190 --> 00:09:14,230
It's coming from this view controller.

136
00:09:14,230 --> 00:09:19,470
So show is going to present a view controller in a primary context.

137
00:09:19,480 --> 00:09:20,060
OK.

138
00:09:20,380 --> 00:09:24,610
Now that is what we are using and that is what will give us 3D touch capabilities.

139
00:09:24,610 --> 00:09:26,640
I'm not joking it's that simple.

140
00:09:26,650 --> 00:09:27,910
Do you guys want to check it out.

141
00:09:28,180 --> 00:09:28,570
OK.

142
00:09:28,630 --> 00:09:30,070
Let's go build and run.

143
00:09:30,070 --> 00:09:32,520
Let's go see how we did.

144
00:09:32,560 --> 00:09:38,830
There are of course other ways that you can modify 3D touch like if you've ever used 3-D touch in like

145
00:09:38,830 --> 00:09:41,110
the Facebook app or in another app.

146
00:09:41,320 --> 00:09:45,460
You'll see there's like a little up carrot at the top and you can swipe up to get different options

147
00:09:45,460 --> 00:09:47,270
on like an action sheet.

148
00:09:47,350 --> 00:09:52,470
You can integrate that we're not going to integrate that for the intents and purposes of this course.

149
00:09:52,480 --> 00:09:57,600
But I really recommend that you dive into the to the documentation because it's really interesting.

150
00:09:57,610 --> 00:09:59,850
So let's go ahead let's drop a pin.

151
00:10:00,250 --> 00:10:03,890
Let's let it load some photos and let's try out 3-D touch.

152
00:10:04,150 --> 00:10:10,630
A side note is if you don't have one of the new Mac book Pros with the touch bar like I do.

153
00:10:10,630 --> 00:10:13,610
You're not going to be able to test 3D touch on your computer.

154
00:10:13,630 --> 00:10:18,520
The new trackpad on the new Mac books allow you to test out 3D touch.

155
00:10:18,520 --> 00:10:23,340
So you're either going to have to have a device with 3D touch or one of the new Mac books.

156
00:10:23,440 --> 00:10:27,910
And if you don't then maybe you might choose that this feature is not good for you to integrate in the

157
00:10:27,910 --> 00:10:34,120
app for yourself but you might want to include it just because it might be fun for another user.

158
00:10:34,120 --> 00:10:41,320
Of course you can simulate 3D touch in here and I don't remember where you touch pressure and if you

159
00:10:41,320 --> 00:10:47,000
don't have 3-D touch you can turn off use trackpad force or actually you know what.

160
00:10:47,050 --> 00:10:48,540
It's not even going to let me since I can.

161
00:10:48,550 --> 00:10:53,150
But you can do a shallow press or a deep press that way which is kind of cool.

162
00:10:53,230 --> 00:10:57,120
So I'm going to use my trackpad here I'm going to gently press down on a photo.

163
00:10:57,160 --> 00:11:02,670
Let's let's try this one if I press.

164
00:11:03,010 --> 00:11:04,930
Oh OK so that's not good.

165
00:11:04,930 --> 00:11:05,860
It's not letting me do it.

166
00:11:05,860 --> 00:11:06,670
Let's try it again.

167
00:11:06,670 --> 00:11:10,120
Let's try pressing.

168
00:11:10,260 --> 00:11:17,580
Maybe I turned off my used trackpad force ha interesting

169
00:11:21,730 --> 00:11:24,790
OK so it looks like it's not working.

170
00:11:24,790 --> 00:11:30,090
Let me think about what we have done here that I may have missed.

171
00:11:30,160 --> 00:11:32,950
We're setting it up to preview.

172
00:11:33,310 --> 00:11:35,400
Oh you know what guys sorry.

173
00:11:35,410 --> 00:11:39,940
There is one thing we need to do there's a function that you have to call and we've basically set it

174
00:11:39,940 --> 00:11:46,750
up to do everything that it needs to but we have not yet told it where it is getting this source wrecked.

175
00:11:46,750 --> 00:11:48,760
Where is it taking that rectangle from.

176
00:11:48,760 --> 00:11:51,850
We need to register our collection to you first.

177
00:11:51,850 --> 00:11:53,810
So let's go ahead and up in view.

178
00:11:53,820 --> 00:11:54,610
Did load.

179
00:11:54,610 --> 00:11:57,020
Let's find that you did load.

180
00:11:57,040 --> 00:12:05,350
We're going to call register register for previewing with you I view controller previewing delegate

181
00:12:05,350 --> 00:12:10,930
which since we've conformed we can call self and the source view is going to be the collection view.

182
00:12:11,200 --> 00:12:16,920
Oh that is so much better so the source view like you saw down here the source correct.

183
00:12:16,930 --> 00:12:18,280
Those go hand in hand.

184
00:12:18,310 --> 00:12:22,960
We didn't tell it what the source view was so it can't get the source recked let's build and run it

185
00:12:22,960 --> 00:12:26,480
one more time and let's double check to make sure that that's going to work.

186
00:12:26,560 --> 00:12:28,420
Looks like we're getting an error here.

187
00:12:28,650 --> 00:12:31,330
Oh of course I did not unwrap the collection view.

188
00:12:31,330 --> 00:12:32,830
That's the problem.

189
00:12:32,830 --> 00:12:34,100
Remember it is optional.

190
00:12:34,150 --> 00:12:38,920
So we need to unwrap it and let's go ahead and try this one more time we're going to download photos

191
00:12:38,920 --> 00:12:39,240
again.

192
00:12:39,250 --> 00:12:41,280
Sorry about that folks.

193
00:12:41,290 --> 00:12:42,560
Here we go.

194
00:12:43,580 --> 00:12:46,980
Sweet OK.

195
00:12:47,000 --> 00:12:51,300
So once that's done we should be able to test 3D touch.

196
00:12:51,300 --> 00:12:52,140
Let's give it a shot.

197
00:12:55,330 --> 00:12:55,570
All right.

198
00:12:55,570 --> 00:12:56,840
Looks like it's almost done.

199
00:12:56,860 --> 00:12:58,210
And here we go.

200
00:12:58,210 --> 00:12:59,170
Let's give it a try.

201
00:12:59,170 --> 00:13:02,490
I'm going to push gently.

202
00:13:02,610 --> 00:13:04,410
Oh did you see that.

203
00:13:04,440 --> 00:13:05,140
That was it.

204
00:13:05,280 --> 00:13:07,000
Let's see if I can do it slowly.

205
00:13:07,050 --> 00:13:10,020
By turning off my trackpad force here.

206
00:13:10,470 --> 00:13:12,490
I don't know if I can.

207
00:13:12,780 --> 00:13:13,710
No it's not going to let me.

208
00:13:13,710 --> 00:13:17,430
OK so I'll have to try my best to be very gentle.

209
00:13:17,430 --> 00:13:19,370
Let's press very lightly.

210
00:13:19,380 --> 00:13:23,620
This is simulating the peak little

211
00:13:27,940 --> 00:13:33,490
you know what I think I messed it up by turning off my trackpad for us here.

212
00:13:33,500 --> 00:13:34,380
Funny.

213
00:13:34,700 --> 00:13:35,150
Oh there it is.

214
00:13:35,150 --> 00:13:35,600
OK sorry.

215
00:13:35,600 --> 00:13:36,320
No I didn't.

216
00:13:36,320 --> 00:13:40,700
So if you push gently you can see the preview and then you can double tap to release it.

217
00:13:41,560 --> 00:13:46,750
Push and pop peek that image and pop.

218
00:13:46,750 --> 00:13:47,260
There we go.

219
00:13:47,260 --> 00:13:49,100
It's hard to do on the trackpad.

220
00:13:49,450 --> 00:13:52,900
Let's see a little bit and if I let go goes back down.

221
00:13:52,900 --> 00:13:54,370
Very cool.

222
00:13:54,370 --> 00:13:54,760
There we go.

223
00:13:54,760 --> 00:13:57,550
And if I push all the way through it opens up.

224
00:13:57,550 --> 00:14:00,190
So guys we just integrate it 3D touch into our app.

225
00:14:00,190 --> 00:14:01,690
It's that easy.

226
00:14:01,690 --> 00:14:06,190
Make sure that you register for previewing you have to tell it where it should be looking at.

227
00:14:06,220 --> 00:14:08,200
That was my big oops in this video.

228
00:14:08,320 --> 00:14:13,270
But it's good that you saw me have to process through that and remember that that is important to do

229
00:14:13,270 --> 00:14:15,290
because we have everything set up beautifully here.

230
00:14:15,310 --> 00:14:19,660
But if we're not telling it where it's supposed to get this source recked then it doesn't know how to

231
00:14:19,660 --> 00:14:21,490
pop and where it should pop to.

232
00:14:21,490 --> 00:14:26,380
Awesome awesome job guys and congratulations on finishing another section of this course in the next

233
00:14:26,380 --> 00:14:31,270
video I'm going to give you a challenge to extend this app to make it a little bit better a little bit

234
00:14:31,270 --> 00:14:34,080
more complex and overall just a better app.

235
00:14:34,090 --> 00:14:34,830
Awesome job.

236
00:14:34,840 --> 00:14:36,460
And we'll see in the next video.