Image Zooming in iPhone

Introduction

In this article I will create a Single View application. Here I use the ImageView Class for zooming control. We use an image view or scroll view on UIViewController.Xib Class for making the UI.

To understand it we use the following.

Step 1

Open XCode by double-clicking on it. 

Step 2

Create a New XCode Project by clicking on it.

Step 3

Now select a Single View Application and click on Next. 

Step 4

Now provide your Product Name.

Step 5

Select the location where you want to save your project and click on Create. 

Step 6

Now we add a TapViewController Class of UIImageView type.

To add the Objective-C Class we use these steps:

 

Select App delegate class and right-click on it to add a new file.

Select Objective-C Class and click on Next.

 

Now Select UIViewController Class with Xib and click on next. 

 

Now click on Create to import it to the project.

Step 7

Now here we write code for each class.

ZoomingAppDelegate.h

/
// ZoomingAppDelegate.h
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import <UIKit/UIKit.h>

@class ZoomingViewController;

@interface ZoomingAppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ZoomingViewController *viewController;

@end

ZoomingAppDelegate.m

//
// ZoomingAppDelegate.m
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import "ZoomingAppDelegate.h"

#import "ZoomingViewController.h"

@implementation ZoomingAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.viewController = [[ZoomingViewController alloc] initWithNibName:@"ZoomingViewController" bundle:nil];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}

- (void)applicationWillResignActive:(UIApplication *)application
{
// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
// Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
}

- (void)applicationDidEnterBackground:(UIApplication *)application
{
// Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
// If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}

- (void)applicationWillEnterForeground:(UIApplication *)application
{
// Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
// Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}

- (void)applicationWillTerminate:(UIApplication *)application
{
// Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}

@end

ZoomingController.h

//
// ZoomingViewController.h
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ZoomingViewController : UIViewController <UIScrollViewDelegate>
@property (nonatomic, retain) IBOutlet UIScrollView *imageScrollView;
@property (nonatomic, retain) IBOutlet UIImageView *imageView;
- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center;
@end
 

ZoomingController.m

//
// ZoomingViewController.m
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import "ZoomingViewController.h"
#import "TapViewController.h"

#define ZOOM_STEP 1.5
@interface ZoomingViewController ()

@end

@implementation ZoomingViewController
@synthesize imageScrollView, imageView;

- (void)viewDidLoad {
[super viewDidLoad];

imageScrollView.bouncesZoom = YES;
imageScrollView.delegate = self;
imageScrollView.clipsToBounds = YES;
imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1.jpg"]];
imageView.userInteractionEnabled = YES;
imageView.autoresizingMask = ( UIViewAutoresizingFlexibleWidth );
[imageScrollView addSubview:imageView];

imageScrollView.contentSize = [imageView frame].size;

// add gesture recognizers to the image view
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
UITapGestureRecognizer *twoFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTwoFingerTap:)];

[doubleTap setNumberOfTapsRequired:2];
[twoFingerTap setNumberOfTouchesRequired:2];

[imageView addGestureRecognizer:singleTap];
[imageView addGestureRecognizer:doubleTap];
[imageView addGestureRecognizer:twoFingerTap];



// calculate minimum scale to perfectly fit image width, and begin at that scale
float minimumScale = [imageScrollView frame].size.width / [imageView frame].size.width;
//imageScrollView.maximumZoomScale = 1.0;
imageScrollView.minimumZoomScale = minimumScale;
imageScrollView.zoomScale = minimumScale;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return YES;
}


- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.
}

- (void)viewDidUnload {
self.imageScrollView = nil;
self.imageView = nil;
}

#pragma mark UIScrollViewDelegate methods

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

#pragma mark TapDetectingImageViewDelegate methods

- (void)handleSingleTap:(UIGestureRecognizer *)gestureRecognizer {
// single tap does nothing for now
}

- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
// zoom in
float newScale = [imageScrollView zoomScale] * ZOOM_STEP;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[imageScrollView zoomToRect:zoomRect animated:YES];
}

