Symmetric zooming of image within scrollview in iOS

Question

I am new to iPhone to iOS development. and I want a demo for zoom in and zoom out (symmetric zooming of image) a image within a scrollview in iOS.This is my code : in this code i have taken an image view within a scrollview(ZoomScrollView) and scrollview within a another Scrollview(scrollView_Gallery).Thanks in advance..

//ZoomGalleryViewController.m//

    scrollView_Gallery.backgroundColor                 = [UIColor yellowColor];
    scrollView_Gallery.delegate                        = self;
    scrollView_Gallery.pagingEnabled                   = YES;
    scrollView_Gallery.userInteractionEnabled          = YES;
    scrollView_Gallery.showsHorizontalScrollIndicator  = NO;
    scrollView_Gallery.showsVerticalScrollIndicator    = NO;
    [self.view addSubview:scrollView_Gallery];

    if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPhone)
    {
        [scrollView_Gallery setContentSize:CGSizeMake(self.view.frame.size.width*[arrayUrl count],self.view.frame.size.height)];
    }
    else if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad)
    {
        [scrollView_Gallery setContentSize:CGSizeMake([[UIScreen mainScreen] bounds].size.width*[arrayUrl count],[[UIScreen mainScreen] bounds].size.height)];

    }

    for (int i = 0; i < [arrayUrl count]; i++)
    {
        zoomScrollView                       = [[ZoomScrollView alloc]init];
        zoomScrollView.backgroundColor       = [UIColor redColor];
        [zoomScrollView setContentSize:CGSizeMake(zoomScrollView.contentSize.width,zoomScrollView.frame.size.height)];

        CGRect frame                         = scrollView_Gallery.frame;
        frame.origin.x                       = (frame.size.width)* i;
        frame.origin.y                       = 0;
        zoomScrollView.frame                 = frame;
        zoomScrollView.imageView.contentMode = UIViewContentModeScaleAspectFit;

        NSMutableURLRequest *request         = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:[[arrayUrl objectAtIndex:i]objectForKey:@"photopath"]]];
        __weak UIImageView *weakImageView    = zoomScrollView.imageView;

        zoomScrollView.imageView.tag         = i;
        zoomScrollView.ZOOM_VIEW_TAG         = zoomScrollView.imageView.tag;
        [zoomScrollView.imageView setImageWithURLRequest:request
                                        placeholderImage:nil
                                                 success:^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image)
        {
            NSLog(@"image=%f,imageheight=%f",image.size.width,image.size.height);
            UIImageView *strongImageView = weakImageView; // make local strong reference to protect against race conditions

            strongImageView.frame  = CGRectMake(0,0,image.size.width*image.scale, image.size.height*image.scale);
            strongImageView.center = scrollView_Gallery.center;

            NSLog(@"image11    = %f, imageheight11 = %f",image.size.width*image.scale, image.size.height*image.scale);
            NSLog(@"imageScale = %f",image.scale);

            if (!strongImageView) return;
            [UIView transitionWithView:strongImageView
                              duration:0.3
                               options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
                                strongImageView.image = image;
         }
            completion:NULL];
           //[scrollView_Gallery setContentOffset:CGPointMake(strongImageView.frame.size.width * (indexNumber+1), 0)];
        }failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error){
                NSLog(@"Request failed with error: %@", error);
        }];
        [scrollView_Gallery addSubview:zoomScrollView];

        [zoomScrollView setContentSize:CGSizeMake(zoomScrollView.contentSize.width,zoomScrollView.frame.size.height)];
        if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPhone)
        {
             [scrollView_Gallery setContentOffset:CGPointMake(self.view.frame.size.width * (indexNumber), 0)];
        }
        else if(UI_USER_INTERFACE_IDIOM()==UIUserInterfaceIdiomPad)
        {
              [scrollView_Gallery setContentOffset:CGPointMake([[UIScreen mainScreen] bounds].size.width * (indexNumber), 0)];

        }


//  ZoomScrollView.h//

#import <UIKit/UIKit.h>


@interface MRZoomScrollView : UIScrollView <UIScrollViewDelegate>
{
    UIImageView *imageView;
}

@property (nonatomic, retain) UIImageView *imageView;


@end

// MRZoomScrollView.m//

#import "MRZoomScrollView.h"

#define MRScreenWidth      CGRectGetWidth([UIScreen mainScreen].applicationFrame)
#define MRScreenHeight     CGRectGetHeight([UIScreen mainScreen].applicationFrame)

@interface MRZoomScrollView (Utility)

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center;

@end

@implementation MRZoomScrollView

@synthesize imageView;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.delegate = self;
        self.frame = CGRectMake(0, 0, MRScreenWidth, MRScreenHeight);

        [self initImageView];
    }
    return self;
}

- (void)initImageView
{
    imageView = [[UIImageView alloc]init];
    // The imageView can be zoomed largest size

    imageView.frame = CGRectMake(0, 0, MRScreenWidth * 2.5, MRScreenHeight * 2.5);
    imageView.userInteractionEnabled = YES;
    [self addSubview:imageView];
    [imageView release];

    // Add gesture,double tap zoom imageView.
    UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
    [doubleTapGesture setNumberOfTapsRequired:2];
    [imageView addGestureRecognizer:doubleTapGesture];
    [doubleTapGesture release];

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


#pragma mark - Zoom methods

- (void)handleDoubleTap:(UIGestureRecognizer *)gesture
{
    float newScale = self.zoomScale * 1.5;
    CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view]];
    [self zoomToRect:zoomRect animated:YES];
}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
{
    CGRect zoomRect;
    zoomRect.size.height = self.frame.size.height / scale;
    zoomRect.size.width  = self.frame.size.width  / scale;
    zoomRect.origin.x = center.x - (zoomRect.size.width  / 2.0);
    zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);
    return zoomRect;
}


#pragma mark - UIScrollViewDelegate

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

- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(float)scale
{
    [scrollView setZoomScale:scale animated:NO];
}

Answer 1

Look at this tutorial, it was helpful for me:

Answer 2

You can do it by using UIScrollView and enable enabledZoom ON.

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;
}

in viewDidLoad method paste this code

- (void)viewDidLoad {
    [super viewDidLoad];
    self.scrollView.minimumZoomScale=0.5;
    self.scrollView.maximumZoomScale=6.0;
    self.scrollView.contentSize=CGSizeMake(1280, 960);
    self.scrollView.delegate=self;
}

Answer 3

Assuming you have a property scrollView, try the following code in your view controller s viewDidLoad or viewWillAppear methods:

  self.scrollView.minimumZoomScale=1.0;
    self.scrollView.maximumZoomScale=2.0;
    self.scrollView.contentSize=self.scrollView.frame.size;
    self.scrollView.bounces=YES;
    self.scrollView.delegate=self;

Let your view controller conform to the UIScrollViewDelegate protocol. And implement the delegate method :

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return self.imageView;// return the imageView inside the scrollview which has to be scaled.
}