How to use UIScrollView to zoom UIImageView

Ever used apple's photo app? You could easy zoom into your photo's.

In this tutorial you would learn to zoom images within a scrollview in a Xcode project.

You could download an example Xcode project, to zoom an image on a scrollview, from the attachments in the right column.

Start Xcode and create a new project based on the 'Empty Application' template.

Creat a new file based on the 'UIViewController subclass' template. Give the new class a name (we use 'ImageZoomController') and select subclass of UIViewController.

Open the AppDelegate.m, and import the "ImageZoomController.h".

// Add this line on top of your AppDelegate.m
#import "ImageZoomController.h"

Change the application:didFinishLaunchingWithOptions: method in your 'AppDelegate.m' with the code below. First of all create a 'ImageZoomController'. Then create a UINavigationController with the 'ImageZoomController' as the RootViewController.

Now we need to add the UINavigationController as a subview of the UIWindow.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
 
    ImageZoomController *myImageZoomController = [[ImageZoomController alloc] 
                                              initWithNibName:@"ImageZoomController" 
                                              bundle:[NSBundle mainBundle]];
 
    UINavigationController *nav = [[UINavigationController alloc] 
                                   initWithRootViewController:myImageZoomController];
 
    [[self window] addSubview:[nav view]];
 
    [self.window makeKeyAndVisible];
    return YES;
}

Before adding the zoom oppertunity you must create your own UIView subclass. Creat a new file based on the 'Objective-C class' template. Give the new class a name (we use 'ZoomableView') and select subclass of UIView.

Open your 'ZoomableView.m' and fill the file with the code below. This is the recommended method by apple to add zooming to your UIScrollView.

#import "ZoomableView.h"
#import <QuartzCore/QuartzCore.h>
 
@implementation ZoomableView
 
 
// Set the UIView layer to CATiledLayer
+(Class)layerClass
{
    return [CATiledLayer class];
}
 
 
// Initialize the layer by setting
// the levelsOfDetailBias of bias and levelsOfDetail
// of the tiled layer
-(id)initWithFrame:(CGRect)r
{
    self = [super initWithFrame:r];
    if(self) {
        CATiledLayer *tempTiledLayer = (CATiledLayer*)self.layer;
        tempTiledLayer.levelsOfDetail = 5;
        tempTiledLayer.levelsOfDetailBias = 2;
        self.opaque=YES;
    }
    return self;
}
 
// Implement -drawRect: so that the UIView class works correctly
// Real drawing work is done in -drawLayer:inContext
-(void)drawRect:(CGRect)r
{
}
 
@end

Now it's time to open your 'ImageZoomController.xib' file. Add a UIScrollView object to the existing UIView. And add a UIView object to the before added UIScrollView.

Switch to the 'Assistant Editor'. Select the UIScrollView and insert an outlet 'scrollView' for this object. Now select the UIView object and insert an outlet 'myZoomableView' for this object. You could create outlets by 'ctrl-clicking' a object and drag it to the left side of the 'Assistant Editor'.

Switch back to the 'Standard Editor'. Select the before added UIView object and open the 'Identity inspector'. Give the UIView the class 'ZoomableView'.

Import the 'ZoomableView' in your 'ImageZoomController.h', see the code below.

#import <UIKit/UIKit.h>
#import "ZoomableView.h"
 
@interface ImageZoomController : UIViewController <UIScrollViewDelegate>
@property (retain, nonatomic) IBOutlet UIScrollView *scrollView;
@property (retain, nonatomic) IBOutlet ZoomableView *myZoomableView;
 
@end

Now it's time to open your 'ImageZoomController.m' to code the oppertunity to zoom an image on your scrollview.

Change the viewDidLoad: method with the code below. First set the zoomScales to your scrollview. After that create a UIImageView and add it to the 'myZoomableView'. You could add every image you want to the UIImageView to zoom in.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [[self scrollView] setMinimumZoomScale:1.0];
    [[self scrollView] setMaximumZoomScale:6.0];
 
    UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 416)];
    [myImage setImage:[UIImage imageNamed:@"landscape.jpg"]];
    [[self myZoomableView] addSubview:myImage];
}

Now add the viewForZoomingInScrollView: method with the following code.

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

Now thats all! You're ready to run your project and zoom the image you've added to the scrollview.

Attachments

How to use UIScrollView to zoom UIImageView