Hey hey guys this is Caleb with Dev's slopes dot com and can you believe it.
This is our last video in the map kit section and it's not even about MAP kit.
We're going to be actually integrating 3D touch.
This is a cool extra bonus for this app where we're going to basically allow for 3D touch to be pressed
where we're basically going to allow for the images on the collection view to be pressed with a little
bit of force and you can peek at the content and then a firmer press pops it onto that pop Visi that
we created.
It's very very cool and it's super easy.
So I wanted to show you to make sure that you guys could integrate this into this app because it just
adds something very special to it that I think you're really going to like.
So go ahead and pull open your X code project.
I love doing that.
It's like I have the force anyway.
So yeah pull up your next code project and we're going to actually start in MAP B C and we're going
to extend map b c so that we can conform to the you eye view controller previewing delegate.
That's what it's called.
And if you want to use 3D touch you need to know about this.
So let's begin in MAP B by typing extension.
Matt Visi you view controller and you can see right here you have your controller previewing a delegate.
Now it says a set of methods used by the delegate to respond with a preview view controller.
That's what we're that's the peak part and a commit view controller.
That's the part 2 to the user pressing a view object on the screen of a device that supports 3D touch.
OK there we go.
So we are now conforming to this delegate and we need to call two methods to do this properly.
You'll see that it's not yet letting us conform.
That's because we're missing two very important methods and one is called View Controller for location
and the other is called View Controller to commit.
OK.
Now they're part of previewing context.
And of course for 3D touch it needs to know the context it needs to know what you're trying to present.
Now View Controller for a location.
This is where we're going to set up pop B.C and this is actually what happens when you push all the
way through to present the view controller preview in context view controller or to commit.
This is where we're going to set up the Peak part where when you push a little bit it will show you
the peak of what you will see and then you will push all the way through to present the view controller
from this function above.
So let's go ahead and let's start with.
Well it doesn't really matter because we actually need both to work.
So let's just begin here with The View Controller for location.
And basically what we're going to do is we're going to tell it where we are pressing and we're going
to give it an idea of where we are pressing on our cell so that it knows where to animate from.
So if we push from the bottom left corner it will animate the image up to the Center for pushing from
the top it will animate a little bit up to the center.
But before that we need to basically create a constant that will hold the index path so it knows where
we're pushing from and we're going to also create a cell from that index path so that we can access
the photo value or the photo the image from that cell.
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
let index path equals collection view index path for item location.
And you know what we actually get a location from our view controller so we're going to pass in that
location.
And this is what helps us to know exactly where we're pressing from so we can get an index path from
that.
Now I don't know if you know this but you can actually create multiple constants inside the same guard
statement.
So all you have to do is just create a comma and type let.
And now we can create a second one.
So we're going to call this one cell and we're going to set it to be equal to collection view cell for
item an index path.
And you know what.
Ha Ha Ha we already have one so let's give it let's give it the index path.
We just create it.
Very cool.
Now of course at the end of a guard statement we need to call.
Else.
And if we do not do this successfully if it fails we still need to return a view control.
But it is optional so we have the option to return nil meaning there is no view controller to pop through
to so we can just say return nil.
We could also just return a blank controller but it would just pop up a blank view controller and that's
ugly.
So if we return nil it basically just is like telling it to cancel.
So that's what we're going to do is return nil instead.
So now we have an index path and we have a sell at that specific index path.
And now we can actually get the important stuff that we need from that sell which is awesome like the
image for instance.
So let's go ahead and let's set up an instance of pop Visi because remember that's the one that will
be popping on at the end and this previewing context controller for location.
This is for the final presentation like the app currently when you tap on a cell just touch it.
It presents the view controller.
This is what we'll show when we push all the way through.
So we're going to set up another guard to Houghs pop visi.
So go ahead and type guard let pop Fisi and it's going to be equal to storyboard instantiates storyboard
with identifier.
The identifier of course being poppyseed we're going to cast it as pop visi.
And then of course if that doesn't work we can say else whoops else.
And you know what we're going to return nil as well.
OK.
Because if this doesn't work we're going to return nil to the view controller.
That's what it needs or not what it needs.
But what it can accept if this were different if this was an exclamation mark or nothing we would need
to return something.
But for this we can actually return nil since it's since it's optional.
So cool assuming that pop VC works and we get a pop b c we should initialize it with that photo data
from the cell.
So let's go ahead and type pop Visi in that data.
And you know what the cell pulls its image from the index path.
So I think we should do the same thing from the image array.
Go ahead and call.
Image array.
Then get the index path and pull out the row because that will tell us the exact spot that we're touching
from the index path.
And it will pass at the proper image.
Otherwise we'd end up with a random image that we didn't select.
You don't want that does not look good.
So now that we have properly initialized part B C with the proper amount of data there's one thing we
need for this and it is the previewing context.
OK.
Now we're basically going to set up the size that is previewed when we push on the View Controller.
So let's let me just show you what this is like.
We're going to type preview in-context source rect meaning the size of the rectangle of the photo like
if it was a square photo the rectangle would be circle.
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
it would be like a smaller version of the size of the screen.
So the source racks we're just going to set to be equal to sell content view frame because the content
you could change in the cell itself is square but the content view might be a different size.
So we want to show what the actual image looks like so you can see the full thing and then we'll show
the zoomed in version.
So this source recked if you look here it says the rectangle in the source views coordinate system that
responds to a forceful touch by a user and remains visually sharp while surrounding content blurs Blur's
if you've ever used 3-D touch you know what this is like.
This is the rectangle that will zoom up and then everything else behind it gets blurry until we push
it through to show the full view controller.
OK.
Then of course at the very end assuming that all of this is hunky dory and it's good to go we just return
poppyseed OK because we've now set it up properly and we've given a preview in-context for 3D touch.
Now the cool thing this is all set up.
The only thing we need to do for this is to tell it which View Controller it's supposed to commit.
Check this out.
All we need to type is show and we're going to pass it the view controller to commit because we've already
set this up we've told it the preview in context the view controller to commit is the controller to
commit.
I know that doesn't make sense but it's getting this from this function.
We've set up pop B C and then when this function is called when this delegate method is called Pop VC
is the function or saara is the view controller that is passed through here and the sender is self.
It's coming from this view controller.
So show is going to present a view controller in a primary context.
OK.
Now that is what we are using and that is what will give us 3D touch capabilities I'm not joking it's
that simple.
Do you guys want to check it out.
OK.
Let's go build and run.
Let's go see how we did.
There are of course other ways that you can modify 3D touch like if you've ever used 3-D touch in like
the Facebook app or in another app.
You'll see there's like a little up carrot at the top and you can swipe up to get different options
on like an action sheet.
You can integrate that we're not going to integrate that for the intents and purposes of this course.
But I really recommend that you dive into the to the documentation because it's really interesting.
So let's go ahead let's drop a pin.
Let's let it load some photos and let's try out 3-D touch.
A side note is if you don't have one of the new MacBook Pros with the touch bar like I do.
You're not going to be able to test 3D touch on your computer.
The new trackpad on the new Mac books allow you to test out 3D touch.
So you're either going to have to have a device with 3D touch or one of the new Mac books.
And if you don't then maybe you might choose that this feature is not good for you to integrate in the
app for yourself but you might want to include it just because it might be fun for another user.
Of course you can simulate 3D touch in here and I don't remember where you touch pressure and if you
don't have 3-D touch you can turn off use trackpad force or actually you know what.
It's not even going to let me since I can but you can do a shallow press or a deep press that way which
is kind of cool.
So I'm going to use my trackpad here I'm going to gently press down on a photo.
Let's let's try this one.
If I press Oh OK so that's not good.
It's not letting me do it.
Let's try it again.
Let's try pressing.
Maybe I turned off my use trackpad force huh.
Interesting.
OK so it looks like it's not working.
Let me think about what we have done here that I may have missed.
We're setting it up to preview.
Oh you know what guys sorry.
There is one thing we need to do.
There's a function that you have to call and we've basically set it up to do everything that it needs
to.
But we have not yet told it where it is getting this source wrecked.
Where is it taking that rectangle from.
We need to register our collection to you first.
So let's go ahead and up in view did load.
Let's find that you did load.
We're going to call register register for previewing with you view controller previewing delegate which
since we've conformed we can call self and the source for you is going to be the collection view.
Oh that is so much better so the source view like you saw down here the source recked those go hand-in-hand.
We didn't tell it what the source view was so it can't get the source recked let's build and run it
one more time and let's double check to make sure that that's going to work.
Looks like we're getting an error here.
Oh of course I did not unwrap the collection view.
That's the problem.
Remember it is optional.
So we need to unwrap it and let's go ahead and try this one more time we're gonna have to download photos
again.
Sorry about that folks.
Here we go.
Sweet OK.
So once that's done we should be able to test 3D touch.
Let's give it a shot.
All right.
Looks like it's almost done.
And here we go.
Let's give it a try.
I'm going to push gently little do you see that that was it.
Let's see if I can do it slowly.
By turning off my trackpad force here.
I don't know if I can now it's not going to let me.
OK so I'll have to try my best to be very gentle.
Let's press very lightly.
This is simulating the peak little
oh you know what I think I messed it up by turning off my trackpad for us here.
Funny.
Oh there it is.
OK sorry.
No I didn't.
So if you push gently you can see the preview and then you can double tap to release it.
Push and pop peek that image and pop.
There we go.
It's hard to do on the trackpad.
Let's see a little bit and if I let go goes back down.
Very cool.
There we go.
And if I push all the way through it opens up.
So guys we just integrate it 3D touch into our app.
It's that easy.
Make sure that you register for previewing you have to tell it where it should be looking at.
That was my big oops in this video.
But it's good that you saw me have to process through that and remember that that is important to do
because we have everything set up beautifully here.
But if we're not telling it where it's supposed to get this source recked then it doesn't know how to
pop and where it should pop to.
Awesome awesome job guys and congratulations on finishing another section of this course in the next
video.
I'm going to give you a challenge to extend this app to make it a little bit better.
A little bit more complex and overall just a better app.
Awesome job.
And we'll see in the next video.