How to properly replace image in UIImageView in UIScrollView on iOS

Question

I have an interesting problem. I have one UIScrollView and inside only one UIImageView with image. I need this for zooming and panning. Ok. On a button touch I want to replace image within UIImageView (which is within UIScrollView, like a mentioned) with the next one in line.

So far I've done this like that:

self.imageView = nil;
self.imageView = [[UIImageView alloc] initWithImage:nextImage];

The reason that I always set self.imageView to nil is that if I don't do that than the next image is scaled or zoomed like the previous one was.

But I don't think thats fine solution for memory efficiency.

Is there any other way to set new image on UIImageView with "reset" option for zooming, scale, etc... ?

UPDATE: The code that still does not work:

[self.scrollView setZoomScale:1.0];
[self.imageView setImage:photoImage];
[self.imageView setFrame:rect];
[self.scrollView setContentSize:[self.imageView frame].size];
CGFloat minZoomScale = [self.scrollView frame].size.width / [self.imageView frame].size.width;
if (minZoomScale < [self.scrollView frame].size.height / [self.imageView frame].size.height) {
    minZoomScale = [self.scrollView frame].size.height / [self.imageView frame].size.height;
}
[self.scrollView setMinimumZoomScale:minZoomScale];
[self.scrollView setZoomScale:[self.scrollView minimumZoomScale]];

UPDATE 2 Just figured out what I was doing wrong. I did not reset the minimum zoom scale.

[self.scrollView setMinimumZoomScale:1.0];

Now it works!

Answer 1

There is a property called zoomScale in UIScrollView

Set 1.0 to the zoomScale of your scrollview. No need to release the old UIImageView and to allocate a new UIImageView everytime. You can directly set the image to the imageview and set the zoomScale of the UIScrollView to 1.0.

Answer 2

Just want to make one thing clear because I ran into the same problem: reset the minimum zoom scale to 1.0 BEFORE changing the image of the imageView:

[self.scrollView setMinimumZoomScale:1.0];
[self.scrollView setZoomScale:1.0];
[self.imageView setImage:photoImage];
[self.photoView setFrame:(CGRect){.origin=CGPointMake(0.0f, 0.0f), photoImage.size=photo.size}];
[self.scrollView setContentSize:[self.imageView frame].size];
CGFloat minZoomScale = MIN([self.scrollView frame].size.width / [self.imageView frame].size.width,  [self.scrollView frame].size.height / [self.imageView frame].size.height)
[self.scrollView setMinimumZoomScale:minZoomScale];
[self.scrollView setMaximumZoomScale:1.0];
[self.scrollView setZoomScale:[self.scrollView minimumZoomScale]];
[self centerScrollViewContents];

and for centring the image:

- (void)centerScrollViewContents {
    CGSize boundsSize = self.scrollView.bounds.size;
    CGRect contentsFrame = self.imageView.frame;

    if (contentsFrame.size.width < boundsSize.width) {
        contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f;
    } else {
        contentsFrame.origin.x = 0.0f;
    }

    if (contentsFrame.size.height < boundsSize.height) {
        contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f;
    } else {
        contentsFrame.origin.y = 0.0f;
    }

    self.imageView.frame = contentsFrame;
}

Answer 3

You can just use the zoomScale property of the scrollView object and set it to 1.0 everytime change the image. This'll probably go before loading the new image. This way you'll not have to alloc and init a new UIIMageVIew object each time you want to change just the image. Additionally you can put this change into an animation block to make the image change not sharp but gradual.

Answer 4

Whey you use this code, every time you create new object, but previous UIImageView stay on your UIScrollView. This is not efficient in memory usage.

Use next code:

[self.imageView removeFromSuperview];
[self.imageView release];
self.imageView = [[UIImageView alloc] initWithImage: nextImage];
[self addSubview: imageView];

or

[self.imageView setImage: nextImage];
[self.imageView setFrame: CGRectMake(0, 0, nextImage.size.width, nextImage.size.height)];

and then, you can set content size for you ScrollView:

topScrollView.contentSize = CGSizeMake(nextImage.size.width, nextImage.size.height);