在UIScrollView中的圖像之間添加間距

Question

如何在添加到UIScrollView的多個圖像之間添加間距/間距？

一個例子是照片應用程序，它在尋呼時在圖像之間具有黑色間隔。

Answer 1

這只是基本的數學..

您添加的UIImageView子視圖作爲，並計算出你想知道你的子視圖的大小和滾動視圖的contentSize的空間。

編輯：

這基本上建立一家畫廊

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

只需要與他們之間的一些空間設置爲的UIImageView的框架。例如，如果scroll_view是一個UIScrollView你可以做

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]; 
} 

這是一個粗糙的例子，但說明這一點。通過插入CGRect（CGRectInset），您可以在滾動視圖中的圖像之間獲得一些空格。

Answer 3

我不得不這樣做類似的應用程序，我的解決方案被記錄在這個答案（注意，這個問題是不相關的滾動意見，但涉及的概念是相似的）：PDF in UIWebView

Answer 4

我想你知道如何在啓用分頁的情況下將圖像添加到UIScrollView。我也假設你想看全屏照片，但是當滾動時，你想要在它們之間有空隙。如果是的話，下面是可能的解決方案一個...

• 限定間隙作爲20像素
• 的UIScrollView是全屏視圖，爲分辨率320x480 iPhone
• 組的UIScrollView幀CGRectMake（0，0，340，480）; // 340 = 320 + 20（間隙，這些20像素離屏）
• 將第一個圖像幀設置爲CGRectMake（0，0，320，480）;
• 第二圖像幀到CGRectMake（340,0,320,480）;
• ...第I個圖像CGRectMake（340 * I，0,320,480）// I是索引 - 0..N-1
• 將UIScrollView內容大小設置爲CGSizeMake（340 * N，480） // N =圖片數量

...如果您不想縮放，只是全屏，分頁，滾動間隙，這是非常快速的解決方案。

Answer 5

你可能在找這個代碼：

#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]; 
} 

看起來像iOS照片應用程序。這個例子創建了3個ImageViews。

附加測試項目，所以你可以嘗試一下自己：Project

Answer 6

爲了避免與UIScrollView的框架搞亂，你可以繼承的UIScrollView並重寫layoutSubviews到應用偏移的每一頁。

的想法是基於以下觀察：

1. 當zoomScale = 1，偏移量是零，當它是在左/右邊緣
2. 當zoomScale == 1，偏移量是零，當它是在可見矩形中心

然後將以下代碼推導：

- (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); 
    } 
}