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:
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):
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:
Observa que hay una variable que no se ha declarado, la variable lastOffset. Por lo tanto, debemos declararla en la cabecera del archivo (.h):
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.
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.