Zooming UIImageView in UIScrollView goes out of bounds

Question

I've successfully implemented zooming of UIImageView in my UIScrollView but I have faced with a strange problem that irritates me.

Basically, when I zoom in the image

I can pan the view to actually scroll out of the image border and I'm left with a black area like this:

And as I zoom in more I can make the black border to fill the whole screen! Meanwhile in the iPhone Photo app you can't zoom out the actual image. What's wrong here in my implementation?

It looks like this:

UIImage *imageToDisplay = [UIImage imageWithData:tmpImageData];
imageViewMain.image = imageToDisplay;
imageViewMain.frame = CGRectMake(0, 0, scrollViewMain.frame.size.width, scrollViewMain.frame.size.height);
imageViewMain.contentMode = UIViewContentModeScaleAspectFit;

scrollViewMain.delegate = self;
scrollViewMain.minimumZoomScale = 1.0;
scrollViewMain.maximumZoomScale = 9.0;
scrollViewMain.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
scrollViewMain.contentSize = imageViewMain.frame.size;

[self.view addSubview:scrollViewMain];
[scrollViewMain addSubview:imageViewMain];

And I also implement this method:

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return imageViewMain;
}

Thanks in advance!

EDIT: When I first load the view I shrink my UIImageView to fit the scroll view and the image looks like this:

Answer 1

Just try this code.... change some code where it required... use UIPinchGestureRecognizer for your UIImageView and then add this image in your UIScrollView like bellow..

UIImageView *img = [[UIImageView alloc]init];
img.image = [UIImage imageWithData:tmpImageData];
img.userInteractionEnabled = YES;
img.frame = CGRectMake(210,100, 200, 200);/// define frame which you want...
[img sizeToFit];

UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scale:)];
[pinchRecognizer setDelegate:self];
[img addGestureRecognizer:pinchRecognizer];
[pinchRecognizer release];
[scrollViewMain addSubview:img];
[scrollViewMain bringSubviewToFront:img];
[img release]; 

and just paste this bellow code in your .m file...

#pragma mark GestureRecognizer Methods
-(void)scale:(id)sender 
{
    UIView *imgTempGest = [sender view];
    if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) 
    {
        lastScale = 1.0;
        return;
    }
    CGFloat scale = 1.0 - (lastScale - [(UIPinchGestureRecognizer*)sender scale]);

    CGAffineTransform currentTransform = [(UIPinchGestureRecognizer*)sender view].transform;
    CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);

    [[(UIPinchGestureRecognizer*)sender view] setTransform:newTransform];

    [imgTempGest setTransform:newTransform];

    lastScale = [(UIPinchGestureRecognizer*)sender scale];
}

Here for LastScale just define that variable in .h file like bellow...

CGFloat lastScale;

i hope this helpful to you...

Answer 2

Is the original image contains that border in top and bottom?. You can use the same code over there the output is not wrong if the actual image contains that black top and bottom black area. And add this code also,

scrollView.scrollEnabled = YES

also change,

scrollView.contentSize = imageView.bounds.size;

Also you are providing a zoom scale of 9. That much is needed for you?. Change it to 3 or 4 and try. Your problem will be fixed