Adding Spacing between Images in a UIScrollView

Question

How to add space / space between multiple images added to UIScrollView?

one example would be a photo app that has a black spacing between images when swapping.

Answer 1

This is just basic math.

You add a UIImageView as subzones and calculate the space you want to know about the size of your subzones and the scrollable contentSize.

EDIT:

This is mainly a gallery building

-(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 2

I assume that you know how to add images to a UIScrollView with paging enabled. I also assume that you want to see full-screen photos, but when scrolling you want to have a gap between them. If so, then here is one of the possible solutions ...

• define a space as 20px
• UIScrollView - Fullscreen View, 320x480 for iPhone.
• set the UIScrollView frame to CGRectMake (0, 0, 340, 480); // 340 = 320 + 20 (clearance, these 20px per frame)
• set the first frame of the image to CGRectMake (0, 0, 320, 480);
• second frame of the image on CGRectMake (340, 0, 320, 480);
• ... I-th image CGRectMake (340 * I, 0, 320, 480) // I - index - 0..N-1
• set UIScrollView content size to CGSizeMake (340 * N, 480) // N = number of images

... this is a pretty quick solution if you don't want to scale, just full-screen, paged, scrollable spaces.

Answer 3

You just need to set the framework for UIImageVIew with some space in between. For example, if scroll_view is a UIScrollView, you can 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 rough example, but shows a point. By inserting CGRect (CGRectInset), you get spaces between images in scroll mode.

Answer 4

I needed to do this in a similar application, and my solutions are documented in this answer (note that the question was not related to scroll view, but this concept is similar): PDF in UIWebView

Answer 5

You are probably looking for this code:

 #define FRAME_WIDTH 330 - (void)viewDidLoad { [super viewDidLoad]; self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, FRAME_WIDTH, self.view.bounds.size.height)]; self.scrollView.bounces = YES; self.scrollView.pagingEnabled = YES; UIImageView *leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]]; leftView.frame = CGRectMake(0, 0, 320, self.view.bounds.size.height); UIImageView* centerView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"9.png"]]; centerView.frame = CGRectMake(FRAME_WIDTH, 0, 320, self.view.bounds.size.height); UIImageView *rightView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"10.png"]]; rightView.frame = CGRectMake(FRAME_WIDTH * 2, 0,320,self.view.bounds.size.height); [self.scrollView addSubview:leftView]; [self.scrollView addSubview:centerView]; [self.scrollView addSubview:rightView]; [self.scrollView setContentSize:CGSizeMake(FRAME_WIDTH * 3, 0)]; [self.scrollView setContentOffset:CGPointMake(FRAME_WIDTH, 0)]; [self.view addSubview:self.scrollView]; } 

Similar to iOS Photos app. This example creates 3 ImageViews.

Attached a test project so you can try it yourself: Project

Answer 6

To avoid clutter with the UIScrollView frame, you can subclass UIScrollView and override layoutSubviews to apply offset to each page.

The idea is based on the following observations:

• When zoomScale! = 1, the offset is zero when it is on the left / right edge
• When zoomScale == 1, the offset is zero when it is in the visible center of the line.

Then the following code is output:

 - (void) layoutSubviews { [super layoutSubviews]; // Find a reference point to calculate the offset: CGRect bounds = self.bounds; CGFloat pageGap = 8.f; CGSize pageSize = bounds.size; CGFloat pageWidth = pageSize.width; CGFloat halfPageWidth = pageWidth / 2.f; CGFloat scale = self.zoomScale; CGRect visibleRect = CGRectMake(bounds.origin.x / scale, bounds.origin.y / scale, bounds.size.width / scale, bounds.size.height / scale); CGFloat totalWidth = [self contentSize].width / scale; CGFloat scrollWidth = totalWidth - visibleRect.size.width; CGFloat scrollX = CGRectGetMidX(visibleRect) - visibleRect.size.width / 2.f; CGFloat scrollPercentage = scrollX / scrollWidth; CGFloat referencePoint = (totalWidth - pageWidth) * scrollPercentage + halfPageWidth; // (use your own way to get all visible pages, each page is assumed to be inside a common container) NSArray * visiblePages = [self visiblePages]; // Layout each visible page: for (UIView * view in visiblePages) { NSInteger pageIndex = [self pageIndexForView:view]; // (use your own way to get the page index) // make a gap between pages CGFloat actualPageCenter = pageWidth * pageIndex + halfPageWidth; CGFloat distanceFromRefPoint = actualPageCenter - referencePoint; CGFloat numOfPageFromRefPoint = distanceFromRefPoint / pageWidth; CGFloat offset = numOfPageFromRefPoint * pageGap; CGFloat pageLeft = actualPageCenter - halfPageWidth + offset; view.frame = CGRectMake(pageLeft, 0.f, pageSize.width, pageSize.height); } }