In the last video, we managed to get the photo to fit on the screen.

Again let's take a quick second to understand what we did.

When we tapped on the photo zoom controller at the start of the last video,

it started off zoomed in and took up the entire scrollable space, this is expected.

iPhone cameras are pretty good and

what we're seeing there is the actual size of the image at 100% zoom.

Since we set the content size of the scrollView to the bound size of this

image, what we saw on the screen was a portion of the scrollable area.

To make this image fit,

we need it to scale it down from the 100% zoom to something that fit on the screen.

And this is where our calculation came in.

We determined how much larger than the screen the image was, and

again we did this for both height and width.

If the image width was three times bigger than the screen width,

we divided one by that amount to get a scale factor, 0.33 in this case.

Now not all images we take in our app are the same dimensions,

some are in landscape and others are in portrait.

And even the preloaded images in the image library of those,

they're different height and width.

So to make all these images fit on the screen, we need to figure out which

was the minimum ratio between the two, is the height smaller, or the width ratio?

Once we've determined that, we set the current zoomScale of the scrollView so

that the scrollView zooms out and fits the entire scrollable area onto the screen.

In doing so, we managed the show the entire photo, which is great.

We also set the minimumZoomScale of the scrollView to the same value because we're

trying to implement pinch to zoom in, not zoom out.

We don't want to make the image any smaller.

So after doing all that,

we ended up with an image that did fit, both pin to the top of the screen.

Now this is a constraint related issue.

When we set up the constraints initially,

we just pinned it to the edges of the scrollView.

The image sits inside the scrollView at the origin in the top left, and

when we zoom out of the image to make it fit,

there's all this empty scrollView space at the bottom.

So let's fix this by writing a new function.

We'll say func updateConstraintsForSize,

and this method will take a single argument size of type CGSize.

Much like we updated the minimumZoomScale, we're going to update the constraints we

added earlier to account for this new size.

To do that, we need a reference of the constraints, let's go ahead and

grab those.

So we'll go main.storyboard, to the photoZoomController,

we'll open up the assistant editor, and of course is in load, so

we'll grab the photoZoomController, and option Enter to get there, there we go.

Now I'm going to do this in the document outline cuz the constraints are listed

right here, and actually we want these ones, there we go.

So we'll start with the image views leading constraints,

that’s this one right here, we'll control drag and it'll say

imageViewLeadingConstraint, okay.

Next we'll get the image views trailing constraint,

imageViewTrailingConstraint.

And then and the next is the top and the bottom.

ImageViewTopConstraint, and

image, imageViewBottomConstraint.

You'll notice that the center x and center y are also there,

but we're gonna ignore those because remember that gets removed at build time.

And now we have all our constraints.

What we want to do now is center the image vertically and

horizontally, and this requires doing a bit of math.

Let's start with the vertical spacing at the top.

First, we want to find out, after the image has been resized,

how much empty space is there?

And we can do this by deducting the photo size from the size of the view.

So let verticalSpace = size,

which is the argument we're passing in, .height-

photoImageView.frame.height.

To center the image vertically, we need to take this distance divided by 2,

and then set the photo to be offset from either end by this distance.

So we'll say let yOffset = verticalSpace/2.

In the event that the height of the image is the same as the height of the view

this value is 0, or let's say we have some weird edge case where the image is

actually larger than the height because I didn't double check all my code and

the math may be wrong, we might end up with a negative value.

So over here, let's use the max function to return a positive value or 0.

So instead of saying vertical space divided by 2,

we'll say the y offset is the maximum of 0 or

the vertical space divided by 2, which ever one is larger, okay.

Now that we have our y offset, we can set the constant values on the top and

the bottom constraints to these values.

So imageViewTopConstraint.constant = yOffset, and

imageViewBottomConstraint.constant = yOffset.

Let's see if this works.

So we'll call this method inside viewDidLoad at the end,

so we'll say updateConstraintsForSize.

And for the argument, we'll pass in the size of the view's bounds rectangle, so

view.bounds.size.

Okay, let's run this.

If we tap on an image now, so we have the photoViewerController, tap on this and

now there we go, it loads the image inside the scroll view perfectly centered.

Let's account for the horizontal offsets as well for

completeness just in case we have some weird image that's super narrow.

So let xOffset, and here I'm going to do it all

in one line cuz you know what I'm doing now, is the max(0,

or the size, let's put these in parenthesis,

(size.width- photoImageView.frame.width)/2).

And then once we have that, we'll say imageViewLeadingConstraint.constant

= xOffset, imageViewTrailingConstraint, if I can type

imageViewTrailingConstraint.constant = xOffset, there we go.

So run the app now and all the images should be zoomed in or zoomed out and

centered just like we want.

Now you can also zoom into the photo, let me show you that real quick, say Play.

We can also zoom into the photo because that's the behavior

the scrollView handles for us for free without any work.

So tap on an image, tap it again to go to the scrollView, and

then hold down the Alt or the Option key on your keyboard and

you'll notice that this changes your mouse into essentially a two figure tap.

If you now press somewhere down here, like when they're close together,

simulate your fingers being close together and then drag it apart,

there you go, you can zoom out, and then you can pan around the photo, perfect.

Now the reason we can do this is because we did not set a maximum zoom scale.

You'll notice that when we do this, there's some empty space above the photo.

And if we zoom in far enough over here, so

let's see, it looks like there's no photo actually on the screen.

There's no pictures, there's just a lot of empty space.

So in the next video, let's clean this up, make a few more small changes,

and finish up our app.