iOS - Center scrollview content when zoom (using auto layout)

I'm trying to center my UIScrollView contents when zooming out with auto layout.

Here's what my code looks like now:

- (void)viewDidLoad
{
   UIView *scrollView = [self addScrollViewWithImageViewWithSuperView:self.view];
   //..... code for scrollview auto layout.......//
}

- (UIView *)addScrollViewWithImageViewWithSuperView:(UIView *)superview
{
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    [scrollView setTranslatesAutoresizingMaskIntoConstraints:false];
    [scrollView setMaximumZoomScale:4.0f];
    [scrollView setMinimumZoomScale:0.4f];
    [scrollView setDelegate:self];
    [scrollView setBackgroundColor:[UIColor whiteColor]];
    [scrollView setShowsHorizontalScrollIndicator:NO];
    [scrollView setShowsVerticalScrollIndicator:NO];

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"photo3.jpg"]];
    [imageView setTranslatesAutoresizingMaskIntoConstraints:false];
    [imageView setContentMode:UIViewContentModeScaleAspectFill];
    [imageView setBackgroundColor:[UIColor redColor]];

    [superview addSubview:scrollView];

    [scrollView addSubview:imageView];

    [NSLayoutConstraint activateConstraints:@[
                                              [imageView.topAnchor constraintEqualToAnchor:scrollView.topAnchor constant:0],
                                              [imageView.bottomAnchor constraintEqualToAnchor:scrollView.bottomAnchor constant:0],
                                              [imageView.leftAnchor constraintEqualToAnchor:scrollView.leftAnchor constant:0],
                                              [imageView.rightAnchor constraintEqualToAnchor:scrollView.rightAnchor constant:0],
                                              [imageView.widthAnchor constraintEqualToAnchor:scrollView.widthAnchor],
                                              [imageView.heightAnchor constraintEqualToAnchor:scrollView.heightAnchor],
                                              ]];

    return scrollView;
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return scrollView.subviews.firstObject;
}

The above code works great. Everything is in place the way I want it, but when I zoom out and the UIScrollView content is smaller than UIScrollView the UIImageView gets stuck to the top left.

How do I get my UIImageViewto center in UIScrollView?

Answers


What about simply setting the center of your imageView equal to the center of your scrollView ?

[scrollView addConstraint:
[NSLayoutConstraint constraintWithItem:imageView
                    attribute:NSLayoutAttributeCenterX
                    relatedBy:NSLayoutRelationEqual
                    toItem:scrollView
                    attribute:NSLayoutAttributeCenterX
                    multiplier:1.0
                    constant:0.0];

[scrollView addConstraint:
[NSLayoutConstraint constraintWithItem:imageView
                    attribute:NSLayoutAttributeCenterY
                    relatedBy:NSLayoutRelationEqual
                    toItem:scrollView
                    attribute:NSLayoutAttributeCenterY
                    multiplier:1.0
                    constant:0.0];    

I found an answer to my question! I changed the constant of my imageview's top and left constraints.

-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    [scrollView layoutIfNeeded];

    CGFloat offsetX = MAX((scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5, 0.0);
    CGFloat offsetY = MAX((scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5, 0.0);

    UIImageView *imageView = scrollView.subviews.firstObject;

    for (NSLayoutConstraint *constraint in imageView.superview.constraints)
    {
        if (constraint.firstAttribute == NSLayoutAttributeTop && constraint.secondAttribute == NSLayoutAttributeTop && constraint.firstItem == imageView && constraint.secondItem == imageView.superview)
        {
            constraint.constant = offsetY;
        }
        else if (constraint.firstAttribute == NSLayoutAttributeLeft && constraint.secondAttribute == NSLayoutAttributeLeft && constraint.firstItem == imageView && constraint.secondItem == imageView.superview)
        {
            constraint.constant = offsetX;
        }
    }
}

Need Your Help

Does IE9 load SVG dom in document order?

javascript html5 dom internet-explorer-9 metatag

In Firefox, when a server issues out a pure SVG document to the browser, and a Javascript script element is issued before the SVG elements having onload= events attached to them, one can be assured...