In this application we will see how to implement two different style UIScrollViews. The first scroller contains multiple images, showing how to layout large content with multiple chunks of data.
Step 1: Create a Window base application using template. Give the application name Scroll Image.
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: Now we’ll add view controller class to the project. Choose New file -> Select cocoa touch classes group and then select UIViewController subclass. Give the name Scroll ImageViewController.
Step 4: In the AppDelegate.h file, we add the Scroll_ImageViewController, make the following changes in the header file.
IBOutlet UIWindow *window;
IBOutlet Scroll_ImageViewController *scrollViewController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet Scroll_ImageViewController *scrollViewController;
Step 5: In the AppDelegate.m file make the following changes:
[window release];
[scrollViewController release];
[super dealloc];
}
- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:scrollViewController.view];
[window makeKeyAndVisible];
}
Step 6: We are added UIScrollView in the Scroll ImageViewController.h file. Make the following changes.
IBOutlet UIScrollView *scrollView1;
IBOutlet UIScrollView *scrollView2;
}
@property (nonatomic, retain) UIView *scrollView1;
@property (nonatomic, retain) UIView *scrollView2;
Step 7: Now double click the MainWindow.xib file and open it to the Interface Builder. Drag ViewController from the library and place it to the main window. Select the viewcontroller icon and bring up Identity Inspector change the class name into the Scroll ImageViewController. Open the view window , drag view from the library and place it to the view window. Drag scroll image from the library and place it on the view window (See the figure below). Connect Scroll_ImageAppDelegate to the Scroll_ImageViewController . We are added two UIScrollView in the View window. Select one UIScrollView and bring up connection Inspector connect scrollView1 to the Scroll_ImageViewController. Do it once more time for scrollView2. Now save the .xib file and go back to the Xcode.
Step 8: Make the following changes in the Scroll ImageViewController.m file.
{
UIImageView *view = nil;
NSArray *subviews = [scrollView1 subviews];
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);
}
}
[scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
}
- (void)viewDidLoad
{
self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];
[scrollView1 setBackgroundColor:[UIColor blackColor]];
[scrollView1 setCanCancelContentTouches:NO];
scrollView1.indicatorStyle = UIScrollViewIndicatorStyleWhite;
scrollView1.clipsToBounds = YES;
scrollView1.scrollEnabled = YES;
scrollView1.pagingEnabled = YES;
NSUInteger i;
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:@"image%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;
[scrollView1 addSubview:imageView];
[imageView release];
}
[self layoutScrollImages];
[scrollView2 setBackgroundColor:[UIColor blackColor]];
[scrollView2 setCanCancelContentTouches:NO];
scrollView2.clipsToBounds = YES;
scrollView2.indicatorStyle = UIScrollViewIndicatorStyleWhite;
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image0.jpg"]];
[scrollView2 addSubview:imageView];
[scrollView2 setContentSize:CGSizeMake(imageView.frame.size.width, imageView.frame.size.height)];
[scrollView2 setScrollEnabled:YES];
[imageView release];
}
Step 9: Compile and run the application in the simulator.
You can downloaded SourceCode from here Scroll Image 2
The tutorial is very good..