Zooming an image using UIScrollView

Hi,

I have been trying to use the UIScrollView with a UIImageView as its subview so that i cud use the pinch and flick provided by UIScrollView for zooming and panning. but doest seem to work. I have tried by adding the following code. I was a bit unsure about how to make it a UIScrollViewDelegate so i just added <uiscrollviewdelegate> as a protocol in interface line in the .h file added @delegate = self line in this code.

    CGRect scrollFrame =    CGRectMake(20.0, 60.0, 280.0, 280.0);
    CGRect imageFrame =    CGRectMake(20.0, 20.0, 200.0, 200.0);
    scrollView = [[UIScrollView alloc] initWithFrame:scrollFrame];
    scrollView.contentMode = (UIViewContentModeScaleAspectFit);
    scrollView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
    scrollView.maximumZoomScale = 4;
    scrollView.minimumZoomScale = 1;
    scrollView.clipsToBounds = YES;
    scrollView.delegate = self;
    slideShowImage = [[UIImageView alloc] initWithFrame:imageFrame];
    [scrollView addSubview:slideShowImage];
    [[self view] addSubview:scrollView];

Another thing. I found out in the iPhone documentation that we need to implement a couple of methods in a UIScrollViewDelegate. But i didnt understand how to do that. Do i just make empty methods or some logic is to be added there? Basically i didnt really understand the purpose of these two methods. The documentation had the following instructions.
bq. The UIScrollView class can have a delegate that must adopt the UIScrollViewDelegate protocol. For zooming and panning to work, the delegate must implement both scrollViewWillBeginZooming: and scrollViewDidEndZooming:withView:atScale:; in addition, the maximum (maximumZoomScale) and minimum ( minimumZoomScale) zoom scale must be different.

Can anyone please explain me what i m doing wrong?

I think I found what the problem was. I just had to add a small fragment of code to indicate to the UIScrollView that wat view needs to be zoomed. I will post it in case someone is facing a similar problem.

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return slideShowImage;
}

I’m having problems with this also. Do you have an idea on how to add this on the Scrolling sample code from the developer.apple.com website?

Demetrius

Hi Demetrius,

I added the zooming in the scrolling part in the scrolling sample from apple. You can do this by following these steps:

1. Make the MyViewController a UIScrollViewDelegate. Do this by adding <uiscrollviewdelegate> in the @interface declaration in the .h file.
2. Create a UIImageView instance variable in the @interface of MyViewController. We will need this to specify it to the Delegate which object is to be zoomed. Add the @property and @synthesize for this image in relevant places. I used scroll2ImageView as the name of the instance.
3. In the viewDidLoad Method in myViewController.m class replace the code for setting up scrollView2 with this code.
   

   
   [scrollView2 setBackgroundColor:[UIColor blackColor]];
   [scrollView2 setCanCancelContentTouches:NO];
   scrollView2.clipsToBounds = YES;    // default is NO, we want to restrict drawing within our scrollview
   scrollView2.indicatorStyle = UIScrollViewIndicatorStyleWhite;
   scroll2ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image0.jpg"]];
   [scrollView2 addSubview:scroll2ImageView];
   [scrollView2 setContentSize:CGSizeMake(scroll2ImageView.frame.size.width, scroll2ImageView.frame.size.height)];
   scrollView2.minimumZoomScale = 1;
   scrollView2.maximumZoomScale = 3;
   scrollView2.delegate = self;
   [scrollView2 setScrollEnabled:YES];
   
   

   
   We made three changes here. First we replaced the local instance of imageView with the class instance scroll2ImageView. We will need this in the next step. Second we added min/max zoom scale for the image. Third we assigned the scrollView2 delegate to self.
4. Last thing we need to do is tell the delegate wat all to zoom when it detects a zoom in/out pinch. We add the following method for this.
   

   
   -(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
       return scroll2ImageView;
   }
   
   

OK so I got it to work partially for scrollView1.

MyViewController.h :

@interface MyViewController : UIViewController <uiscrollviewdelegate>
{ IBOutlet UIScrollView *scrollView1; // holds five small images to scroll horizontally UIImageView *scroll1ImageView;
}

@property (nonatomic, retain) UIView *scrollView1;
@property (nonatomic, retain) UIImageView *scroll1ImageView;

At MyViewController.m added :

scroll1ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]];

[scrollView1 setContentSize:CGSizeMake(scroll1ImageView.frame.size.width, 
    scroll1ImageView.frame.size.height)];
scrollView1.minimumZoomScale = 1;
scrollView1.maximumZoomScale = 3;
scrollView1.delegate = self;

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView { return scroll2ImageView;
}

It works but when you pinch, it pinches from all images. You get a mosaic of the images. I then changed "image0.jpg" with “image%d.jpg” to try to pull just one image, but it doesn’t work properly. I tried [NSString stringWithFormat:@”image%d.jpg”, i] just like the code in the example states, but I get an:

error”i” undeclared (first use in this function)

Something else that I tried was just adding to MyViewController.m:

@synthesize scrollView1;

scrollView1.minimumZoomScale = 1;
scrollView1.maximumZoomScale = 3;
scrollView1.delegate = self;

It works but only enlarges from the top left corner, and not from where you pinched. You can scroll from image to image though, and pinch every image.

Any ideas to make it work properly would be helpful.

Demetrius

1. Firstly, maybe u have already fixed this. But i see that the u have typed it entirely in lower-case. It will be UIScrollViewDelegate.
2. Also check the image names that u r providing.
3. In the method -(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView u need to return scroll1ImageView. Since that is wat u have created to hold the images.
4. The error that u r getting for i might be because u might have placed i outside the for-loop that the example had. That is where i was initialized so it might have gone out of scope.
5. Also i tried to add the zooming to scrollView1 myself… it was zooming only the last image in the entire mosaic. coz it was the last image that i added to the scrollview.. so the scroll1ImageView was pointing to it. I made the following changes in the original scrolling sample:
• Replaced all the occurances of imageView with scroll1ImageView.
• Removed the line – [self layoutScrollImages]; – This removes the mosaic. Just leaves the last image.
• Added the 3 lines about min/max zoom scale and the assigning the delegate for scrollView1.

That did the trick… Tested on the emulator… Seems to work for the last image… Still needs a little time to perfect it. I havent removed the for loop for adding other images which arent really helpful. Hope things work for u.

Ashish.

There is a really simple tutorial on Vimeo
Really helped me. Could check it out. It is in HD which makes it clearer too.

Good Luck.
Ashish

The only thing that I can see is that this line of code would have to be changed from a single image: [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”image0.jpg”]];

to multiple images. It’s using this code to pull in the images:

NSString *imageName = [NSString stringWithFormat:@”image%d.jpg”, i]; UIImage *image = [UIImage imageNamed:imageName]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

Demetrius

Hi Demetrius,

I think u should post the contents of the viewDidLoad method and the viewForZoomingInScrollView here. Maybe it will give me a better idea of wat is exactly going on. I think we r not on the same page at the moment.

Ashish

Here’s the clean code for

#import "MyViewController.h" 

@implementation MyViewController

@synthesize scrollView1;
@synthesize scroll1ImageView;

const CGFloat kScrollObjHeight    = 420.0;
const CGFloat kScrollObjWidth    = 280.0;
const NSUInteger kNumImages        = 5;

- (void)layoutScrollImages
{
    UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];

    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(curXLoc, 0);
            view.frame = frame;

            curXLoc += (kScrollObjWidth);
        }
    }

    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}

- (void)viewDidLoad
{
    self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

    // 1. setup the scrollview for multiple images and add it to the view controller
    //
    // note: the following can be done in Interface Builder, but we show this in code for clarity
    [scrollView1 setBackgroundColor:[UIColor blackColor]];
    [scrollView1 setCanCancelContentTouches:NO];
    scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
    scrollView1.scrollEnabled = YES;

    // pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
    // if you want free-flowing scroll, don't set this property.
    scrollView1.pagingEnabled = YES;

    // load all the images from our bundle and add them to the scroll view
    NSUInteger i;
    for (i = 1; i <= kNumImages; i++)
    {
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList" 
        CGRect rect = imageView.frame;
        rect.size.height = kScrollObjHeight;
        rect.size.width = kScrollObjWidth;
        imageView.frame = rect;
        imageView.tag = i;    // tag our images for later use when we place them in serial fashion
        [scrollView1 addSubview:imageView];
        [imageView release];
    }

    [self layoutScrollImages];    // now place the photos in serial layout within the scrollview

}

- (void)dealloc
{    
    [scrollView1 release];

    [super dealloc];
}

- (void)didReceiveMemoryWarning
{

    [super didReceiveMemoryWarning];
}

@end


    

Here’s the adjusted code:

#import "MyViewController.h" 

@implementation MyViewController

@synthesize scrollView1;
@synthesize scroll1ImageView;

const CGFloat kScrollObjHeight    = 420.0;
const CGFloat kScrollObjWidth    = 280.0;
const NSUInteger kNumImages        = 5;

- (void)layoutScrollImages
{
    UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];

    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(curXLoc, 0);
            view.frame = frame;

            curXLoc += (kScrollObjWidth);
        }
    }

    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}

- (void)viewDidLoad
{
    self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

    // 1. setup the scrollview for multiple images and add it to the view controller
    //
    // note: the following can be done in Interface Builder, but we show this in code for clarity
    [scrollView1 setBackgroundColor:[UIColor blackColor]];
    [scrollView1 setCanCancelContentTouches:NO];
    scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    scrollView1.clipsToBounds = YES;        // default is NO, we want to restrict drawing within our scrollview
    scrollView1.scrollEnabled = YES;

    scroll1ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image0.jpg"]];
    [scrollView1 addSubview:scroll1ImageView];
    [scrollView1 setContentSize:CGSizeMake(scroll1ImageView.frame.size.width, scroll1ImageView.frame.size.height)];
    scrollView1.minimumZoomScale = 1;
    scrollView1.maximumZoomScale = 3;
    scrollView1.delegate = self;
    [scrollView1 setScrollEnabled:YES];

    // pagingEnabled property default is NO, if set the scroller will stop or snap at each photo
    // if you want free-flowing scroll, don't set this property.
    scrollView1.pagingEnabled = YES;

    // load all the images from our bundle and add them to the scroll view
    NSUInteger i;
    for (i = 1; i <= kNumImages; i++)
    {
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
        UIImage *image = [UIImage imageNamed:imageName];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList" 
        CGRect rect = imageView.frame;
        rect.size.height = kScrollObjHeight;
        rect.size.width = kScrollObjWidth;
        imageView.frame = rect;
        imageView.tag = i;    // tag our images for later use when we place them in serial fashion
        [scrollView1 addSubview:imageView];
        [imageView release];
    }

    [self layoutScrollImages];    // now place the photos in serial layout within the scrollview

}

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return scroll1ImageView;
}

- (void)dealloc
{    
    [scrollView1 release];
    [scroll1ImageView release];

    [super dealloc];
}

- (void)didReceiveMemoryWarning
{

    [super didReceiveMemoryWarning];
}

@end

<code>
    

I think that the issue is: scroll1ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@”image0.jpg”]];

As it stands, it’s only viewing image0.jpg. Change it to @”image%d.jpg” and it pulls from all the images at once since the images are numbered 0-5.

My idea is to somehow use this code, but I’m not sure how to go about it:

NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

So I tried to use this code:

scroll1ImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@”image%d.jpg”, i]]];

But I get a ‘error: “i” undeclared (first use of this function)’

Demetrius

So, I’ve managed to zoom in on each picture in the series. My only problem is that it zooms only from the left top corner down and doesn’t allow me to move the picture up and down.

Demetrius