How do I add a scrollable/zoomable image into the MainView.xib of a Utility Based iPhone Application

Question

I have created a Utility based application for the iphone in xcode. Basically i have a mainview and a flipside view.

On the main view i have an image as well as a button and a label to go to the flipside view.

However, how do i make the image zoomable/pinchable? All the tutorials and code i have seen has been based on a View Based Application and when i come to copy it in it just comes up with tonnes of errors.

For example, i don't have a Classes folder. Can somebody please provide some sample code for this when you choose Utility Based Application from the new project window when you open xcode.

Answer 1

OK, seeing as you want some code, I see it fitting to do a full tutorial (I'm bored, let's do this!).

Open up Xcode and start a new Utilities based project (DO NOT TRASH THE OLD ONE) and name it 'PinchZoomingImages' (without the quotes). Make sure ARC is turned OFF, I like to code the old fashioned way ;).

We will be using a UIScrollView with a UIImage in it. Go into the appropriately named 'MainViewController.h" and paste in this code:

    #import "FlipsideViewController.h"

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate, UIScrollViewDelegate> {
    //Both of these iVars are unnecessary with or without ARC, 
    IBOutlet UIScrollView *scrollView;
    IBOutlet UIImageView * demoImageView;
}
//You can use 'strong' instead of retain, they both mean the same thing
@property (nonatomic, retain) IBOutlet UIImageView * demoImageView;
@property (nonatomic, retain) IBOutlet UIScrollView *scrollView;

- (IBAction)showInfo:(id)sender;

@end

We need the UIImageView and UIScrollView pointers because we will be defining them in the .m file. Speak of the devil, in the .m, paste this in over the whole thing:

#import "MainViewController.h"

@implementation MainViewController
//It is not necessary to @synthesize any properties if your Xcode version is >=4.5
@synthesize scrollView, demoImageView;

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [scrollView setBackgroundColor:[UIColor blackColor]];
    [scrollView setCanCancelContentTouches:NO];
    scrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    demoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"PDF-icon.png"]];
    [scrollView addSubview:demoImageView];
    [scrollView setContentSize:CGSizeMake(demoImageView.frame.size.width, demoImageView.frame.size.height)];
    scrollView.minimumZoomScale = 1;
    scrollView.maximumZoomScale = 3;
    scrollView.delegate = self;
    [scrollView setScrollEnabled:YES];

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}
    - (void)scrollViewDidZoom:(UIScrollView *)aScrollView {
    CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)? 
                      (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
    CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)? 
                      (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
    mySubView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX, 
                                   scrollView.contentSize.height * 0.5 + offsetY);
}
- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for everything but the portrait-upside-down orientation
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

#pragma mark - Flipside View

- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller
{
    [self dismissModalViewControllerAnimated:YES];
}

- (IBAction)showInfo:(id)sender
{    
    //Code created by the Utilities Template
    FlipsideViewController *controller = [[[FlipsideViewController alloc] initWithNibName:@"FlipsideViewController" bundle:nil] autorelease];
    controller.delegate = self;
    controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self presentModalViewController:controller animated:YES];
}
-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return demoImageView;
}
@end

SCREECH! Did you notice this line here?:

demoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"PDF-icon.png"]];

That will crash your project. you need to drag in an image and copy it's name verbatim (it's cAsE SeNsTiVe) in the [UIImage imageNamed:@"//your image name + extension"] message.

Also, notice this line in the -(void)viewDidLoad method:

scrollView.delegate = self;  

This is why we put UIScrollViewDelegate in a pair of these: "<>" in the .h file, because we need to announce to the compiler that we want to "conform" to the UIScrollViewDelegate protocol.

And finally, hook up those IBOutlets (Please, Please hook up the view one first if it isn't already there. It's a basic and easily forgettable thing):

and here's what the final product looks like (Upon Launch):

(Upon zooming, which you can do by holding down the 'option' button in the simulator and dragging the mouse):