Zoom in and Zoom out an Image

In this post we will see how to zoom in and zoom out an image with the help of UIScrollView and a UIImageView.

Design Phase: The design phase is quite simple we will be having a UIScrollView which will contain the UIImageView and here’s a look at our final output

Step 1: Open Xcode and create a window based application and then add UIViewController subclass to your project with the name myviewController, so now you will be having two files into your class  group that’s myviewController.h and myviewController.m. Now find an image file from your hard disk and add it in your project.

Step 2: Now its time to go to the myviewController.h file and then add this piece of code

@interface myviewController : UIViewController {

 UIScrollView *myscrollView;

 UIImageView *myimageView;

}

@end

In the above code we have just declared the objects of UIScrollView and UIImageView and we will be giving frames to these objects in the .m file of myviewController

Step 3: Go to the init method and add this piece of code

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

        // Custom initialization

//setting the frame of the scroll view

myscrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 30, 320, 345)];

//setting the maximum and minimum zoom scale for the contents of the scroll view

myscrollView.maximumZoomScale = 4.0;

myscrollView.minimumZoomScale = 1.0;

//setting the delegate property of scroll view to self

myscrollView.delegate = self;

//setting the frame of UIImageview

myimageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 13, 320, 293)];

//setting the image of the image

myimageView.image = [UIImage imageNamed:@"goku.png"];

    }

    return self;

}

Code Explanation: In the above code we have set the frame for both the controls and set the delegate property to self for the UIScrollView, UIScrollView has a property called maximum and minimum zoom scale which will set the maximum and minimum scale for the scroll view's content.

Step 4: Now copy a delegate method named 

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

from the documentation for UIScrollView and add this piece of code in the .m file of the myviewController

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

return myimageView;

}

Code Explanation: The above delegate method will scale the UIView whenever zooming occurs in the UIScrollView. The UIView in this case is the UIImageView's object that's myimageView.

Step 5: search for the loadView method in the .m file and add this views to the self view

-(void) loadView

{

[super loadView];

// add the image view to the scroll view

[myscrollView addSubview:myimageView];

//finally add the scroll view to the self view

[self.view addSubview:myscrollView];

}

Now its time to add the view to the window so select the AppDelegate.m file of your project and add this piece of code

#import "MultitouchAppDelegate.h"

#import "myviewController.h"

@implementation MultitouchAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

//create the object of myviewController

myviewController * obj = [[myviewController alloc]init];

//add the object to the window

[window addSubview:obj.view];

        [window makeKeyAndVisible];

}

Press build and go and you are done, try zooming in and zooming out 

Zoomed in image

i hope this post helped you out, Happy iCoding and have a great Day