Wednesday 29 December 2010

How to make infinite-like UIScrollView

There are two options:-

1) You want the width of the image = width of the screen i.e 320 px.

The basic idea is that you store the images in that order "Assuming you have 3 images":-
3 1 2 3 1
in that order, when you reach to the pre-last image "second 3" and scroll again, you see the image number 1 "second 1" & in a moment, the scroll view will scroll to the offset of the first one.
It's the same image, so the user will not detect any flicker.

2) You want the width of the images <>

You do a similar idea, assume also you have 3 images, the order of the images in the circular list will be:- "like here http://allrecipes.com/features/more/iphone.aspx"
1 2 3 1 2 3 1 2 3

by doing so, when you are in image "third 1" you move the offset of the "second 1",
so, the same sequence of images will be the same!!

here you are a very simple working sample code:-

#define WIDTH_OF_IMAGE 63

#define HEIGHT_OF_IMAGE 70



- (void)viewDidLoad {

[super viewDidLoad];

scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 341,320,HEIGHT_OF_IMAGE)];

scrollView.showsHorizontalScrollIndicator=NO;

[self.view addSubview:scrollView];

[self setupScrollView];

}


-(void) setupScrollView{

scrollView.bounces = YES;

//scrollView.pagingEnabled = YES;

scrollView.delegate = self;

scrollView.userInteractionEnabled = YES;

slideImages = [[NSMutableArray alloc] init];

[slideImages addObject:@"activity_01.png"];

[slideImages addObject:@"activity_02.png"];

[slideImages addObject:@"activity_03.png"];

[slideImages addObject:@"activity_04.png"];

[slideImages addObject:@"activity_05.png"];

[slideImages addObject:@"activity_06.png"];

[slideImages addObject:@"activity_07.png"];

[slideImages addObject:@"activity_08.png"];

[slideImages addObject:@"activity_09.png"];

// add all of the images to the scroll view

for (int i =0; i < [slideImages count]; i++) {

[self addImageWithName:[slideImages objectAtIndex:i] atPosition:i];

}

for (int i =0; i < [slideImages count]; i++) {

[self addImageWithName:[slideImages objectAtIndex:i] atPosition:i+[slideImages count]];

}

for (int i =0; i < [slideImages count]; i++) {

[self addImageWithName:[slideImages objectAtIndex:i] atPosition:i+2*[slideImages count]];

}


scrollView.contentSize = CGSizeMake((3*[slideImages count])*WIDTH_OF_IMAGE, HEIGHT_OF_IMAGE);

[scrollView scrollRectToVisible:CGRectMake(WIDTH_OF_IMAGE,0,WIDTH_OF_IMAGE,HEIGHT_OF_IMAGE) animated:NO];

}



- (void)addImageWithName:(NSString*)imageString atPosition:(int)position {

// add image to scroll view

UIImage *image = [UIImage imageNamed:imageString];

UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

imageView.frame = CGRectMake(position*(WIDTH_OF_IMAGE+LEFT_EDGE_OFSET), 0, WIDTH_OF_IMAGE, HEIGHT_OF_IMAGE);

[scrollView addSubview:imageView];

[imageView release];

}


//Moving the scroll view to the desired offset

- (void)scrollViewDidScroll:(UIScrollView *)scrollView1{

if (scrollView1.contentOffset.x <=([slideImages count]-1)*WIDTH_OF_IMAGE) {

[scrollView setContentOffset:CGPointMake(([slideImages count]+([slideImages count]-1))*WIDTH_OF_IMAGE, 0)];

}

else if (scrollView1.contentOffset.x >=(2*([slideImages count]))*WIDTH_OF_IMAGE) {

[scrollView setContentOffset:CGPointMake(([slideImages count])*WIDTH_OF_IMAGE, 0)];

}

}



- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView1{


if (scrollView1.contentOffset.x <=([slideImages count]-1)*WIDTH_OF_IMAGE) {

[scrollView setContentOffset:CGPointMake(([slideImages count]+([slideImages count]-1))*WIDTH_OF_IMAGE, 0)];

}

else if (scrollView1.contentOffset.x >=(2*([slideImages count]))*WIDTH_OF_IMAGE) {

[scrollView setContentOffset:CGPointMake(([slideImages count])*WIDTH_OF_IMAGE, 0)];

}

}


Ready for questions!!!