The UIScrollView control gives us a way to pan and zoom views contained “within” it. While some attributes of a scroll view can be set in Interface Builder, in order to get a view to scroll or to zoom within a scroll view, it will be necessary to set up some things programmatically. In this blog, we will write a simple app that will display a large view inside a scroll view, and allow a user to zoom and pan the view. So let’s get started!
Start Xcode, select “Create a new Xcode project,” choose the Single View Application template, and click Next. Name the project ScrollView, and select these options:
Click Next, choose a location to save the project, and click Create.
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
<UIScrollViewDelegate>
@property (nonatomic, strong) IBOutlet UIView *innerView;
@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@end
Notice that we have adopted the UIScrollViewDelegate protocol, which is necessary if zooming is to be enabled in the scroll view. We’ve also set up properties for a UIView and a UIScrollView called innerView and scrollView, respectively.
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize innerView, scrollView;
– (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.innerView;
}
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.scrollView.contentSize = CGSizeMake(4000, 4000);
for (int i = 1; i < 4000; i++) {
CGFloat xpos = arc4random() % 4000;
CGFloat ypos = arc4random() % 4000;
CGRect labelFrame = CGRectMake(xpos, ypos, 70, 30);
UILabel *aLabel = [[UILabel alloc] initWithFrame:labelFrame];
aLabel.backgroundColor = [UIColor clearColor];
aLabel.text = [NSString stringWithFormat:@"%d", i];
[self.innerView addSubview:aLabel];
aLabel = nil;
}
}
– (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
}
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
@end
After synthesizing both properties, we define a delegate method of the UIScrollViewDelegate protocol, viewForZoomingInScrollView:, which returns our innerView object. In the viewDidLoad: method, we set up the contentSize of the scrollView, which must match the size of the view object “inside” the scroll view (the innerView, in this case). We’ve not yet set up this view in Interface Builder yet, but we shall do so soon.
We then write 4000 integers at random positions inside labels in the innerView. This is done inside the for loop.
Open ViewController.xib, and drag a UIScrollView to the main view. Set the Min and Max zoom to 1 and 5:
Right click on the scrollView and drag from the circle to the right of the “delegate” outlet to File’s Owner:
Now drag a new UIView object to the scroll view. Right click the File’s Owner object, and drag from the circles to the right of innerView and scrollView to the new view and the scroll view:
The image above shows all the connections that need to be made to File’s Owner. Note that the innerView should be wired to the view inside the scroll view, while the view outlet is wired to the main view of the xib.
In the properties of the inner view, set X, Y, Width, and Height as shown:
Now run the app. You should see something like the following:
Verify that you can pan the
inner view, and also zoom. (Zooming in the simulator can be done by holding down the option key (?) and left-dragging the mouse: