Cómo implementar un Scroll en iOS | Guía completa

Aprende a implementar un scroll en iOS

En este tutorial aprenderemos a implementar un scroll en iOS con un efecto parallax, que consiste en desplazar ligeramente las imágenes a medida que el scroll avanza, revelando diferentes partes de las imágenes.

Paso 1: Crear un nuevo proyecto

El primer paso es crear un nuevo proyecto de tipo Single View Application en Xcode.

Paso 2: Añadir un UIScrollView a la vista

El segundo paso consiste en añadir un UIScrollView a la vista del controlador principal. Para ello, creamos una propiedad scrollView y la enlazamos. Asegúrate de añadir la siguiente línea al archivo .m para la propiedad scrollView:

1@synthesize scrollView;

Además, mediante Interface Builder, asignamos el File's Owner como delegado del UIScrollView. Para hacer esto, haz clic derecho sobre el UIScrollView, arrastra desde "delegate" hacia el File's Owner en el lateral de Interface Builder.

Paso 3: Implementar el protocolo UIScrollViewDelegate

Dado que hemos asignado nuestro controlador como delegado del scroll, debemos implementar el protocolo UIScrollViewDelegate. Añade la siguiente importación y declaración en el archivo de cabecera (.h):

1#import <UIKit/UIKit.h>
2
3@interface ViewController : UIViewController <UIScrollViewDelegate>
4
5@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
6
7@end

Paso 4: Añadir vistas e imágenes al scroll

En el método viewDidLoad, añadiremos las vistas e imágenes necesarias a nuestro scroll. Podemos hacerlo con el siguiente código:

1int y = 0;
2
3for (int i = 1; i < 10; i++) {
4    // Creamos la vista que contendrá y limitará la imagen
5    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, y, self.view.frame.size.width, 100)];
6    
7    // Es importante esta propiedad para evitar que las imágenes se vean fuera de los límites de la vista al desplazar
8    view.clipsToBounds = YES;
9    
10    // Creamos la imagen
11    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"Image%d.png", i % 3 + 1]]];
12    
13    // Asignamos el frame para que la imagen esté ligeramente subida y se vea correctamente al desplazar
14    imageView.frame = CGRectMake(0, -20, imageView.frame.size.width, imageView.frame.size.height);
15    
16    // Añadimos la imagen a la vista
17    [view addSubview:imageView];
18    
19    // Añadimos la vista al scroll
20    [self.scrollView addSubview:view];
21    
22    // Aumentamos el valor de y para que la siguiente vista aparezca por debajo de la anterior
23    y += view.frame.size.height + 5;
24}
25
26// Ajustamos el alto del contenido del scroll
27[self.scrollView setContentSize:CGSizeMake(self.scrollView.contentSize.width, y)];
28
29// Almacenamos el offset inicial
30lastOffset = self.scrollView.contentOffset;

Observa que hay una variable que no se ha declarado, la variable lastOffset. Por lo tanto, debemos declararla en la cabecera del archivo (.h):

1#import <UIKit/UIKit.h>
2
3@interface ViewController : UIViewController {
4    CGPoint lastOffset;
5}
6
7@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
8
9@end

Si ejecutamos la aplicación, dispondremos de un scroll con diversas imágenes añadidas.

Paso 5: Implementar el efecto parallax

Ahora vamos a implementar el efecto parallax en nuestro scroll.

Para ello, debemos implementar el método scrollViewDidScroll: del delegate. En este método, calcularemos la diferencia entre el offset anterior y el actual, y trasladaremos todas las imágenes según esta diferencia.

1(void)scrollViewDidScroll:(UIScrollView *)_scrollView {
2    // Calculamos la diferencia entre el offset anterior y el actual
3    float difference = lastOffset.y - _scrollView.contentOffset.y;
4    
5    // Ajustamos la diferencia para evitar un desplazamiento excesivo de las imágenes
6    difference = difference / 10;
7    
8    // Recorremos las vistas contenidas por el scroll
9    for (UIView *subviewIterator in _scrollView.subviews) {
10        // Recorremos las imágenes contenidas en las vistas
11        for (UIImageView *imageViewIterator in subviewIterator.subviews) {
12            // Trasladamos la imagen según la diferencia del offset anterior y el actual
13            imageViewIterator.transform = CGAffineTransformMakeTranslation(0, difference);
14        }
15    }
16}

Consideraciones adicionales

Para obtener el mejor efecto posible, debemos tener en cuenta el tamaño de las fotos y el desplazamiento que les asignamos. Si las imágenes son muy pequeñas, debemos desplazarlas solo ligeramente para evitar que se vean mal. Asegúrate de situar correctamente las imágenes para evitar que se revele el fondo de la vista al desplazar el scroll desde la posición inicial.

¡Con estos simples pasos tendrás un scroll con imágenes que se desplazan al hacer scroll! Solo queda buscar imágenes adecuadas para lograr el mejor efecto posible.

Aprende a programar en iOS

Tras este tutorial, te recomendamos consultar la página de nuestro curso de programación en iOS, así como nuestro curso de iOS avanzado.