UIView inside a Scrollview zooming issue

Question

I have a photo displaying iOS application in which the user should be able to view and zoom the image. As per the requirement the image should be displayed in entire scree(no transparent portion should be displayed and the image should fill the entire screen) and hence myself used AspectFill mode for UIImageView. In order to implement zooming functionality, used a UIScrollView and implemented viewForZoomingInScrollView delegate method of UIScrollView. The image view is connected to four edges of scroll view in StoryBoard and two constraints (imageHeight and imageWidth) are connected to IBOutlet. These constraints will be updated in ViewControllers viewDidLayoutSubviews method.

I have added the code below for your reference.

- (void)setImageViewModes {
     self.scrollView.minimumZoomScale = CALCULATD_ZOOM_SCALE;
     self.pageImageView.contentMode = UIViewContentModeScaleAspectFill;
}

pragma mark - UIScrollView Delegate

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

    return MY_IMAGE_VIEW;
}

- (void)updateImageViewConstraints {

    self.imageHeight.constant = CGRectGetHeight(self.scrollView.frame);
    self.imageWidth.constant = CGRectGetWidth(self.scrollView.frame);
    [self.view layoutIfNeeded];
}

However when I try to zoom out the image, it is rebounding to its initial state and outer portion of the image is clipped(It display only the initial filled portion of image). Is there is any workaround available to see the entire image on zoom out ?

I tried by setting minimum zoom scale for UIScrollView(I have a method in my code to calculate the minimum zoom scale of image) and the zoom functionality works. However when we zoom out, the UIIMage is always moves to top left corner of scrollview(Attached the screen shot for your reference).

I found a solution for this issue by Center content of UIScrollView when smaller (third answer) by subclassing UIScrollView and adjust image view frame in ‘layoutSubviews’ method of scroll view. This works fine while zoom out. But when we zoom and scroll the image to see the edge/side portion, scrollview readjust the image view to centre and I am unable to see the side portion of image in zoom in state. Any workaround for this issue ?

Answer 1

Use This

-(void)scrollViewDidZoom:(UIScrollView *)scrollView1{
[self centerScrollViewContent];

}

- (void)centerScrollViewContent {
CGSize boundsSize = self.scrollView.bounds.size;
CGRect contentsFrame = self.drawingView.frame;

if (contentsFrame.size.width < boundsSize.width) {
    contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
} else {
    contentsFrame.origin.x = 0.0f;
}

if (contentsFrame.size.height < boundsSize.height) {
    contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
} else {
    contentsFrame.origin.y = 0.0f;
}
self.drawingView.frame = contentsFrame;

}

Answer 2

Swift 3 version of Rahul's code

func scrollViewDidZoom(_ scrollView: UIScrollView) {
    centerContentView()
}

func centerContentView() {
    let boundsSize = scrollView.bounds.size
    var contentFrame = contentView.frame

    if contentFrame.size.width < boundsSize.width {
        contentFrame.origin.x = (boundsSize.width - contentFrame.size.width) / 2.0
    } else {
        contentFrame.origin.x = 0.0
    }
    if contentFrame.size.height < boundsSize.height {
        contentFrame.origin.y = (boundsSize.height - contentFrame.size.height) / 2.0
    } else {
        contentFrame.origin.y = 0.0
    }

    contentView.frame = contentFrame
}