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;
@end

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];
}
@end

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

You can Download SourceCode from here (ScrollingImage)

Leave a Reply

Your email address will not be published. Required fields are marked *