Skip to content

Instantly share code, notes, and snippets.

@nyoron
Created April 12, 2010 10:12
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save nyoron/363423 to your computer and use it in GitHub Desktop.
Save nyoron/363423 to your computer and use it in GitHub Desktop.
Some sample code for a horizontal paged UIScrollView with a gap between each image, like Photos.app (which looks nicer when paging).
/*
Some sample code for a horizontal paged UIScrollView with a gap between each image (which looks nicer). Note - not using contentInset, we want each page to fill the iPhone screen and the gap only to be visible when scrolling (like Photos.app).
Taking the iPhone status bar into account - our viewport is 320x460
Our UIScrollView is therefore set in Interface Builder to 340x460 with a -10 X offset (so it's larger than the viewport but still centred)
Then we do the following...
*/
// Our image filenames
NSArray *imgNames = [[NSArray alloc] initWithObjects:@"0.jpg", @"1.jpg", @"2.gif", @"3.jpg", @"4.jpg", @"5.png", @"6.jpg", @"7.jpg", @"8.jpg", @"9.png", @"10.jpg", nil];
// Setup the array of UIImageViews
imgArray = [[NSMutableArray alloc] init];
UIImageView *tempImageView;
for(NSString *name in imgNames) {
tempImageView = [[UIImageView alloc] init];
tempImageView.contentMode = UIViewContentModeScaleAspectFit;
tempImageView.image = [UIImage imageNamed:name];
[imgArray addObject:tempImageView];
[tempImageView release];
}
CGSize pageSize = scrollView.frame.size; // scrollView is an IBOutlet for our UIScrollView
NSUInteger page = 0;
for(UIView *view in imgArray) {
[scrollView addSubview:view];
// This is the important line
view.frame = CGRectMake(pageSize.width * page++ + 10, 0, pageSize.width - 20, pageSize.height);
// We're making use of the scrollView's frame size (pageSize) so we need to;
// +10 to left offset of image pos (1/2 the gap)
// -20 for UIImageView's width (to leave 10 gap at left and right)
}
scrollView.contentSize = CGSizeMake(pageSize.width * [imgArray count], pageSize.height);
@soltrinox
Copy link

//for ARC

// ------------------------------------

  • (void) swipe002
    {
    /*
    Some sample code for a horizontal paged UIScrollView with a gap between each image (which looks nicer). Note - not using contentInset, we want each page to fill the iPhone screen and the gap only to be visible when scrolling (like Photos.app).

    Taking the iPhone status bar into account - our viewport is 320x460
    Our UIScrollView is therefore set in Interface Builder to 340x460 with a -10 X offset (so it's larger than the viewport but still centred)

    Then we do the following...
    */

    // Our image filenames
    NSArray *imgNames = [[NSArray alloc] initWithObjects:@"0.jpg", @"1.jpg", @"2.gif", @"3.jpg", @"4.jpg", @"5.png", @"6.jpg", @"7.jpg", @"8.jpg", @"9.png", @"10.jpg", nil];

    // Setup the array of UIImageViews
    NSMutableArray *imgArray = [[NSMutableArray alloc] init];
    UIImageView *tempImageView;
    for(NSString *name in imgNames) {
    tempImageView = [[UIImageView alloc] init];
    tempImageView.contentMode = UIViewContentModeScaleAspectFit;
    tempImageView.image = [UIImage imageNamed:name];
    [imgArray addObject:tempImageView];

    }

    CGSize pageSize = _scrollViewBlock.frame.size; // scrollView is an IBOutlet for our UIScrollView
    NSUInteger page = 0;
    for(UIView *view in imgArray) {
    [_scrollViewBlock addSubview:view];

    // This is the important line
    view.frame = CGRectMake(pageSize.width * page++ + 10, 0, pageSize.width - 20, pageSize.height);
    // We're making use of the scrollView's frame size (pageSize) so we need to;
    // +10 to left offset of image pos (1/2 the gap)
    // -20 for UIImageView's width (to leave 10 gap at left and right)
    

    }

    _scrollViewBlock.contentSize = CGSizeMake(pageSize.width * [imgArray count], pageSize.height);
    }

@satish25
Copy link

Thanks For the Above code it was helpful.

i have one query is it possible to stop the scroll per image when we scroll? in the above code it's scrolling continuously

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment