iOS : How to do proper paging in UIScrollView?

Question

I've a UIScrollView of size (320,160). I'm adding some UIImageView into it, which are of size (213,160). The first UImageView starting from 54 (x) and so on, I've added a space of 5.0 in between each UIImageView. I've also enabled pagingEnable in IB & in coding. What my problem is its not properly working as per its property! When I scroll it should show me UIImageViews in each single page instead it showing me something like see screenshot I want output something like this see output screenshot

Where I'm doing wrong? I also having function of< (previous) & > (next) there to show images. I've asked one question yesterday which was I accepted however my requirement is little change and it won't become my solution. see my question.

Is there any special property that I've to set, or some logic I should implement? All examples I've checked and tried but I find that my requirement is some special. Point me! Thanks.

EDITED:

- (void) setImages
{
CGFloat contentOffset = 0.0f;

    for (int i=0; i<[arrImgUrls count]; i++) 
    {
        CGRect imageViewFrame = CGRectMake(contentOffset, 0.0f, 213, scrollImages.frame.size.height);
        AsyncImageView *asyncImageView = [[AsyncImageView alloc] initWithFrame:imageViewFrame];
        [asyncImageView.layer setMasksToBounds:YES];
        NSString *urlImage = [arrImgUrls objectAtIndex:i];
        NSURL *url = [NSURL URLWithString:urlImage];
        [asyncImageView loadImageFromURL:url];
        [scrollImages addSubview:asyncImageView];
    contentOffset += asyncImageView.frame.size.width+increment;
        [asyncImageView release];
}

    scrollImages.contentSize = CGSizeMake([arrImgUrls count] * scrollImages.frame.size.width, scrollImages.frame.size.height);
    scrollImages.pagingEnabled = YES;
    scrollImages.clipsToBounds = NO;
}

-(IBAction)prevImage:(id)sender
{    
     _currentImage--;

     [btnNext setEnabled:YES];

     if (_currentImage==0)
     {
         [btnPrev setEnabled:NO];
         [scrollImages setContentOffset:CGPointMake((_currentImage*imageWidth), 0) animated:YES];
         return;
     }

     NSLog(@"previous:mult %d inc %d current %d",_currentImage*imageWidth,increment*_currentImage,_currentImage);

     int nextImage=_currentImage+2;

     [scrollImages setContentOffset:CGPointMake((((_currentImage*imageWidth)-(increment*_currentImage)))+(nextImage*increment), 0) animated:YES];
 }

-(IBAction)nextImage:(id)sender
{    
   _currentImage++;

   NSLog(@"next:mult %d inc %d current %d",_currentImage*imageWidth,increment*_currentImage,_currentImage);

  [scrollImages setContentOffset:CGPointMake((_currentImage*imageWidth)+(increment*_currentImage), 0) animated:YES];

  [btnPrev setEnabled:YES];

  if (_imageCount-1 == _currentImage)
 {
    [btnNext setEnabled:NO];
 }
}

Answer 1

You are forgetting to set scrollview content size.

make sure that you have set the content size to fit N number of images.

if you want to scrollview to scroll for 10 images with an image on each page set scrollView contentSize as

[scrollView setContentSize:CGSizeMake(320 * 10,200)];

Answer 2

Paging scroll views alway page multiples of their frame size. So in your example paging is always +320.

This behavior is good if you have content portions matching the frame of the scroll view.

What you have to do, is giving your scroll view a width of 213 and set its clipsToBounds property to NO. After that your scroll view pages exactly how you want and you see what's left and right outside the frame. Additionally you have to do a trick to make this left and right area delegate touches to the scroll view.

It's greatly explained in this answer.