Question

I am working on an app that loads images from a UIImagePickerController and loads them into a UIScrollview. Loading the images into the ScrollView works fine. However, the images will load at varying scales (code at bottom, images to demonstrate). The first image loaded by the application will load fine, but the second will be scaled down too small. Both are loaded through the same code block.

First Load of an Image via UIImagePickerController:

Second Load of Same Image:

This is the loadImage method, which they both are loaded through:

-(void)loadImage:(UIImage *)image
{
        imageView.image = image;
    [imageScrollView setFrame: CGRectMake(0.0, 0.0, self.view.frame.size.width, self.view.frame.size.height)];
    [imageScrollView setDelegate:self];

    [imageScrollView setShowsHorizontalScrollIndicator:NO];
    [imageScrollView setShowsVerticalScrollIndicator:NO];
    [imageScrollView setMaximumZoomScale:2.0];


    CGRect rect;
    rect.size.width = imageView.image.size.width;
    rect.size.height = imageView.image.size.height;
    [imageView setFrame:rect];

    [imageScrollView setContentSize:[imageView frame].size];

    float minimumScale = [imageScrollView frame].size.width  / [imageView frame].size.width;
    [imageScrollView setMinimumZoomScale:minimumScale];
    [imageScrollView setZoomScale:minimumScale];

}

Despite 4-5 hours of playing with and searching for answers to what should be a simple problem, I’m stumped. My own efforts don’t change anything, and I haven’t found an example of someone asking for help to this problem. What do I need to change in my code so that images always appear correctly the first time – that is, they appear scaled so that either the whole image shows, or (better) the images is fully on screen at the smallest dimension?

Any help would be greatly appreciated!

Answer 1

I think you simply need to [self.imageScrollView setZoomScale:1.0f]; but you may have compound issues.

Since you spent some time trying to debug this already, let me present some tips that may help you identify the issue. My 1st recommendation is to go back to basics.

1 – make sure your views are constructed properly. If you have autolayout enabled; perhaps turn it off to keep things super simple. You should have your UIScrollView and a UIImageView inside it.

2 – continuing with tiny steps, set the background color of each view to obnoxious colors. view = red; scrollview = green; image view = blue. Resize your scrollview so it’s smaller than your view; and resize the imageview so it’s smaller than your scrollview. Set the “clip subviews” option on your imageview.

3 – set your more perminent properties in your viewDidLoad methods.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.scrollView setDelegate:self];
    [self.scrollView setMinimumZoomScale:0.5f];
    [self.scrollView setMaximumZoomScale:2.5f];
    [self.imageView setContentMode:UIViewContentModeScaleAspectFit];
}

4 – Comment out all your loadImage code except the line that sets the imageView to the image. Experiment with how the imageView’s content mode setting changes the view’s behavior. Notice if you set self.imageView.contentMode = UIViewContentModeScaleAspectFit; will resize the image to fit inside the imageView, without changing its proportions. However, if you set the mode to topLeft; it will resize the view to be the size of the image!

Also consider how scrollviews work. You want the frame of your scrollview to be remain the same size you make it in interface builder. The scrollview will scroll if the “content” it must display is bigger than the scrollview’s frame. You can have a tiny image, and scroll it around within your scrollview simply by setting the scrollview’s content height to something large. If you resize your imageView frame to be bigger then your scrollview’s frame; you’d probably want to adjust the scrollview’s content area too. But from your description, I don’t think that’s what you’re up to.

5 – When you get your image back, simply stick it in the image view. Set the zoomScale = 1.0 in case you were zooming around on the prev image. Set content offset to 0,0 in case you were scrolling around…

- (void)imagePickerController:(UIImagePickerController *) picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    NSLog(@"Picked: %@", info);
    [self dismissModalViewControllerAnimated:YES];
    UIImage * image = [info objectForKey:UIImagePickerControllerOriginalImage];
    [self.imageView setImage:image];
    // You want to resize the image to fit inside our view, not fit view to image, right?
    //[self.imageView setFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
    //[self.scrollView setContentSize:image.size];
    [self.scrollView setZoomScale:1.0f];
    [self.scrollView setContentOffset:CGPointZero];
}

The above should work for you, based on what you described. Sorry if there was to much detail, but I thought adding a few tips/techniques to visualize things might be helpful.

Update
I should clarify… your code works, but the size of the view is being scaled by the scrollView; which throws off your calculations. Set zoomScale=1.0 at the top of your loadImage, and the rest should work as you intended. That said, you can refine things a bit more depending on the behavior you’re going for.

–d