UIImageView in UIScrollview is too big

Question

I want to show an image using a UIImageView inside a UIScrollview. The image needs to fit on the screen while keeping the aspect ratio.

This all works, except that, when I zoom first, I can scroll below the image. The height of area is about 64.

This is how it looks after scrolling (White is the background color of the UIImageView and red is the background color of the UIScrollView):

This is the code in my ImageViewController:

#import "ImageViewController.h"

@interface ImageViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UIImage *image;
@end

@implementation ImageViewController

- (void)viewDidLoad
{
    NSLog(@"viewDidLoad");
    [super viewDidLoad];

    _scrollView.minimumZoomScale = 1.0  ;
    _scrollView.maximumZoomScale = _imageView.image.size.width / _scrollView.frame.size.width;
    _scrollView.zoomScale = 1.0;
    _scrollView.backgroundColor = [UIColor redColor];
    _scrollView.delegate = self;
    _imageView.backgroundColor = [UIColor whiteColor];

    [_scrollView addSubview:_imageView];

}

- (void)viewDidLayoutSubviews
{
    self.imageView.frame = self.scrollView.bounds;
}


- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    [self.imageView setContentMode:UIViewContentModeScaleAspectFit];
}

- (UIImageView *)imageView
{
    if (!_imageView) _imageView = [[UIImageView alloc] init];
    return _imageView;
}

- (UIImage *)image
{
    NSLog(@"image");
    return self.imageView.image;
}

- (void)setImage:(UIImage *)image
{
    NSLog(@"setImage");
    self.imageView.image = image;
}

#pragma mark - UIScrollViewDelegate

// mandatory zooming method in UIScrollViewDelegate protocol

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

-(void)setImageURL:(NSURL *)imageURL
{
    NSLog(@"setImageURL");
    _imageURL = imageURL;
    self.image = [UIImage imageWithContentsOfFile:[imageURL path]];
}

@end

This are the properties of my UIScrollView:

Properties of my UIScrollView

How can I fix this?

That (red) space under the UIImageView. I can scroll under the image, which should not. be possible. — Arno Moonens

Arno Moonens Arno Moonens · Accepted Answer · 2014-07-16T22:27:36

I got it working. This is my code:

#import "ImageViewController.h"

@interface ImageViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) UIImageView *imageView;
@property (nonatomic, strong) UIImage *image;
@end

@implementation ImageViewController

- (void)viewDidLoad
{
    NSLog(@"viewDidLoad");
    [super viewDidLoad];

    self.scrollView.contentSize = self.scrollView.frame.size;
    self.scrollView.delegate = self;
    CGRect rect = CGRectZero;
    rect.size = self.image.size;
    self.scrollView.minimumZoomScale = 0.5;
    self.scrollView.maximumZoomScale = 2.5;
    self.scrollView.zoomScale = 1.0;

    self.imageView = [[UIImageView alloc] initWithFrame:rect];
    self.imageView.image = self.image;
    [self.scrollView addSubview:self.imageView];
    self.imageView.contentMode = UIViewContentModeScaleAspectFit;

}
- (IBAction)tappedAction:(id)sender {
    UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:@[self.image] applicationActivities:nil];
    [self presentViewController:activityVC animated:YES completion:nil];
}

- (void)viewDidLayoutSubviews
{
    self.imageView.frame = self.scrollView.bounds;
}


#pragma mark - UIScrollViewDelegate

// mandatory zooming method in UIScrollViewDelegate protocol

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

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

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

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

-(void)setImageURL:(NSURL *)imageURL
{
    NSLog(@"setImageURL");
    _imageURL = imageURL;
    self.image = [UIImage imageWithContentsOfFile:[imageURL path]];
}

@end

The code in scrollViewDidZoom: is used to keep the image centered.

UIImageView in UIScrollview is too big

1 Answers