Tutorial - Implementa un scroll en iOS – Guía

Duración:
20'
Nivel:
intermedio
Curso relacionado:

Este tutorial nos va a servir para aprender a realizar un scroll. Este tipo de scroll incorpora un efecto parallax muy de tendencia últimamente con las navegaciones verticales pero que ya apareció en los primeros videojuegos.

Este scroll tiene la particularidad de disponer de diversas imágenes que realizan un ligero desplazamiento conforme se desplaza el scroll, de manera que se visualiza otra parte de la imagen.

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

El segundo paso será añadir un UIScrollView a la vista del controlador principal. Creamos la propiedad correspondiente y la enlazamos. Recordad añadir la línea siguiente al fichero .m.

@synthesize scrollView;

Además, mediante Interface Builder, asignamos File's Owner como delegate del UIScrollView, para ello bastará con realizar click derecho sobre el UIScrollView y arrastrar desde delegate al File's Owner en el lateral de Interface Builder.

Puesto que hemos asignado nuestro controlador como delegate del scroll, debemos el protocolo correspondiente, UIScrollViewDelegate.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@end

En el método viewDidLoad vamos a añadir las vistas e imágenes necesarias a nuestro scroll. Podemos realizarlo mediante el siguiente código:

int y = 0;for (int i=1; i<10; i++) {// Creamos la vista que contendrá y limitará la imagenUIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, y, self.view.frame.size.width, 100)];// Es importante esta propiedad puesto que impedirá que las imágenes// se vean fuera de los límites de la vista al realizar el desplazamientoview.clipsToBounds = YES;

// Creamos la imagenUIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"Image%d.png", i%3 + 1]]];// Asignamos el frame para que la imagen esté ligeramente subida// para evitar que vea menos imagen al desplazar hacia abajo desde// la posición inicialimageView.frame = CGRectMake(0, -20, imageView.frame.size.width, imageView.frame.size.height);// Añadimos la imagen a la vista[view addSubview:imageView];// Añadimos la vista al scroll[self.scrollView addSubview:view];// Aumentamos el valor de y para que la siguiente vista aparezca por debajo de la anteriory += view.frame.size.height + 5;}

// Ajustamos el alto del contenido del scroll[self.scrollView setContentSize:CGSizeMake(self.scrollView.contentSize.width, y)];// Almacenamos el offset iniciallastOffset = self.scrollView.contentOffset;

Podemos observar que hay una variable que no se ha declarado, la variable lastOffset, por lo que debemos declararla en la cabecera.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController {CGPoint lastOffset;}

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

@end

Si ejecutamos la aplicación dispondremos de un scroll con diversas imágenes añadidas. Vamos ahora a realizar el efecto protagonista de este tutorial. Para ello, debemos implementar el método del delegate scrollViewDidScroll:. Debemos dentro calcular la diferencia ente el offset anterior y el actual y por último trasladar todas las imágenes.

  • (void)scrollViewDidScroll:(UIScrollView *)_scrollView {// Calculamos la diferencia entre el offset anterior y el actualfloat difference = lastOffset.y - _scrollView.contentOffset.y;// Ajustamos la diferencia para evitar que las imágenes se desplacen en excesodifference = difference / 10;

// Recorremos las vistas contenidas por el scrollfor (UIView *subviewIterator in _scrollView.subviews) {// Recorremos las imágenes contenidas en las vistasfor (UIImageView *imageViewIterator in subviewIterator.subviews) {// Trasladamos la imagen según la diferencia del offset anterior y el actualimageViewIterator.transform = CGAffineTransformMakeTranslation(0, difference);}}}

Para conseguir el mejor efecto posible debemos tener en cuenta el tamaño de las fotos así como el desplazamiento que debemos asignarles. Por ejemplo, si disponemos de unas imágenes muy pequeñas, deberemos de desplazarlas muy poco para evitar que se vea mal. En la siguiente imagen vemos de color negro el fondo de la vista que contiene la imagen debido a que se desplaza demasiado la imagen.

Otro problema que podemos encontrarnos es que no situemos bien las imágenes y al desplazar el scroll desde la posición inicial se vea de nuevo el fondo de la vista, tal y como se ve en la siguiente imagen. Para solucionar este problema bastaría con situar las imágenes en una coordenada y negativa tal y como hemos hecho en el tutorial al crear los objetos UIImageView.

Con estos simples pasos bastaría para disponer de un scroll con imágenes que se desplazasen al desplazar el scroll. Lo único que quedaría sería buscar unas imágenes adecuadas para poder conseguir el mejor efecto posible.

Solicita información sobre iOS 14

En Imagina llevamos más de 11 años ofreciendo formación para empresas, estamos especializados en el área técnica y de ofimática, adaptando nuestras formaciones a vuestras necesidades. Déjanos tus datos, y nos pondremos en contacto contigo para informarte sobre el curso que mejor se ajuste a lo que buscas. Cuéntanos tus necesidades y podremos asesorarte sobre la modalidad que mejor se adapte: En directo, En directo a Medida u Online.

España