Adding a spacing between images in a UIScrollView

Question

How does one add a gap/space between multiple images that are added to the UIScrollView?

one example would be photos app, which has black spacing between images when paging.

Answer 1

I assume you know how to add images to UIScrollView with paging enabled. I also assume you want to see fullscreen photos, but when scrolling, you want to have gap between them. If yes, here's one of possible solutions ...

• define gap as 20px
• UIScrollView is fullscreen view, 320x480 for iPhone
• set UIScrollView frame to CGRectMake( 0, 0, 340, 480 ); // 340 = 320 + 20 (gap, these 20px are offscreen)
• set first image frame to CGRectMake( 0, 0, 320, 480 );
• second image frame to CGRectMake( 340, 0, 320, 480 );
• ... I-th image CGRectMake( 340 * I, 0, 320, 480 ) // I is index - 0..N-1
• set UIScrollView content size to CGSizeMake( 340 * N, 480 ) // N = number of images

... this is pretty fast solution if you do not want zooming, just fullscreen, paged, scrolling with gaps.

Answer 2

It's just basic mathematics..

You add UIImageView as subviews, and compute the space you want knowing the size of your subviews and the contentSize of the scrollView.

EDIT :

This basically build a gallery

-(void)photosGallery
{
    UIScrollView* scrollView = [[UIScrollView alloc] initWithFrame:(CGRect){.origin.x = 0.0f, .origin.y = 0.0f, .size.width = 320.0f, .size.height = 416.0f}];
    scrollView.contentSize = (CGSize){.width = view.frame.size.width, .height = 372.0f};
    scrollView.backgroundColor = [UIColor whiteColor];
    scrollView.showsVerticalScrollIndicator = NO;
    scrollView.showsHorizontalScrollIndicator = NO;
    /// Build gallery
    CGSize thumbSize = (CGSize){.width = 75.0f, .height = 75.0f};
    const CGFloat xSpace = (scrollView.frame.size.width - (thumbSize.width * kPictsPerRow)) / (kPictsPerRow + 1); // kPictsPerRow = Number of pictures in a row
    const CGFloat xInc = thumbSize.width + xSpace;
    const CGFloat yInc = thumbSize.height + 15.0f;
    CGFloat x = xSpace, y = 10.0f;
    for (NSUInteger i = kMaxPictures; i--;)
    {
        UIImageView* pv = [[UIImageView alloc] initWithFrame:(CGRect){.origin.x = x, .origin.y = y, .size = thumbSize}];
        [scrollView addSubview:pv];
        [pv release];
        x += xInc;
        const NSUInteger eor = i % kPictsPerRow;

        if (!eor)
            y += yInc, x = xSpace;
    }
    [scrollView release];
}

Answer 3

Just need to set the frames for the UIImageVIew's with some space between them. For example if scroll_view is a UIScrollView you could do

scroll_view.contentSize = CGSizeMake(1000,100);
for (int i=0;i<10;i++){
    UIImageView *imv = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"some_image.png"]];
    CGRect frame = CGRectInset(CGRectMake(i * 100,0.0,100.0,100.0), 5.0, 4.0);
    imv.frame = frame;
    [scroll_view addSubview:imv];
}

This is a crude example, but shows the point. By insetting the CGRect (CGRectInset), you get some spaces between images in the scroll view.