Click here to Skip to main content
12,350,134 members (25,758 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked

How To Use UIScrollView in Your iPhone App

, 7 Dec 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
This video will show you how to implement this in your own iPhone app.

Post image for How To Use UIScrollView in Your iPhone App

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;


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];


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&gt.

#import <UIKit/UIKit.h>

	@interface UseScrollViewViewController : UIViewController<UIScrollViewDelegate&gt {
		IBOutlet UIScrollView *scrollView;
		UIImageView *imageView;

	@property (nonatomic, retain) UIScrollView *scrollView;
	@property (nonatomic, retain) UIImageView *imageView;


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;



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!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
RobCroll3-Jun-13 21:09
memberRobCroll3-Jun-13 21:09 
GeneralMy vote of 5 Pin
Philip Sharman27-Mar-11 5:48
memberPhilip Sharman27-Mar-11 5:48 
GeneralGreat,and Simple Article!! Pin
coverboy22-Mar-11 10:44
membercoverboy22-Mar-11 10:44 
GeneralMy vote of 2 Pin
leow cheah wei19-Jun-10 12:34
memberleow cheah wei19-Jun-10 12:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160621.1 | Last Updated 7 Dec 2009
Article Copyright 2009 by MobileAppMastery
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid