Is it possible to have a UIImageView inside of a U

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, but I'm having trouble keeping it centered. In all my frame based scroll view implementations I've centered it as follows, which works beautifully:

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    CGRect newImageViewFrame = self.imageView.frame;

    // Center horizontally
    if (newImageViewFrame.size.width < CGRectGetWidth(scrollView.bounds)) {
        newImageViewFrame.origin.x = (CGRectGetWidth(scrollView.bounds) - CGRectGetWidth(self.imageView.frame)) / 2;
    }
    else {
        newImageViewFrame.origin.x = 0;
    }

    // Center vertically
    if (newImageViewFrame.size.height < CGRectGetHeight(scrollView.bounds)) {
        newImageViewFrame.origin.y = (CGRectGetHeight(scrollView.bounds) - CGRectGetHeight(self.imageView.frame)) / 2;
    }
    else {
        newImageViewFrame.origin.y = 0;
    }

    self.imageView.frame = newImageViewFrame;
}

But with Auto Layout it isn't at all.

I have no constraints on the UIScrollView or UIImageView, as I don't know what they should be. I'm thinking I should glue the UIScrollView to the four corners, but for the UIImageView I'm not completely sure, as the zooming changes its frame.

Here's an example project: http://cl.ly/21371H3q381N

How would I go about having zooming with centering work with Auto Layout?

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]];