(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Implementa un scroll en iOS

iOS
Medio
25 minutos

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.

Imagen11
Imagen11

Warning: getimagesize(/home2/imagina5/public_html/wp-content/uploads/2016/03/Imagen21.png): failed to open stream: No such file or directory in /home2/imagina5/public_html/wp-content/themes/Total/framework/classes/image-resize.php on line 116
Imagen21

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.

<br />
@synthesize scrollView;<br />

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 &amp;amp;lt;UIKit/UIKit.h&amp;amp;gt;</p>
<p>@interface ViewController : UIViewController </p>
<p>@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;</p>
<p>@end<br />

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;<br />
    for (int i=1; i&amp;amp;lt;10; i++) {<br />
        // Creamos la vista que contendrá y limitará la imagen<br />
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, y, self.view.frame.size.width, 100)];<br />
        // Es importante esta propiedad puesto que impedirá que las imágenes<br />
        // se vean fuera de los límites de la vista al realizar el desplazamiento<br />
        view.clipsToBounds = YES;</p>
<p>        // Creamos la imagen<br />
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@&amp;quot;Image%d.png&amp;quot;, i%3 + 1]]];<br />
        // Asignamos el frame para que la imagen esté ligeramente subida<br />
        // para evitar que vea menos imagen al desplazar hacia abajo desde<br />
        // la posición inicial<br />
        imageView.frame = CGRectMake(0, -20, imageView.frame.size.width, imageView.frame.size.height);<br />
        // Añadimos la imagen a la vista<br />
        [view addSubview:imageView];<br />
        // Añadimos la vista al scroll<br />
        [self.scrollView addSubview:view];<br />
        // Aumentamos el valor de y para que la siguiente vista aparezca por debajo de la anterior<br />
        y += view.frame.size.height + 5;<br />
    }</p>
<p>    // Ajustamos el alto del contenido del scroll<br />
    [self.scrollView setContentSize:CGSizeMake(self.scrollView.contentSize.width, y)];<br />
    // Almacenamos el offset inicial<br />
    lastOffset = self.scrollView.contentOffset;<br />

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

#import &amp;amp;lt;UIKit/UIKit.h&amp;amp;gt;</p>
<p>@interface ViewController : UIViewController  {<br />
    CGPoint lastOffset;<br />
}</p>
<p>@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;</p>
<p>@end<br />

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 {<br />
    // Calculamos la diferencia entre el offset anterior y el actual<br />
    float difference = lastOffset.y - _scrollView.contentOffset.y;<br />
    // Ajustamos la diferencia para evitar que las imágenes se desplacen en exceso<br />
    difference = difference / 10;</p>
<p>    // Recorremos las vistas contenidas por el scroll<br />
    for (UIView *subviewIterator in _scrollView.subviews) {<br />
        // Recorremos las imágenes contenidas en las vistas<br />
        for (UIImageView *imageViewIterator in subviewIterator.subviews) {<br />
            // Trasladamos la imagen según la diferencia del offset anterior y el actual<br />
            imageViewIterator.transform = CGAffineTransformMakeTranslation(0, difference);<br />
        }<br />
    }<br />
}<br />

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.

Infórmate sin compromiso

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Modalidad (requerido)

  1. Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  2. Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  3. Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  4. Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies