iOS - UIScrollView can scroll but cannot zoom

Question

I want to zoom in/out UIScrollView that contains a UIImageView. With my code below I am only able to scroll the scroll view contents but cannot zoom it.

My view hierarchy looks like this:

- (UIView *) containerView
-- (UIView *) contentView
--- (UIScrollView *) scrollView
---- (UIImageView *) self.imageView

Code:

UIView *previousContentView = nil;

        for (NSInteger i = 0; i < 2; i++) {
            contentView = [self addRandomColoredView];
            [containerView addSubview:contentView];
            [containerView.topAnchor constraintEqualToAnchor:contentView.topAnchor].active = true;
            [containerView.bottomAnchor constraintEqualToAnchor:contentView.bottomAnchor].active = true;

            scrollView = [self addRandomScrollView];
            [contentView addSubview:scrollView];

            self.imageView = [[UIImageView alloc] init];
            [self.imageView setImage:[imagesArray objectAtIndex:i]];
            [self.imageView setTranslatesAutoresizingMaskIntoConstraints:false];
            [scrollView addSubview:self.imageView];

            if (previousContentView) {
                [VerticalSeparatorView addSeparatorBetweenView:previousContentView secondView:contentView];
                NSLayoutConstraint *width = [contentView.widthAnchor constraintEqualToAnchor:previousContentView.widthAnchor];
                width.priority = 250;
                width.active = true;
            } else {
                [containerView.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor].active = true;
            }

            [contentView.topAnchor constraintEqualToAnchor:scrollView.topAnchor].active = true;
            [contentView.bottomAnchor constraintEqualToAnchor:scrollView.bottomAnchor].active = true;
            [contentView.leadingAnchor constraintEqualToAnchor:scrollView.leadingAnchor].active = true;
            [contentView.trailingAnchor constraintEqualToAnchor:scrollView.trailingAnchor].active = true;

            [scrollView.topAnchor constraintEqualToAnchor:self.imageView.topAnchor].active = true;
            [scrollView.bottomAnchor constraintEqualToAnchor:self.imageView.bottomAnchor].active = true;
            [scrollView.leadingAnchor constraintEqualToAnchor:self.imageView.leadingAnchor].active = true;
            [scrollView.trailingAnchor constraintEqualToAnchor:self.imageView.trailingAnchor].active = true;

            previousContentView = contentView;
        }
        [containerView.trailingAnchor constraintEqualToAnchor:previousContentView.trailingAnchor].active = true;

- (UIView *)addRandomColoredView
{
    UIView *someView = [[UIView alloc] init];
    someView.translatesAutoresizingMaskIntoConstraints = false;
    [someView setBackgroundColor:[UIColor blackColor]];
    return someView;
}

-(UIScrollView *)addRandomScrollView
{
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    [scrollView setDelegate:self];
    [scrollView setTranslatesAutoresizingMaskIntoConstraints:false];
    [scrollView setBackgroundColor:[UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1.0]];
    [scrollView setMaximumZoomScale:2.5f];
    [scrollView setMinimumZoomScale:0.5f];
    [scrollView setZoomScale:scrollView.minimumZoomScale];
    return scrollView;
}

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

I believe the scrollView is getting its contentSize because it is showing the image and I can scroll. Why can't I zoom in or zoom out?

Answer 1

You have to specify a delegate for your scroll view, and then implement viewForZoomingInScrollView to tell it to zoom the image view:

- (UIView *)addScrollViewWithImageView {
    UIScrollView *scrollView = [[UIScrollView alloc] init];
    scrollView.translatesAutoresizingMaskIntoConstraints = false;
    scrollView.maximumZoomScale = 200.0;
    scrollView.minimumZoomScale = 0.1;
    scrollView.delegate = self;

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"test.png"]];
    imageView.translatesAutoresizingMaskIntoConstraints = false;

    [self.view addSubview:scrollView];

    [scrollView addSubview:imageView];

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

    return scrollView;
}

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

And then to populate these zoomable scroll views with image views, your viewDidLoad might look like:

- (void)viewDidLoad {
    [super viewDidLoad];

    UIView *previousContentView = nil;

    for (NSInteger i = 0; i < 3; i++) {
        UIView *contentView = [self addScrollViewWithImageView];
        [self.view.leadingAnchor constraintEqualToAnchor:contentView.leadingAnchor].active = true;
        [self.view.trailingAnchor constraintEqualToAnchor:contentView.trailingAnchor].active = true;
        if (previousContentView) {
            [HorizontalSeparatorView addSeparatorBetweenView:previousContentView secondView:contentView];
            NSLayoutConstraint *height = [contentView.heightAnchor constraintEqualToAnchor:previousContentView.heightAnchor];
            height.priority = 250;
            height.active = true;
        } else {
            [self.view.topAnchor constraintEqualToAnchor:contentView.topAnchor].active = true;
        }
        previousContentView = contentView;
    }
    [self.view.bottomAnchor constraintEqualToAnchor:previousContentView.bottomAnchor].active = true;
}

Answer 2

Try MWPhotoBrowser. It has built in scroll and zoom functionality. You will get more than you need. Good Luck.