Image Scroll

In this application we will see how to images scroll in the application. So let see how it will worked.

Step 1: Open the Xcode, Create a new project using View Base application. Give the application “ScrollingImage”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the
directory structure to check out the content of the directory.

Step 3: Expand classes and notice Interface Builder created the ViewController class for you. Expand Resources and
notice the template generated a separate nib, ScrollingImageViewController.xib for the ScrollingImage application.

Step 4: We need to resources in the Resource folder.

Step 5: Open the ScrollingImageViewController.h file and make the following changes:


#import <uikit/UIKit.h>
@interface ScrollingImageViewController : UIViewController {
IBOutlet UIScrollView *FirstScrollView;
@property (nonatomic, retain) UIView *FirstScrollView;



Step 6: Double click the ScrollingImageViewController.xib file and open it to the Interface Builder. First drag the Imageview from the library and place it to the View window. Select the view and bring up Connection inspector connect File’s Owner icon to the ImageView and select “FirstScrollView”. Save the .xib file, close it and go back to the Xcode.

Step 7: Open the ScrollingImageViewController.m file and make the following changes:


#import "ScrollingImageViewController.h"
@implementation ScrollingImageViewController
@synthesize FirstScrollView;
const CGFloat kScrollObjHeight = 460.0;
const CGFloat kScrollObjWidth = 320.0;
const NSUInteger kNumImages = 3;
- (void)layoutScrollImages
UIImageView *view = nil;
NSArray *subviews = [FirstScrollView subviews];
// reposition all image subviews in a horizontal serial fashion
CGFloat curXLoc = 0;
for (view in subviews)
if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
CGRect frame = view.frame;
frame.origin = CGPointMake(curXLoc, 0);
view.frame = frame;
curXLoc += (kScrollObjWidth);
// set the content size so it can be scrollable
[FirstScrollView setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [FirstScrollView bounds].size.height)];
- (void)viewDidLoad
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[FirstScrollView setBackgroundColor:[UIColor blackColor]];
[FirstScrollView setCanCancelContentTouches:NO];
FirstScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
FirstScrollView.clipsToBounds = YES;
FirstScrollView.scrollEnabled = YES;
FirstScrollView.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
NSString *imageName = [NSString stringWithFormat:@"Snap%d.jpg", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.height = kScrollObjHeight;
rect.size.width = kScrollObjWidth;
imageView.frame = rect;
imageView.tag = i;
[FirstScrollView addSubview:imageView];
[imageView release];
[self layoutScrollImages];
- (void)dealloc
[FirstScrollView release];
[super dealloc];
- (void)didReceiveMemoryWarning
[super didReceiveMemoryWarning];



Step 8: Now compile and run the application in the Simulator.

You can Download SourceCode from here (ScrollingImage)

Leave a Comment:

Shai says September 16, 2011

How can the Scroll Image view be created to simulate how iTunes scrolls through album covers?

Image Scroll | iPhone / iPod / iPad Software developing says December 23, 2011

[…] iPhone Tutorial | iPhone iOS4 iPad SDK Development & Programming Blog This entry was posted in IOS Development and tagged Image, Scroll by sniuff. Bookmark the permalink. […]

davy choela says December 31, 2011


I am currently working on an image gallery for my portofolio. I was wondering if you have an idea about adding and deleting photos to the scrollview

Thanks in advance,

Add Your Reply