Let's recap what we learned in the last video.

A scrollable view defines a content size which is the size of the scrollable area.

We can add sub views to the scrollable view and place them anywhere within.

Their positions within the scrollable area are defined by their frame.

That is the layout and

size rectangle that is defined relative to this super views coordinate system.

The area of the scrollView that is displayed

on the screen is defined by the balance rectangle of the scrollView.

By modifying the balance origin,

we can give the user the impression that they're scrolling around a mainView.

As you might have guessed, there's a decent bit of math involved in

doing all this, and redrawing the right views on screen.

But thankfully, we don't have to worry about any of that.

When you scroll a scrollView, it modifies a property known as content offset.

Content offset is a point at which the origin of the contentView,

that is the bounds rectangle, is offset from the origin of the scrollView.

Using this value, the scrollView can compute its new bounds and

redraw any of its subviews.

So now that we have an idea of the basics of scrollViews,

let's step away from theory and get back to our app.

So from the project navigator, let's add a new file to our project.

So this is going to be a ViewController.

Named PhotoZoomController.

Now I'm just adding an empty Swift file.

You can add the co-attach subclass, same thing.

So at the top, I'll import UIKit.

And then this a class named PhotoZoomController,

which is a subclass of the UIViewController.

So empty viewDidLoad method and should be good to go.

Okay, for this video,

let's just focus on displaying a photo inside this ViewController.

Now this is not going to be as straightforward as dropping in an image

view because we want to zoom in on this image.

So instead we're going to drop in a scrollView from the object library.

Now let's go over Main.storyboard.

We need a scene so that we can modify all this and design our layout.

We'll bring out a new View Controller.

We'll drop that in.

We already have that sub class so let's go ahead and assign it.

In the identity inspector,

change the backing custom class to PhotoZoomController.

Okay, next let's look for a Scroll View from the object library and drop that in.

The Scroll View is going to take up the entire view, so

let's add in four constraints all the way to the edges.

So from the pin menu, we'll just select 0 on all four and

we want to constrain it all the way to the edges, so add four constraints.

And then, remember just like last time you can see here that it's pinning to the safe

area at the top.

And that's okay for the top and bottom, but on the sides,

we want to assign or align the trailing areas.

Let's double-click, to the Superviews Trailing, rather than the Scroll View,

or rather than the safe area.

So let's click that again, Size Inspector.

So the trailing is pinned to the Superview.

Let's do the same for the leading, double-click and

this needs to be Superview.

Okay, the reason we're allowing the Scroll View to take up the entire screen area

is so that we can zoom into a picture and

let it take up more than its original size on the screen.

Since we want to display an image next, we need to add an Image View.

We're going to add this as a subview of the Scroll View, so drop it right in here.

And then in your document outline,

it should be listed as a subview of the Scroll View.

Now like with the Scroll View, we're going to let the Image View

take up the entire space provided by the Superview.

We're doing this so that when we zoom, the Image View can take up the entire

scrollable content area as defined by the Scroll View.

But we're only going to show a zoomed in section by

manipulating that content offset.

If we add the same constraints as we did to the Scroll View,

that is constrained to the edges with on spacing.

Let's go ahead and do that.

So from the pin menu, we'll just do 0 for all four.

And since it's a sub view of the Scroll View,

we don't have to worry about the safe areas this time.

It should just go ahead and pin this directly to the Superview.

Now when we do that you'll see that it is not enough information for

interface builder which still complains and makes everything red.

If you click in the document outline on the error symbol and

look at the issues, you'll see that it is missing constraints for the X position and

the Y position of the Scroll View.

Now, this is kind of misleading.

The problem here is that Image View is depending

on the size of the Scroll View to define a height and width.

But at the same time, the Scroll View is depending on the Image View for

its dimensions.

Remember, we can define any sort of size for the content size of the Scroll View.

And that's how the Scroll View determines how large it is,

and therefore how we can scroll around it.

But these two are now relying on each other for

those dimensions, so there's a lot of ambiguity.

The layout engine cannot resolve this properly.

Now, fixing this is not difficult.

If we added a center vertically and horizontally constrained

to the Image View, that should be enough information that provides the layout

engine with enough information to resolve positioning and size a run time.

But unfortunately this gets in our way.

So while layout is resolved here, an interface builder satisfied,

center accent, center wide constraints actually prevent us from building

the functionality we want.

Remember that if we're pinning the center of the Image View to the center of

the screen, we can't move it from side to side since the center's always pinned.

Don't worry though, there's another solution here.

So let's go ahead, so now that you've added the center x and

center y constraints and Interface Builder's happy.

The next thing we're going to do is navigate to the Size Inspector

of the Image View and look for the constraints we just added.

So you should see the constraints here, Align Center X and Align Center Y.

Double-click on Align Center X and

we'll go and select this box that says this is a place holder constraint.

This tells Interface Builder to go ahead and

remove the constraints when we build and run this code.

Now, this seems silly to do, but it allows the layout engine to figure out a base

layout, and then we can modify that base layout at run time.

So do that and then select the Image View in GoMac, and do this for

the center Y constraint as well.

Now, none of this would be an issue if we defined the layout in code.

But now you can see if you work with Interface Builder,

the problem is you need to satisfy a set of constraints.

You need to let Interface Builder be happy with your constraints at build time.

You can't rely on the constraints being correct at run time

only because we won't be able to build and run this app if we have these errors.

Well, we could, but everything would break.

By removing the constraints at build time,

