Sometimes, you would like to be able to display an image or view that is larger than the iPhone or iPod screen. UIScrollView
gives you this ability plus the feature of zooming using the pinch gesture. This video will show you how to implement this in your own iPhone app. Source code follows video.
Implementing UIScrollView in Cocoa-Touch
This example starts with a View Based Application with the image already in the Resources group. You can create this yourself using XCode’s “New Project” menu item.
Add IBOutlets
Select the view controller interface file and add the scroll view IBOutlet
and the image view property:
#import <UIKit/UIKit.h>
@interface UseScrollViewViewController : UIViewController {
IBOutlet UIScrollView *scrollView;
UIImageView *imageView;
}
@property (nonatomic, retain) UIScrollView *scrollView;
@property (nonatomic, retain) UIImageView *imageView;
@end
Finish implementing the IBOutlet
and property in the implementation file.
#import "UseScrollViewViewController.h"
@implementation UseScrollViewViewController
@synthesize scrollView, imageView;
- (void)dealloc {
[super dealloc];
[imageView release];
[scrollView release];
}
@end
Adopt the Delegate Protocol
To use UIScrollView
, we must adopt the UIScrollViewDelegate
protocol. Once we do our view controller may act on behalf of our scroll view. Simple add this after the UIViewController
sublcass: <UIScrollViewDelegate>
.
#import <UIKit/UIKit.h>
@interface UseScrollViewViewController : UIViewController<UIScrollViewDelegate> {
IBOutlet UIScrollView *scrollView;
UIImageView *imageView;
}
@property (nonatomic, retain) UIScrollView *scrollView;
@property (nonatomic, retain) UIImageView *imageView;
@end
Implement the Delegate Method viewForZoomingInScrollView
Implementing this method will allow the scroll view to provide the pinching and zooming behavior demonstrated in the video.
#import "UseScrollViewViewController.h"
@implementation UseScrollViewViewController
...
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
return imageView;
}
...
@end
Create the Image View
The image view will be used to display the image on the view. This is pretty straightforward: you will simple create the object and set it to the property we defined earlier in the viewDidLoad
method.
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *tempImageView =
[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Beer-Sign-On-Wall.jpg"]];
self.imageView = tempImageView;
[tempImageView release];
}
Set the UIScrollView Properties
Since we are using Interface Builder to add the scroll view, we do not need to create it here. But, we will be setting some of the scroll view properties. Note that we add the image view to the scroll view’s subview collection.
- (void)viewDidLoad {
...
scrollView.contentSize =
CGSizeMake(imageView.frame.size.width, imageView.frame.size.height);
scrollView.maximumZoomScale = 4.0;
scrollView.minimumZoomScale = 0.75;
scrollView.clipsToBounds = YES;
scrollView.delegate = self;
[scrollView addSubview:imageView];
}
Add Scroll View in Interface Builder
Now all you need to do is add your scroll view in interface builder and hook it up to the IBOutlet
you defined in the view controller!
Discuss in the comments below!