CODEWITHSUNDEEP
iosuiscrollviewuiimageviewuiscrollviewdelegateios6.0
Jacob Joz
Jacob Joz

Reputation: 732

UIImageView inside UIScrollView Pans Too Far

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

See how it pans too far up

Thanks in advance.

Jacob

Upvotes: 5

Views: 4034

Answers (3)

Rajesh Loganathan
Rajesh Loganathan

Reputation: 11217

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

Upvotes: 0

liuyaodong
liuyaodong

Reputation: 2567

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

Upvotes: 10

bobnoble
bobnoble

Reputation: 5824

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;

    //  ...
}

Upvotes: 0

Related Questions