How do I make it so when my UIScrollView zooms an image it centers the frame properly?

Question

Basically, I want my app to behave like Photos.app does. When you zoom into an image, nothing special happens, it just makes that portion larger. However, if you then zoom out and the image has black letter boxing around it, it will center it properly so the black borders are balanced vertically and horizontally. So basically it will center it when needed, but leave it otherwise.

Many questions and their corresponding answers try to address this, but they seem to all implement it as the image is being zoomed. I just want it to center the image properly post zoom if needed. Is there an accepted way to do this?

Right now I simply have it like this:

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {
    [UIView animateWithDuration:0.3 animations:^{
        [self centerViewInSuperview:self.imageBeingOverlayed];
    }];
}

But it gets called "when it doesn't need to be called" (or when a user is zooming in on something specifically so the image needn't be centered). Should I just adjust that method to somehow detect when there's black bars around it and it doesn't need to be centered? Or is there a more widely accepted way?

How are you handling the zooming? I think a `UIPinchGestureRecognizer` will help, as you will be notified when it ends, and can preform your centring animation. — msgambel, Dec 16 '13 at 06:36
if you only want it centered on zoom out, add that condition to your code. — dklt, Dec 20 '13 at 07:33

score 2 · Accepted Answer · answered Dec 23 '13 at 05:53

I've heard that this can help you:

- (void)scrollViewDidZoom:(UIScrollView *)inscrollView
{
    UIView *subView = [inscrollView.subviews objectAtIndex:0];

    CGFloat offsetX = (inscrollView.bounds.size.width > inscrollView.contentSize.width)?
    (inscrollView.bounds.size.width - inscrollView.contentSize.width) * 0.5 : 0.0;

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

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

score 1 · Answer 2 · answered Dec 16 '13 at 14:54

Use scrollViewWillBeginZooming:withView: to save your current scrollView scale. Then use scrollViewDidEndZooming:withView:atScale: to check the current scale. If the scale is lower than the previous scale you'll know that you zoomed out. If that's the case inside scrollViewDidEndZooming:withView:atScale: you can center your image using the method you wrote in your question or any other method that centers the content inside a UIScrollView.

 (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view
 {
    tempZoomScale = scrollView.zoomScale;
 }


- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
    if(scale < tempZoomScale) 
    {
    // You are Zoomed out
    // Center your view in a way of your choosing
    }
}

score 0 · Answer 3 · answered Dec 16 '13 at 15:05

I got this answer directly from another question on stackoverflow (I'll try to find the link so I can reference it properly). I'm not sure if it's exactly what you are looking for, but in my case you can zoom and pan all you want. Then when you zoom out to a point where you see the "black bars" it will center the image on screen (I use it for zoomable PDF's).

- (void)scrollViewDidZoom:(UIScrollView *)inscrollView
{
    UIView *subView = [inscrollView.subviews objectAtIndex:0];

    CGFloat offsetX = (inscrollView.bounds.size.width > inscrollView.contentSize.width)?
    (inscrollView.bounds.size.width - inscrollView.contentSize.width) * 0.5 : 0.0;

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

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

If you have a specific viewforzoominginscrollview then put that in the code instead of [inscrollView.subviews objectAtIndex:0].

score 0 · Answer 4 · answered Dec 16 '13 at 15:10

Try this code... It may help you.

- (void)doubleTap:(UITapGestureRecognizer*)recognizer
{
    if (self.zoomScale > self.minimumZoomScale)
    {
        [self setZoomScale:self.minimumZoomScale animated:YES];
    }
    else
    {
        CGPoint touch = [recognizer locationInView:recognizer.view];

        CGSize scrollViewSize = self.bounds.size;

        CGFloat w = scrollViewSize.width / self.maximumZoomScale;
        CGFloat h = scrollViewSize.height / self.maximumZoomScale;
        CGFloat x = touch.x-(w/2.0);
        CGFloat y = touch.y-(h/2.0);

        CGRect rectTozoom=CGRectMake(x, y, w, h);
        [self zoomToRect:rectTozoom animated:YES];
    }
}

This seems like a good attempt in assisting IMHO, why downvoted? — dklt, Dec 20 '13 at 07:35

How do I make it so when my UIScrollView zooms an image it centers the frame properly?

4 Answers4