Is it possible to have a UIImageView inside of a UIScrollView zoom in and out, but stick to center with Auto Layout?

Question

Long story short, I\'m trying to build functionality similar to Photos.app.

I have a UIScrollView with a UIImageView inside of it set up in the Storyboard. Zooming works

Answer 1

To center the contents, you can take reference from this code snippet:

// To re-center the image after zooming in and zooming out
- (void)centerScrollViewContents
{
 CGSize boundsSize = self.bounds.size;
 CGRect contentsFrame = self.imageView.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.imageView.frame = contentsFrame;
}

//for zooming in and zooming out
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
 {
  if (self.zoomScale > 1.0f)
  {
    [self centerScrollViewContents];
  }
   else
  {
  self.bouncesZoom    =   NO;

    // for zooming out by pinching
  [self centerScrollViewContents];
  }

 }

In this way, you can reposition the coordinates of an image after zooming in and zooming out without AutoLayout. Please let me know if it helps. Thanks :)

Answer 2

When using Autolayout the calls to setFrames are not taking effects, thats why the imageView is not centered in your scrollView.

That being said, in order to achieve the center effect you can choose between:

1. The easiest way is to set translatesAutoresizingMaskIntoConstraints to YES for your imageView in ViewDidLoad, that will translate the calls to setFrame: to new constraints based on your imageView autoresizingMask. But you should make sure that the new constraints are satisfied with the ones that you set in your storyboard (in your case none).

2. In your scrollViewDidZoom: method add directly the constraints to center your imageView

-

 [self.imageView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView
       attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual
       toItem:self.scrollView attribute:NSLayoutAttributeCenterX multiplier:1.0
       constant:0]];

 [self.imageView addConstraint:[NSLayoutConstraint constraintWithItem:self.imageView
       attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual
       toItem:self.scrollView attribute:NSLayoutAttributeCenterX multiplier:1.0 
       constant:0]];