These are abbreviated notes from the Lecture 8 Imaginarium demo of Paul Hegarty’s excellent iPhone course. For the full walk through go there.

After you’ve created a blank single view project with an ImaginariumViewController….

Drag an Image View into the ViewController view area.

Drag an image into your project.

Add image to display.

Note – it will automatically scale the image to fit the view (will change the aspect ratio).

Change to only show top left

Now the image aspect ratio is respected, but the image is so big we only start showing the top left. So now we’ll add a scroll bar.

Select the image view (use doc view pop out on right of story board if you need to make sure you have the right view).

And click Editor -> Embed In -> Scroll View

Note how imageView is now embedded in scrollView.

Our scroll view struts and springs are now out of wack.

Fix them so they expand and use the entire area.

If we run this now we’ll see our image but no scrolling.

ScrollView has to have it’s content size set.

This scroll view currently doesn’t know how big an area to scroll over. So we need to set it (set the content area, and then set the frame of the image view so it’s in the right spot).

Going to talk to these guys from our ViewController. Therefore we need outlets.

Note you can drag the outlets from the docView we saw earlier.
Call them imageView and scrollView and stick them in the private interface of the ViewController.

Note when you do this it will auto create the synthesize and it will also add itself to the ViewDidUnload() the low memory thing.

Now use viewDidLoad to set your content size (the size of the image) and it’s frame to be the full size.

ImaginariumViewController.m

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.contentSize = self.imageView.image.size;
    self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
}

Now when we run should work.

Bonus points – zoom

So how to we get this thing to zoom?

Set the min and max zoom on the scrollView.

Set the delegate.

@interface ImaginariumViewController()  

Implement the zoom method.

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // return which subview we want to zoom
    return self.imageView;
}

Now set ourselves as the delegate.

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.delegate = self;

Note you can also set the delegate entirely within the story board using the doc view by dragging the scrollView to the controller.

Should now be able to zoom.

Code in it’s entirety.

ImaginariumViewController.m

#import "ImaginariumViewController.h"

@interface ImaginariumViewController()  <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@end

@implementation ImaginariumViewController
@synthesize imageView;
@synthesize scrollView;

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.delegate = self;
    self.scrollView.contentSize = self.imageView.image.size;
    self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
}

-(UIView *) viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    // return which subview we want to zoom
    return self.imageView;
}

- (void)viewDidUnload {
    [self setImageView:nil];
    [self setScrollView:nil];
    [super viewDidUnload];
}
@end

About these ads