UIImageView inside UIScrollView Pans Too Far

Question

I have a problem where I have a UIImageView inside a UIScrollView. In Interface Builder, the UIScrollView takes up the entire screen, and the UIImageView takes up the entire UIScrollView. The problem is that when I have an image that is landscape oriented I have it set to aspect fit, so I have gray bars at the top and bottom (which is what I want). However when I zoom into the photo, once the photo zooms large enough to fit the screen vertical I want it to not pan into the gray zone that was above it. See the screen shots I have attached. I basically want it to work like the Photos app in that respect. Here is my code for setting up the UIScrollView and UIImageView:

- (void)viewDidLoad
{
   [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
   self.imageView.image = [UIImage imageNamed:@"IMG_0300.JPG"];
   self.imageView.contentMode = UIViewContentModeScaleAspectFit;
   self.scrollView.clipsToBounds = YES;
   self.scrollView.contentSize = self.imageView.bounds.size;
   self.scrollView.zoomScale = 1.0;
   self.scrollView.maximumZoomScale = 5.0;
   self.scrollView.minimumZoomScale = 1.0;

}

-(void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
   return self.imageView; 
}

Thanks in advance.

Jacob

Answer 1

It is your whole UIImageView zoomed, not only its image, but also the gray bars. Your scrollView is just honestly reflecting this. The result you want probably can be done like this:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIImage *image = [UIImage imageNamed:@"IMG_0300.JPG"];
    CGFloat ratio = CGRectGetWidth(self.scrollView.bounds) / image.size.width;
    self.imageView.bounds = CGRectMake(0, 0, CGRectGetWidth(self.scrollView.bounds), image.size.height * ratio);
    self.imageView.center = CGPointMake(CGRectGetMidX(self.scrollView.bounds), CGRectGetMidY(self.scrollView.bounds));
    self.imageView.image = image;
    self.scrollView.clipsToBounds = YES;
    self.scrollView.contentSize = self.imageView.bounds.size;
    self.scrollView.zoomScale = 1.0;
    self.scrollView.maximumZoomScale = 10.0;
    self.scrollView.minimumZoomScale = 1.0;

}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    UIView *subView = self.imageView;
    CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
    (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;

    CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
    (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;

    subView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                 scrollView.contentSize.height * 0.5 + offsetY);
}

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

Answer 2

Rather than "have gray bars at the top and bottom", set the background color of the UIScrollView to gray.

Also, don't use view dimensions in viewDidLoad as the subviews are not yet laid out. Move it to didLayoutSubviews or viewWillAppear. Also, set the UIScrollView contentSize based on your maximum zoom. For example:

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];

    self.scrollView.backgroundColor = [UIColor lightGrayColor];  // or other color
    CGFloat maxScale = 5.0;
    self.scrollView.zoomScale = 1.0;
    self.scrollView.maximumZoomScale = maxScale;
    self.scrollView.minimumZoomScale = 1.0;
    CGSize contentSize = CGSizeMake(self.scrollView.bounds.size.width * maxScale, self.scrollView.bounds.size.height * maxScale); 
    self.scrollView.contentSize = contentSize;

    //  ...
}

Answer 3

Try this:

UIView *subView = self.imageView;
    CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
    (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;

    CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
    (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;

    subView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                 scrollView.contentSize.height * 0.5 + offsetY);