we now need to make sure that we define the size of the Image View in code, so

that the layout engine can size and position all our views accordingly.

So what we'll do, first steps first,

we'll setup up some outlets to these views so that we can use them in code.

Now, before you do that, I forgot, we need to set the content mode of the Image View.

So that's in the Attributes inspector.

We need to send it to Aspect Fit.

This way the Image View maintains the aspect ratio of the picture and

it fits it to the screen width.

This is how the Photos App does it as well so we'll just mimic the behavior, okay.

Once you do that, switch over to the Assistant Editor.

You'll want the document outline up, because we want outlets for

both the Image View and the Scroll View.

And it's hard to get to the underlying Scroll View from here, obviously,

because it's under the Image View.

Now set this to Automatic, that doesn't work, so I'm gonna do Cmd + Shift + O.

This is the PhotoZoomController and then holding down the Option key press Enter.

All right let's add this Outlets.

So the first one I want is the Scroll View.

I'll just name this scrollView, Xcode 9 error.

Just make sure you build this.

Okay there we go, now Ctrl+drag, we'll call this scrollView.

And then we'll call this one the Image View, we'll call it photoImageView.

We'll also need a stored property in here to maintain a reference to the photo

instance.

Say var photo of type Photo.

As always, the reason here for the explicitly unwrapped optional is so

that we can initialize the class from a storyboard identifier

without assigning any initial values.

In viewDidLoad we can assign the photo to the Image Viewer and get it from there.

So let's see what this looks like.

We want to launch the Photo Zoom Controller

when we tap on the photo inside of the Page View Controller.

The Page View Controller encapsulates instances of the Photo View Controller.

So what we'll do is add a Tap Gesture Recognizer

to the Image View over here in the Photo Viewer Controller scene.

So from the object library, look for Tap Gesture Recognizer.

And drag and drop to the Image View.

Actually, this is easier on the document outline.

So pull up the Photo Viewer Controller scene.

Look for that Image View, and then add,

we'll just drop it here, add a Tap Gesture Recognizer.

Now still, with the document outline open,

you should have seen it added to the bottom right here.

We'll again switch over to the Assistant Editor, and

I'm going to switch over to the PhotoViewerController.

Oops I needed to press, so again Cmd+Shift +O,

PhotoViewerController, holding Option, hit Enter, there we go.

And now let's Ctrl+drag from the Tap Gesture Recognizer to create an action,

you know what I'm going to build this first so

I don't run into any errors again.

And I'll Ctrl+drag, and we'll say launch.

This is an action.

LaunchPhotoZoomController, and hit Connect, okay?

Because we're not defining a storyboard segue, we need to give this new

PhotoZoomController a storyboard identifier from the Identity Inspector so

that we can reference it and we can instantiate it in code.

We'll set this property to PhotoZoomController.

In the IBAction, we just defined, so

right here, let me get out Assistant Editor mode so you can see better.

PhotoViewerController, so

in here, we'll start by grabbing a reference to the storyboard.

So guard let storyboard = storyboard else return.

And then, using the storyboard, we'll just tack on a few more checks.

We'll instantiate the PhotoZoomController.

So we'll say, let zoomController = storyboard.instantiateViewController.

But you know what, we don't need that there.

Let's go ahead and just do it right below.

So we say, let zoomController =

storyboard.instantiateViewController(with- Identifier:.

Now we can either use the string or we can do something

like String(describing: PhotoZoomController.self)) and

that should give us the string we typed name.

We'll go ahead and use an explicitly unwrapped optional here to cast or

rather we'll force cast it to the right type.

If you don't wanna do that, you can add it on to the guard check here.

No big deal.

And then we'll assign the photo,

zoomController.photo = photo, that should be good.

Let's push the controller onto the navigation stack, so it appears modally.

NatigationController.present(zoomControl- ler,

animated: true, completion: nil).

We'll need to make one tiny change here, if you run the app now.

Well we'll need to make more than one tiny change here, but if you run the app now.

And tap on the photo view, nothing will happen.

And that's because by default, user interaction is disabled on certain views.

So if you click on this Image View in the PhotoViewerController,

go to the Attributes inspector,

you need to check the user interaction enabled box, okay.

One more change, one more small change, we'll go back to the PhotoZoomController.

And here inside viewDidLoad,

we'll say photoImageView.image = photo.image.

Okay, and let's give this a try, run the app

So here we have some photos, we'll click on one.

Now this launches the PageController, remember,

where we can thumb through photos.

And now if we tap on this photo, it should launch the PhotoZoomController.

And it seems like we have an exception, okay.

What is this about?

Does not contain a ViewController with identifier.

Let's see if this was because we tried that trick.

Got ahead of myself.

Let's see, so we were in the PhotoViewerController.

Let's see if the issue here is that we used this.

Instead, we're just going to use the name, PhotoZoomController.

I might have made a typo in main.storyboard.

So let's go there and check, as well.

And you might have even noticed it while I was doing it.

We forgot to set the storyboard ID, interesting.

Did I do that elsewhere?

No, okay.

So we'll paste it in, hit Enter.

So you can use that string describing

pattern if you want to rather than just stringly typing the name.

Okay, so now we have a photo.

We'll click it, or tap it, we'll tap in the middle and there we go.

This launches the photo that we want.

You'll see, however, that it fills up the entire view and

does not look at all like how the built-in Photos app launches a photo.

Well this has to do with Scroll Views.

But let's take a break here.

In the next video we'll explore how we can fix this issue.