UIScrollView Zooming & contentInset

Question

Simliar to iOS Photos App where the user is zooming in and out of an image by pinching:

UIView > UIScrollView > UIImageView > UIImage

Initially, I had the issue of zooming below scale 1: image being off centered. I got it fixed by doing this:

func scrollViewDidZoom(scrollView: UIScrollView) {
        let offsetX = max((scrollView.bounds.width - scrollView.contentSize.width) * 0.5, 0)
        let offsetY = max((scrollView.bounds.height - scrollView.contentSize.height) * 0.5, 0)
        scrollView.contentInset = UIEdgeInsetsMake(offsetY, offsetX, 0, 0)
}

This works well when zooming out.

UIImage content mode is aspectFit

Issue

When I ZOOM IN, when zoomScale is above 1, scroll view insets need to hug the surroundings of the UIImage that the scroll view contains. This takes away the dead-space that was surrounding the UIImage. IE, Photos app when zooming-in by pinching or double tapping.

Tried

    func scrollViewDidZoom(scrollView: UIScrollView) {
    if scrollView.zoomScale > 1 {
        let imageScale = (self.imageView.bounds.width/self.imageView.image!.size.width)
        let imageWidth = self.imageView.image!.size.width * imageScale
        let imageHeight = self.imageView.image!.size.height * imageScale
        scrollView.contentInset = UIEdgeInsetsMake(((scrollView.frame.height - imageHeight) * 0.5), (scrollView.frame.width - imageWidth) * 0.5 , 0, 0)
        print (scrollView.contentInset.top)
    }
    else {

        let offsetX = max((scrollView.bounds.width - scrollView.contentSize.width) * 0.5, 0)
        let offsetY = max((scrollView.bounds.height - scrollView.contentSize.height) * 0.5, 0)
        scrollView.contentInset = UIEdgeInsetsMake(offsetY, offsetX, 0, 0)
    }
}

Above addition seems to vary the inset amount still.

Update (images added)

First image shows the default layout. Rest shows when zoomed in.....

Springy

So, you want to stop before the dead-space will appear? – Noah

Updated the question with graphical illustrations. – Springy

Only difference in 2nd & 3rd picture is scrollview is only scaled on x-axis in 3rd one. But what difference does it make to image ? Scaling of image is same in 2nd & 3rd pictures. Do you just want it exactly like photos app ? – Dinothere

@Dinothere : 3rd image has trimmed Scroll View Insets. – Springy

Answer 1

Your approach looks correct. You need to update your code as below.

    func scrollViewDidZoom(scrollView: UIScrollView) {
    
    if scrollView.zoomScale > 1 {
        
        if let image = imageView.image {
            
            let ratioW = imageView.frame.width / image.size.width
            let ratioH = imageView.frame.height / image.size.height
            
            let ratio = ratioW < ratioH ? ratioW:ratioH
            
            let newWidth = image.size.width*ratio
            let newHeight = image.size.height*ratio
            
            let left = 0.5 * (newWidth * scrollView.zoomScale > imageView.frame.width ? (newWidth - imageView.frame.width) : (scrollView.frame.width - scrollView.contentSize.width))
            let top = 0.5 * (newHeight * scrollView.zoomScale > imageView.frame.height ? (newHeight - imageView.frame.height) : (scrollView.frame.height - scrollView.contentSize.height))
            
            scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left)
        }
    } else {
        scrollView.contentInset = UIEdgeInsetsZero
    }
}

Swift 5

    func scrollViewDidZoom(scrollView: UIScrollView) {
    
    if scrollView.zoomScale > 1 {

        if let image = imageView.image {

            let ratioW = imageView.frame.width / image.size.width
            let ratioH = imageView.frame.height / image.size.height

            let ratio = ratioW < ratioH ? ratioW:ratioH

            let newWidth = image.size.width*ratio
            let newHeight = image.size.height*ratio

            let left = 0.5 * (newWidth * scrollView.zoomScale > imageView.frame.width ? (newWidth - imageView.frame.width) : (scrollView.frame.width - scrollView.contentSize.width))
            let top = 0.5 * (newHeight * scrollView.zoomScale > imageView.frame.height ? (newHeight - imageView.frame.height) : (scrollView.frame.height - scrollView.contentSize.height))

            scrollView.contentInset = UIEdgeInsets(top: top, left: left, bottom: top, right: left)
        }
    } else {
        scrollView.contentInset = .zero
    }
}

Leathers

Works like a charm. Thank you so much! – Marcellusmarcelo

Answer 2

Swift 5

func scrollViewDidZoom(_ scrollView: UIScrollView) {
    if scrollView.zoomScale > 1 {
        if let image = imageView.image {

            let ratioW = imageView.frame.width / image.size.width
            let ratioH = imageView.frame.height / image.size.height

            let ratio = ratioW < ratioH ? ratioW : ratioH

            let newWidth = image.size.width * ratio
            let newHeight = image.size.height * ratio

            let left = 0.5 * (newWidth * scrollView.zoomScale > imageView.frame.width ? (newWidth - imageView.frame.width) : (scrollView.frame.width - scrollView.contentSize.width))
            let top = 0.5 * (newHeight * scrollView.zoomScale > imageView.frame.height ? (newHeight - imageView.frame.height) : (scrollView.frame.height - scrollView.contentSize.height))

            scrollView.contentInset = UIEdgeInsets(top: top, left: left, bottom: top, right: left)
        }
    } else {
        scrollView.contentInset = UIEdgeInsets.zero
    }
}

Hecatomb

Answer 3

for swift 4

func scrollViewDidZoom(_ scrollView: UIScrollView) {

        if scrollView.zoomScale > 1 {

            if let image = self.imageViewZoom.image {

                let ratioW = self.imageViewZoom.frame.width / image.size.width
                let ratioH = self.imageViewZoom.frame.height / image.size.height

                let ratio = ratioW < ratioH ? ratioW:ratioH

                let newWidth = image.size.width*ratio
                let newHeight = image.size.height*ratio

                let left = 0.5 * (newWidth * scrollView.zoomScale > self.imageViewZoom.frame.width ? (newWidth - self.imageViewZoom.frame.width) : (scrollView.frame.width - scrollView.contentSize.width))
                let top = 0.5 * (newHeight * scrollView.zoomScale > self.imageViewZoom.frame.height ? (newHeight - self.imageViewZoom.frame.height) : (scrollView.frame.height - scrollView.contentSize.height))

                scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left)
            }
        } else {
            scrollView.contentInset = UIEdgeInsets.zero
        }
    }

Hellraiser