UIImageView Zoom in ScrollView

Question

UIImageView Zoom in ScrollView

Another nightmare that's been lasting for Days now. I've got a UIImage that's loaded in a UIImageView that's loaded in a UIScrollView that loaded in UIViewController and pushed. As I zoom the scroll view bounds are wrong, meaning it bounces back from the zoom action but since the frame is wrong the image is cut with a black frame where it just set itself on the frame of the screen. I tried everything, from setting the frame of the ScrollView manually etc, the fun goes on as you start rotating. Here's my code:

UIImage* image = [[UIImage alloc]initWithContentsOfFile:theImagePath];
 imageView = [[UIImageView alloc]initWithImage:image];
 imageView.frame = [[UIScreen mainScreen] bounds];
 imageView.contentMode = (UIViewContentModeScaleAspectFit);
 imageView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
 imageView.backgroundColor = [UIColor blackColor];
 scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 scrollView.contentMode = (UIViewContentModeScaleAspectFit);
 scrollView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
 scrollView.maximumZoomScale = 2.0;
 scrollView.minimumZoomScale = 1;
 scrollView.clipsToBounds = YES;
 scrollView.delegate = self;
 [scrollView addSubview:imageView];
 UIViewController* viewController = [[DAUIViewController alloc]init];
 [[viewController view]addSubview:scrollView];
 [[self navigationController] pushViewController:viewController animated:YES];
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
 
 return imageView;
}

MacBook+iMac, Mac OS X (10.4.6)

Posted on Sep 12, 2008 5:49 AM

Reply

Answer 1

RickMaddy

Level 4

1,327 points

Sep 12, 2008 9:45 AM in response to Michael Fuhrmann

Yeah, that code is not quite right. First off, don't set the frame of the UIImageView. It will automatically be set to the size of the image when it is created.

For the scrollview you want to size it's frame to fit on the screen as needed. But after you add the image view to it you want to set the scroll view's contentSize to full size of the image view.

Now you can tweak all the other attributes like min and max zoom level, etc. All the autoresizing isn't needed unless you are going to support landscape and portrait.

Reply

Answer 2

Sep 12, 2008 1:45 PM in response to RickMaddy

Rick,

thanks for your reply, problem is if I don't set the UIImageView's size, the image doesn't fit within the screen's estate if you set the content size to the UIImageView's full size... and yes I want to support landscape... any proper code appreciated...

Reply

Answer 3

Sep 12, 2008 2:32 PM in response to Michael Fuhrmann

The corrected code underneath, not much better... I get a frame around it and it's not resized to fit the screen. As I said, I've tried everything.... Any help mucho appreciated

UIImage* image = [[UIImage alloc]initWithContentsOfFile:[appDelegate objectInListAtIndex:indexPath.row]];
 imageView = [[UIImageView alloc]initWithImage:image];
 imageView.contentMode = (UIViewContentModeScaleAspectFit);
 imageView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
 imageView.backgroundColor = [UIColor blackColor];
 scrollView = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
 [scrollView addSubview:imageView];
 scrollView.contentMode = (UIViewContentModeScaleAspectFit);
 scrollView.contentSize = CGSizeMake(imageView.bounds.size.width,imageView.bounds.size.height);
 scrollView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
 scrollView.maximumZoomScale = 2.0;
 scrollView.minimumZoomScale = 1;
 scrollView.clipsToBounds = YES;
 scrollView.delegate = self;
 DAUIViewController* viewController = [[DAUIViewController alloc]init];
 [[viewController view]addSubview:scrollView];
 [[self navigationController] pushViewController:viewController animated:YES];

Reply

Answer 4

shindigg

Level 1

15 points

Sep 12, 2008 2:52 PM in response to Michael Fuhrmann

The issue here is that we can't set the default zoom and scroll of the scroll view. Even if you shrunk down the image view via a transform, it think it would look all pixelated when you zoomed in.

Has anyone had success either coding a replacement for scroll view or subclassing it with more features?

Reply

Answer 5

RickMaddy

Level 4

1,327 points

Sep 12, 2008 4:38 PM in response to Michael Fuhrmann

Here's some code I just used. This will initially show an image full size. You can scroll around the image and you can shrink the image to see more of it. I don't allow the user to zoom in more than actual size (leave max at 1). This code assumes the full size image is bigger than the scroll view.


 UIImage *image = [UIImage imageNamed:@"somefile.png];
 UIImageView *iv = [[UIImageView alloc] initWithImage:image];
 CGRect frame = CGRectMake(x, y, width, height); // Whatever you need
 scroller = [[UIScrollView alloc] initWithFrame:frame];
 scroller.delegate = self;
 scroller.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
 scroller.contentSize = iv.frame.size;
 scroller.scrollEnabled = YES;
 scroller.directionalLockEnabled = NO;
 CGSize ivsize = iv.frame.size;
 CGSize ssize = scroller.frame.size;
 
 float scalex = ssize.width / ivsize.width;
 float scaley = ssize.height / ivsize.height;
 // This allows the user to zoom out on the image just enough so there is no border
 // The user can't zoom in past full size
 scroller.maximumZoomScale = 1.0;
 scroller.minimumZoomScale = fmin(1.0, fmax(scalex, scaley));
 
 [scroller addSubview:iv];
 [self.view addSubview:scroller];

Your delegate also needs to implement the following UIScrollViewDelegate method:


- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
 return iv; // Same, original UIImageView used earlier
}

Reply

Answer 6

Sep 15, 2008 1:45 AM in response to RickMaddy

Rick,

again thanks for your reply, but this is something a was able to do without trouble, my problem starts when I want to initially show a picture shrinked to the size of the screen (if there's enough pixels for it), just like in the photo app, it first fills the screen and if you want you can then zoom in it. This is what I'm trying to achieve.

Reply

Answer 7

RickMaddy

Level 4

1,327 points

Sep 15, 2008 8:13 AM in response to Michael Fuhrmann

Set the frame on the image view to the initial, smaller size, then set the scroller's content size to the same rect. That's what I do.

Reply

Answer 8

jsm174

Level 1

10 points

Oct 7, 2008 6:10 AM in response to RickMaddy

I followed all the steps and am able to get the UIImageView to initially display zoomed out. The problem I'm having is getting the image centered.

I have an image that is 600x405. My UIScrollView is 320x336. To fit the UIImageView zoomed out and proportional is 320x216.


 imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 216)]; 
 scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 336)];
 scrollView.delegate = self;
 scrollView.contentSize = imageView.frame.size;
 [scrollView addSubview:imageView];

To center the UIImageview in the UIScrollView, I tried setting the Y to 60:


 imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 60, 320, 216)];

This initially works fine. However when you zoom in a little bit and let go, the image snaps back below the center of the UIScrollView. What's even more odd is if the image is scrolled down up, there is a 60 pixel gap above the top of the UIImageView and the top of the UIScrollView.

Has anyone ever experienced this?

-- Jason

Reply