Hey everybody what's going on this is callup with slopes dot com.
And in this video we're going to go ahead and set up our image presentation Visi which is going to be
the actual part of the split view controller that displays the image.
When we select a particular table view cell.
So let's go ahead and let's pull up on our project where we left it off.
And that was in Detail View Controller.
OK.
Now if we go back to our story board we can see that our master controller is here with our table view.
We already know that works and looks beautiful.
Secondarily we've got our Detail View Controller here and there is a little label here that you know
what we actually don't need.
So select it like I did then press delete and now we need to go back in here and delete this Iby outlet
for that label because we don't actually need it.
And with that in mind as well we're not going to need our configure view function because we're not
actually passing any information to the table anymore.
Go ahead and keep feuded load and get rid of did receive memory warning and this detail item.
OK get rid of all of that blanket out.
And now what we can do is go back to main storyboard.
We can go ahead and actually select a UI image view and then drag on like so.
And you know what I'm going to go ahead and actually make this a square like so and just center there.
But I want this image to extend to the full left and right sides of the screen so I'm going to go ahead
and just constrain it here.
Zero from the left zero from the right.
But then I'm going to go ahead and tick aspect ratio and it will keep it the exact aspect ratio it currently
is which is 1 to 1.
So select that and the only thing we need to do is to align it vertically in the container so select
vertically and container.
Add one constraint and voila we have a square that is the width of the screen and it's going to stay
there right in the center.
Very cool stuff.
And let's go ahead and let's actually set an image in here just for fun to see what it looks like.
And of course like I did it's kind of squished right because it's on scale to fill.
So change it to Aspect fill and that way when we rotate the screen it's going to go ahead and actually
still show aspect.
Phil that's exactly what we want.
So that is now in place.
I'm going to go ahead and actually get rid of that image so that it doesn't show up by default.
We want it to be clear by default until we select something.
But now we need to go ahead and wire up this view controller here with our image view with an IB outlet.
So open the assistant editor and go ahead and right click and drag into your view controller class then
just go ahead and name this.
How about
photo image.
Well that's a that's not a good name photo image.
How about item image view because we're basically selecting an item in our table view and that's presenting
the image.
We can't just use the image view because there is another property that Hardy has that name reserved.
So we'll just call it item image field.
OK.
So now we need to think how are we going to pass an image into this view controller.
What are we going to do to pass it an image and a great way we can do that is by just setting an image
property here that's optional.
Then when we instantiate this view controller elsewhere we can go ahead and actually set the value of
that variable.
And then in our view to load function we can just call image view image and then set it to be that image
property.
So go ahead and type var image of type image OK and make it optional like so then we're going to go
ahead and say item image view image equals image.
OK.
Now this controller is only going to be presentable when we actually select the cell.
And when we select the cell we're going to set up prepare for Segway to pass an image and when it's
presented.
But that'll be in the future video.
And I want to actually rename this to be image presentation visi.
Now we're going to change it in a few places so go ahead and just copy that and paste it up here at
the top just so that it matches.
Change the name here in the document outline and then go into main that storyboard select that view
controller and go to the identity inspector.
Then you can get rid of this and type image presentation VC and press enter to lock it in place.
Now there's another thing we should do.
I don't really like that this says detail up at the top it says Master and detail.
So what I'm going to do is I'm going to select the nav bar here and go to the assistant editor and oh
you know I think it's actually this one here that will actually be in control of that.
Perhaps not.
We have Master OK in the title there we can set.
So we're going to actually call this splits which is the name of our app.
And when we do that it changes properly which is good but then our detailed still says detail and you
know what.
Even if we click on it it still is going to say that if we click on it here it still says it and how
we're going to get rid of this label is we're going to go ahead and select the View Controller and then
you'll notice there is a little item here called detail and that is the navigation bar item.
If you click on that check out which shows up in the assistant editor here it says detail.
If we delete that and push enter.
You'll notice that title goes away and we can set that if we want but I don't see a purpose for it in
this app.
And we're also going to set the back button to simply say back when we push enter.
It's not going to update here where it says master.
But if we go into here into this new controller select the navigation bar we can actually go ahead and
do some work to set this up and I think actually we may have to go all the way back to this one.
The split view controller and then check in here as well because this is connected to the same thing
and this one is called Master as you can see although we wanted to set this to say splits right.
That's the name of our screen and it shows up or it's supposed to show up I guess I did it.
But now we need to set that back button to say back and not master.
So I set it to say back there and check it out down here.
Now it says back so we need to set both.
So they both show back when we select because otherwise it just says the name of this view controller
which is splits and sometimes it might make sense to have it go back to that view controller but it
doesn't always.
So let's think about what we've done here.
We have created a detailed PC here that is for presenting an image.
We've put an image view we've linked it up.
We've created an image variable that is optional that can be set externally.
Then when the view loads the image view is loaded with that image.
OK that's just one way to do it.
And you know what I want to see what this looks like rotated so let's rotate it and perfect that's exactly
how it should look.
Check it out guys.
It takes up the full screen.
And if I actually fill this with an image you'll see it takes up that full screen view like it's supposed
to.
So very cool stuff.
Let's rotate it back and I just noticed we're getting an error here.
If I select this let's see what this error is.
Use of undeclared type detail view controller case that's our old subclass I'm not sure why our app
delegate is still referencing it.
Where's the error.
There it is.
OK OK so yeah this is this is definitely something we need to fix.
Remember in the first few videos we talked about how this is working.
We have our secondary view controller that's a navigation controller and we have our top view controller
which is our detail controller and they are either set or not set depending on if the detail item is
available.
So what we can do is we can go ahead and change detailed view controller into image presentation visi.
But when we build and run this check it out there is no detail item in our image presentation visi.
But what is there in our image presentation B.C an image.
We have an optional image so we can actually use that to determine whether or not the view controller
should be shown.
So go ahead and type on top as detail view controller dot image.
And if that is nil then we'll go ahead and return true meaning we're going to collapse that secondary
controller.
The way we're supposed to.
So now if you build we get a successful build it works.
That is amazing.
Super awesome guys.
So all of our errors are now gone.
We have successfully built our view controller here.
Everything's looking great in the next video what we're going to do is we're going to set it up so that
our table view here when we select a cell it'll load the appropriate image in the image view and our
detailed view controller.
OK then we'll be able to check out some of the split controller stuff and customize it in future video
so amazing work guys.
Let's go ahead and head over to the next video where we're going to go ahead and pass in our images
to our imagery and our detailed view controller.
I'll see you there.