- (void)handleTwoFingerTap:(UIGestureRecognizer *)gestureRecognizer {
// two-finger tap zooms out
float newScale = [imageScrollView zoomScale] / ZOOM_STEP;
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gestureRecognizer locationInView:gestureRecognizer.view]];
[imageScrollView zoomToRect:zoomRect animated:YES];
}

#pragma mark Utility methods

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

CGRect zoomRect;

// the zoom rect is in the content view's coordinates.
// At a zoom scale of 1.0, it would be the size of the imageScrollView's bounds.
// As the zoom scale decreases, so more content is visible, the size of the rect grows.
zoomRect.size.height = [imageScrollView frame].size.height / scale;
zoomRect.size.width = [imageScrollView frame].size.width / scale;

// choose an origin so as to get the right center.
zoomRect.origin.x = center.x - (zoomRect.size.width / 2.0);
zoomRect.origin.y = center.y - (zoomRect.size.height / 2.0);

return zoomRect;
}

@end

TapViewController.h

// TapViewController.h
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import <UIKit/UIKit.h>
@protocol TapDetectingImageViewDelegate;

@interface TapViewController : UIImageView
{

id <TapDetectingImageViewDelegate> delegate;

// Touch detection
CGPoint tapLocation; // Needed to record location of single tap, which will only be registered after delayed perform.
BOOL multipleTouches; // YES if a touch event contains more than one touch; reset when all fingers are lifted.
BOOL twoFingerTapIsPossible; // Set to NO when 2-finger tap can be ruled out (e.g. 3rd finger down, fingers touch down too far apart, etc).
}

@property (nonatomic, assign) id <TapDetectingImageViewDelegate> delegate;

@end


/*
Protocol for the tap-detecting image view's delegate.
*/
@protocol TapDetectingImageViewDelegate <NSObject>

@optional

- (void)tapDetectingImageView:(TapViewController *)view gotSingleTapAtPoint:(CGPoint)tapPoint;
- (void)tapDetectingImageView:(TapViewController *)view gotDoubleTapAtPoint:(CGPoint)tapPoint;
- (void)tapDetectingImageView:(TapViewController *)view gotTwoFingerTapAtPoint:(CGPoint)tapPoint;

@end

TapViewController.m

//
// TapViewController.m
// Image Zoom in-out
//
// Created by Sachin Bhardwaj on 05/12/12.
// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.
//

#import "TapViewController.h"

@implementation TapViewController

- (id)initWithImage:(UIImage *)image {
self = [super initWithImage:image];
if (self) {
[self setUserInteractionEnabled:YES];

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
UITapGestureRecognizer *twoFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTwoFingerTap:)];

[doubleTap setNumberOfTapsRequired:2];
[twoFingerTap setNumberOfTouchesRequired:2];

[self addGestureRecognizer:singleTap];
[self addGestureRecognizer:doubleTap];
[self addGestureRecognizer:twoFingerTap];

}
return self;
}

- (void)handleSingleTap:(UIGestureRecognizer *)gestureRecognizer {
if ([delegate respondsToSelector:@selector(tapDetectingImageView:gotSingleTapAtPoint:)])
[delegate tapDetectingImageView:self gotSingleTapAtPoint:[gestureRecognizer locationInView:self]];
}

- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer {
if ([delegate respondsToSelector:@selector(tapDetectingImageView:gotDoubleTapAtPoint:)])
[delegate tapDetectingImageView:self gotDoubleTapAtPoint:[gestureRecognizer locationInView:self]];
}

- (void)handleTwoFingerTap:(UIGestureRecognizer *)gestureRecognizer {
if ([delegate respondsToSelector:@selector(tapDetectingImageView:gotTwoFingerTapAtPoint:)])
[delegate tapDetectingImageView:self gotTwoFingerTapAtPoint:[gestureRecognizer locationInView:self]];
}

@end

Step 8

Now we import images supporting file folder.

Step 9

Now run the application and see the output.

Step 10

Output 1 in iPhone

When we double-click on it then it shows the output.

Output 2 in iPhone

Now again we double-click it and then it shows the output.

Output3 in iPhone

To Zoom out we Press alt and perform click on Simulator Screen.