UIImageView with big image. issue

Question

I want to implement iPhone Photo App (default iPhone app). I faced difficulties, when I want to load big image (2500 * 3700). When I want to scroll from one image to another, I see something like stuttering. To display images I use ImageScrollView from apple site It has displaying method: ImageScrollView.m

- (void)displayImage:(UIImage *)image
{
    // clear the previous imageView
    [imageView removeFromSuperview];
    [imageView release];
    imageView = nil;

    // reset our zoomScale to 1.0 before doing any further calculations
    self.zoomScale = 1.0;
    self.imageView = [[[UIImageView alloc] initWithImage:image] autorelease];
    [self addSubview:imageView];

    self.contentSize = [image size];
    [self setMaxMinZoomScalesForCurrentBounds];
    self.zoomScale = self.minimumZoomScale;
}

- (void)setMaxMinZoomScalesForCurrentBounds
{
    CGSize boundsSize = self.bounds.size;
    CGSize imageSize = imageView.bounds.size;

    // calculate min/max zoomscale
    CGFloat xScale = boundsSize.width / imageSize.width;    // the scale needed to perfectly fit the image width-wise
    CGFloat yScale = boundsSize.height / imageSize.height;  // the scale needed to perfectly fit the image height-wise
    CGFloat minScale = MIN(xScale, yScale);                 // use minimum of these to allow the image to become fully visible

    // on high resolution screens we have double the pixel density, so we will be seeing every pixel if we limit the
    // maximum zoom scale to 0.5.
    CGFloat maxScale = 1.0 / [[UIScreen mainScreen] scale];

    // don't let minScale exceed maxScale. (If the image is smaller than the screen, we don't want to force it to be zoomed.) 
    if (minScale > maxScale) {
        minScale = maxScale;
    }

    self.maximumZoomScale = maxScale;
    self.minimumZoomScale = minScale;
}

For my app I have 600*600 images, I show them first. When user scrolls to next image he sees only 600*600 image. Then in background I load 3600 * 3600 image

[operationQueue addOperationWithBlock:^{
    UIImage *image = [self getProperBIGImage];
    [[NSOperationQueue mainQueue] addOperationWithBlock:^{
        ImageScrollView *scroll = [self getCurrentScroll];
        [scroll displayImage:newImage];
    }];
}];

I see, that when the dimensions of image are 3600 * 3600 and I want to display image in 640 * 960 screen, iPhone waste 1 second of main queue time to scale the image, and that's why I can't scroll to next image during this 1 second.

I want to scale image, because I need user to be able to zoom this image. I tried to use this approach, but this didn't help.

I see some possible solutions:

1) to provide scaling of image in UIImageView in background (but I know, that UI should be changed only in main thread)

2) to use - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollViewCalled to show only 600 * 600 image at the beginning and then load big image, when user tries to zoom (but I tried this, and I will loose 1 second, when I try to init UIImageView with bigImage and then return this UIImageView; And I can't even implement it, because I see bad scroll view, where scrolling behavior is wrong (difficault to explain), when I try to return different view for different scales)

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollViewCalled
{
    if (!zooming)
    {
        ImageScrollView *scroll = (ImageScrollView *)scrollViewCalled;
        UIImageView *imageView = (UIImageView *)[scroll imageView];
        return imageView;
    }
    else
    {
         UIImageView *bigImageView = [self getBigImageView];
         return bigImageView;
     }
}

SushiGrass Jacob SushiGrass Jacob · Accepted Answer · 2012-08-20T14:39:55

Unfortunately, that image is too large for the iPhone to handle. I know on the iPad, the limit is roughly the size of the device screen. Any bigger than that and you'll have to use a CATiledLayer.

I would take a look at the WWDC UIScrollView presentations over the last three year, starting with 2010. In that, they discuss ways to handle large images on the iPhone. The sample code will also get you on your way.

Good luck!

UIImageView with big image. issue

1 Answers