Hey everybody this is Caleb with Deb soapstar common in this video we're going to build our view controller
that's going to display the images that we select from our collection view.
We're also going to set it up so that when you tap on a cell it actually presents that view controller
will pass some data we'll do all that kind of stuff.
It will be really really cool.
So let's go ahead and pull open our tax code project.
There we go.
And as it currently stands we have one view controller Matt B.C.E..
Now before we do anything else we need to first create a view control or file.
So go ahead and right click on your controller folder click new file and select cocoa touch class.
Now of course this is going to be of type you view controller.
And I'm going to call this pop Visi because later we're going to use 3D Pekan pop to display the View
Controller.
So I'm just going to name pop Visi because we're popping The View Controller up yeah.
So click Next go ahead and add it to your project.
And here we go.
So let's get rid of this boilerplate nonsense that we don't need.
And now let's go ahead and head into the storyboard and let's create the actual interface builder element
for The View Controller.
Awesome.
So there is Matt Visi and we're going to just drag in a new View Controller like so before we do anything
we need to make sure we set the identity to be pop.
DC-X otherwise it's not going to do anything for us.
And while we're here we're actually going to go ahead and set the storyboard ideas well to be pop Visi
because we're going to use the storyboard later to instantiate our view controller.
OK.
So that is done.
And now let's go ahead and add what we need.
This view controller is going to be super simple it's basically going to be a giant UI image of you
and we're going to put a little label down at the bottom just to give the user a clue that they should
double tap to dismiss it.
We're going to add that functionality later as well.
So first let's go ahead and add on that image of you so search for image view.
Drag it on and we're going to make it the entire size of the screen.
Very easy.
Now we're going to pin this to all four corners zero so that it stays put.
And of course we need to set the content mode so that if an image is filling this it does not look stretched
or distorted.
So select content mode and choose aspect fill that way the image will fill up the screen but stay in
aspect mode.
Now some of the photos might get clipped a little bit but that's fine as long as they're not looking
stretched and ugly.
So very cool.
We have an image view there.
All right.
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
going to make it pretty small.
Let's go ahead and just shrink it down to about that size should be good.
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
to give it a fixed width and height.
Let's make it nice even numbers here let's make it 100 wide by 25 high.
And now I'm going to go ahead and pendant horizontally in the container so that it stays perfectly centered.
And about this high next we're going to go ahead and add a label on the I could spell it right there
we go.
So drag it on and we're going to type double tap to dismiss.
Now I'm seeing that I need to make this a little wider Let's try 200.
And then our label we're going to need to stretch to fit the constraints of this.
That looks good.
Let's go to the attributes inspector and let's center our label and of course we want to change the
font because you know how I feel about the system font.
Change it to Avenir next or another nice font.
And you know what just for fun let's make Demi bold looks pretty good.
Now let's go ahead and let's center this horizontally and vertically in the container which is the little
view that it's in.
Add those constraints and you know what our view controller is done.
That was super easy.
We don't need to have a cancel button or anything because we're going to set up a double tap gesture
to dismiss the view controller.
So very simple.
Now let's go ahead and set up the Iby outlet that's going to control the image view by going to the
assistant editor.
We are going to select pop the scene you'll see it opens up nicely right there.
Right click and drag from UI image view and drop it on your view controller.
We're just going to call this pop image view.
All right.
And that's really all we need to do as far as interface builder goes so go ahead and close the assistant
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
image in the UI image view.
So let's go ahead and let's think about that now.
I think it would be best for us to create a function that we will call when we initialize this view
controller after we tap on one of the collection cells we can pass an image and then we can present
the view controller after we have initialized it.
So let's write an initializer function now called func in that data.
And we're just going to go ahead and in this data function we're basically going to pass it an image
from our collection of cells so let's do data for Image and I'll create an internal parameter here called
image and it's going to be of type II image.
So now let's just assume that we have instantiated an instance of pop b c we call it data we pass in
an image and we want to basically set a property in this view controller that can hold our image so
that in view the load we can set our image to actually fill the image view that we want.
So I'm going to create a variable called Past image and I'm actually going to put it.
Now I'm going to put it beneath my Iby outlet.
So go ahead and call or not call but right var past image because it's going to be the image that's
passed in and it's going to be of type II image.
Now we're going to put an exclamation mark because we definitely will have a value but we don't yet
have it.
And we're going to set it in our data function so to do that just call self past image equals image.
Now when we call this when we create an instance we'll be able to pass that in image set it to have
a value from the get go.
And then when the view loads we can call pop image view image and we can set its image property to be
passed image.
Very very cool.
OK so now we can pass an image to our pop B.C instance.
Now let's go back to map the sea and let's see what we need to do in order to send an image through
to this view controller.
So go ahead and click on Matt B.C and there's a function we need to call from the collection view delegate.
And it is did select item an index path right there.
This is what is called when one of the cells is tapped and the cool thing is that we can access the
index path.
Now if you remember our cells are set up by pulling out the images at the index path for every single
row of our photos so we can get the specific photo we tap on by calling its index row and pulling it
from our image array.
It's very cool that way.
So first we're going to have to create an instance of pop Visi then after that we're going to have to
call our data function and pass it the image from our image array and then we need to present it and
that all happens when we select an item at a certain index path.
So to create the pop B.C instance let's go ahead and use guard so that we're nice and safe let's call
guard let pop VC equals storyboard instantiate view controller with identifier.
Now do you remember earlier I had you said a storyboard ID that's what goes here and we've used this
before but that's what goes here.
Poppen VC that's the idea that we have set and the cool thing is we can use the storyboard just like
this we can instantiate a view controller from the storyboard with an ID.
Now to get this to work properly to actually have it be a true instance of pop VC we need to cast it
as pop VC.
OK so there's that.
But if this fails else we need to just return we need to leave this function so that we don't cause
a crash.
So assuming it works though we have a nice instance of pop B C and now we can call pop B C in it.
Data for image.
And we can get that specific image by calling image array and pulling out the item at the specific index
path we selected.
So go ahead and type image array and then call index path dot row and that'll send the exact image we
tapped to this instance of the view controller.
And once that data is there we are good to present this view controller so go ahead and call present
and pass in a View Controller to present which is pop you see animated of course because that just looks
nice and when it's done we don't need to do anything specifically.
That's it.
We have now created an instance of poppys C we've passed it a photo and we're now going to present it
when we select it collection view item.
I want to go test this out.
Let's build and run it and let's see how we did
our simulators opening up here.
There we go.
And.
OK.
So to review we should be able to drop a pin.
Our view will animate up the images will load as we select an image it should pop up our view controller
with our image past right.
So let's give it a shot.
Dropping a pin the simulator's a little slow at the animations but it's going to go ahead and download
all the images that we need.
Very cool.
It's taken its time.
It's almost done.
All right cool.
So if I click on an image let's see Hey.
It's kind of weird.
I guess someone likes to take photos in the doctor in a way but look at that the photo we selected gets
passed into this view controller and it's nice and we're using aspect fill so we don't have any issues
with the photo being stretched or anything like that.
So this is awesome.
But you know what it says double tap to dismiss.
And if I double tap nothing happens so we're going to go fix that.
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 a tap gesture recognizer and we need to go ahead and add
it to the view.
So let's go ahead and do that by entering or you know what let's try to function actually that's a little
a little better way to do it.
So let's go ahead and call or write phunk add double tap.
And now let's go ahead and create an instance of you I'd tap gesture recognizer let double tap lips
equals you tap gesture recognizer.
And of course we've done this before you know the target needs to be self.
That's this view controller and the action is going to be a function that we need to write below.
So when we call a selector selector it is looking for a function to pass in here and basically whenever
the double tap is called it calls that function.
So let's go ahead and write that function now and let's just call it screen was double tapped.
OK.
And inside of screen was double tap let's just dismiss the view controller and we don't need to do anything
when it's complete.
So let's just give it nil for the completion.
But the selector here we need to call screen was double tapped.
OK supercool that functions in there that means that when we double tap it's going to call this function
which dismisses our view.
We're getting an error which we've had every single time and that's because we have not yet exposed
this method to Objective-C.
So quick fix.
It adds an O B C and it allows you I tap gesture recognizer to play nicely.
OK.
Easy is that.
So now let's go ahead and let's set up our double tap so that it requires two taps.
We can do that by calling double tap number of taps required and set it to be equal to 2.
Then of course in order to get this to work we need to set the delegate of our double tap to be this
view controller.
So go ahead and type double tap delegate equal self ok and then we're going to go ahead and add this
gesture recognizer to the view.
So go ahead and type view add gesture recognizer and we're going to pass it double tap.
So we have now successfully added it to our view and whenever we double tap it's going to go ahead and
call screen was double tapped which dismisses the view controller.
So we're getting an error here and that's because we have not yet conformed to you I gesture recognize
or delegate but we can do that right at the top.
You gesture recognizer delegate build it and you'll notice that the error goes away.
Very very cool.
So let's go try it now and see if this view controller dismisses.
And if it does then this video will be done and will be moving on to the last video where we're going
to add 3D touch capabilities so that we can peek at the images to see what they are and push a little
bit harder to pop them onto the next few controller.
It's very cool.
So let's go ahead let's double tap here to drop a pin and we'll wait to see if the photos load.
After that we will select it and then we'll try to dismiss the view controller.
All right.
Looks like we're almost there.
All right cool.
So if I click on an image it pops up if I double tap nothing happens.
Interesting.
Oh guys I'm so sorry.
That's because we never called add double tap from our view to load.
Let's do that.
Double tap build and run one more time.
Sorry guys sometimes it's the smallest things that get you caught up.
OK let's try that one more time.
Drop a pin.
There we go.
Sweet.
All right.
Looks good.
And we should get some photos here we should be able to select one and double tap to dismiss it.
Let's just wait to see when this finishes and then we will test that out.
All right.
Looks like we're done.
There we go.
Very cool.
OK so let's choose a photo.
There's that.
And if I double tap awesome it dismisses perfect so you can go check out the photos see what's in there
and.
Oh my.
Who.
Scary.
Anyway you can see what's in there you can double tap and dismiss them.
Oh that's nice.
Nice little barbecue.
Very cool.
And you guys that is working.
That's great our tap gesture dismisses our pop VC is receiving images from our collection view.
Yeah this is awesome.
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
to enable users with 3D touch enabled devices to push on an image to preview it or to peek at it.
They say and then push harder to pop it on to the next controller.
Nicely done with this video and we'll see in the next one.