Agregar un espacio entre imágenes en un UIScrollView

Question

¿Cómo se puede agregar un espacio/espacio entre varias imágenes que se agregan al UIScrollView?

un ejemplo sería la aplicación de fotos, que tiene espaciado negro entre las imágenes cuando se busca.

Answer 1

Es simplemente matemáticas básicas ..

Se agrega UIImageView como subvistas, y calcular el espacio que desea saber el tamaño de sus subvistas y la contentSize del ScrollView.

EDIT:

Esto básicamente construir una galería

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

sólo tiene que establecer los marcos para la UIImageView de con un poco de espacio entre ellos. Por ejemplo, si es un scroll_view UIScrollView que podría hacer

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

Este es un ejemplo crudo, pero muestra el punto. Al insertar el CGRect (CGRectInset), obtiene algunos espacios entre las imágenes en la vista de desplazamiento.

Answer 3

que tenía que hacer esto en una aplicación similar, y mis soluciones se documenta en esta respuesta (tenga en cuenta que la cuestión no estaba relacionada con desplazarse puntos de vista, pero el concepto en cuestión es similar): PDF in UIWebView

Answer 4

Asumo que saber cómo agregar imágenes a UIScrollView con la paginación habilitada. También supongo que quieres ver fotos en pantalla completa, pero cuando te desplazas, quieres tener un espacio entre ellas. Si es así, esto es una de las posibles soluciones ...

• definir brecha de 20 píxeles como
• UIScrollView es la vista de pantalla completa, 320x480 para iPhone
• conjunto UIScrollView marco de CGRectMake (0, 0, 340, 480); // 340 = 320 + 20 (espacio, estos 20px están fuera de pantalla)
• establece el primer cuadro de imagen en CGRectMake (0, 0, 320, 480);
• segundo marco de imagen para CGRectMake (340, 0, 320, 480);
• ... I-th imagen CGRectMake (340 * I, 0, 320, 480) // I es el índice - 0..N-1
• establece UIScrollView el tamaño del contenido a CGSizeMake (340 * N, 480) // N = número de imágenes

... esta es una solución bastante rápida si no quieres hacer zoom, solo pantalla completa, paginado, desplazamiento con huecos.

Answer 5

Usted probablemente está buscando este código:

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

se parece a la aplicación Fotos de iOS. Este ejemplo crea 3 ImageViews.

adjuntado un proyecto de prueba para que pueda hacerlo por uno mismo: Project

Answer 6

Para evitar ensuciar con marco de UIScrollView, que podría subclase UIScrollView y anular layoutSubviews para aplicar un desplazamiento a cada página.

La idea se basa en las siguientes observaciones:

1. Cuando zoomScale = 1, el desplazamiento es cero cuando se está en el borde izquierdo/derecho
2. Cuando zoomScale == 1, el desplazamiento es cero cuando se está en el centro visible rect

continuación, el código siguiente se deriva:

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