fbpx
 

Introducción a UICollectionView con Swift [Parte 1]

Introducción a UICollectionView con Swift [Parte 1]

1. Introducción

El Tutorial de esta semana es sobre UICollectionView y tiene algo de historia (breve, lo prometo).

Hace un par de semanas estuve tomando algo con uno de mis mejores amigos y surgió la conversación de cual era la mejor serie de todos los tiempos.

Al poco tiempo estábamos discutiendo y gritando como locos nombres de series, algunas de hace más de 20 años.

Después de un buen rato haciendo memoria y por raro que parezca, nos pusimos de acuerdo.

Los dos teníamos claro cual era para nosotros la mejor serie de la historia. Y es esta: Intro

El tutorial de esta semana está inspirado en el mundo de las series y dedicado a mi amigo GuillerKiller.

2. ¿Qué vamos a ver en este tutorial sobre UICollectionView?

Desarrollaremos una aplicación que conste de una UICollectionView donde mostraremos imágenes de algunas de las series más conocidas de los últimos tiempos. Además, si el usuario pulsa en cualquiera de las imágenes, accederá al detalle de esa serie donde mostraremos el título de la serie y la imagen en mayor tamaño.

Estos son los temas que vamos a ver en el Tutorial:

  • ¿En qué consiste un Protocolo en iOS?
  • ¿Qué es el protocolo UICollectionViewDataSource?
  • ¿Qué es el protocolo UICollectionViewDelegate?
  • ¿En qué consisten los delegados en iOS?
  • ¿Que es el IndexPath?
  • ¿Cómo funcionan las UICollectionViews?
  • ¿Cómo realizar navegación entre pantallas utilizando un Navigation Controller?
  • ¿Cual es la forma de pasar información entre diferentes View Controllers?
  • ¿Cómo puedes personalizar la Navigation Bar de tu aplicación?

3. La Aplicación que vamos a crear

Al terminar el tutorial, nuestra aplicación tendrá este aspecto:

UICollectionView Demo app

 

Como ves se trata de una aplicación muy sencilla, que nos servirá para comprender perfectamente el funcionamiento de UICollectionView y otros conceptos básicos del Desarrollo iOS.

[caja-roja]Nota Aclaratoria: Anatomía de Grey fue incluida en el listado de series contra mi voluntad. Recibí amenazas por parte de mi novia para que apareciera en la aplicación[/caja-roja]

4. Antes de comenzar

El funcionamiento detrás de las UICollectionView es muy muy parecido al de las UITableView. Si no has trabajado antes con Tablas en iOS, te recomiendo que comiences por el Tutorial de Introducción a UITableView y una vez que hayas revisado los conceptos fundamentales, continúes con este Tutorial.

De esta forma, con solo dos tutoriales, serás capaz de dominar UITableView y UICollectionView y podrás utilizarlas en tus aplicaciones iOS.

5. Descarga el Proyecto de Inicio

Para no alargar demasiado el tutorial, he creado un Proyecto de Inicio que puedes utilizar como base para crear esta aplicación.

Descarga el proyecto desde aquí, descomprímelo y ábrelo con Xcode.

ECHANDO UN VISTAZO A LA INTERFAZ DEL PROYECTO

Lo primero que vamos a hacer es echar un vistazo a la interfaz, así que abre el fichero Main.storyboard.

 

UICollectionView Intro Interface

 

Verás que tienes una interfaz compuesta por dos pantallas. La primera pantalla está asociada al CollectionViewController.swift y la segunda pantalla al DetailViewController.swift

Para crear la pantalla de CollectionViewController.swift hemos seguido estos pasos:

  • Añadir una UICollectionView con el siguiente color de fondo: 383838.
  • Establecer las 4 constraints de la UICollectionView a 0.
  • Darle unas medidas de 187 x 229 a los items de la UICollectionView.

 

UICollectionView cell size

 

  • Arrastrar dentro del item del Collection View un UIImageView y un UILabel.

Estos dos elementos nos servirán para mostrar la portada de la serie y su título.

En la pantalla de DetailViewController.swift lo único que hemos hecho ha sido añadir una UIImageView que mostrará la portada de la serie a tamaño completo. Recuerda que tienes que añadir también las constraints para la UIImageView.

[caja-gris]Si no tienes experiencia trabajando con Constraints, puedes visitar nuestra sección de Tutoriales y en el Tema Auto Layout encontrarás todo lo que necesitas[/caja-gris]

Abre ahora, la carpeta de Assets y verás como el proyecto ya tiene añadidas todas las imágenes que vamos a utilizar.

 

UICollectionView all project assets

 

ECHANDO UN VISTAZO AL CÓDIGO DE NUESTRO PROYECTO

Después de este repaso de la interfaz de nuestro Proyecto de Inicio, vamos a echar un vistazo a los ViewControllers.

Si abres CollectionViewController.swift, verás que está vacío a excepción de los métodos que crea Xcode por defecto.

Abre DetailViewController.swift y como puedes comprobar, simplemente tiene dos variables que hacen referencia al titulo y a la portada de la serie.

Abre SeriesCollectionViewCell.swift y verás que lo único que tiene son los Outlets de la imagen y la etiqueta que nos servirá para mostrar la información de las series en nuestra Collection View.

Esto es todo lo que tenemos ahora mismo en nuestro Proyecto.

Si ejecutas la aplicación verás como lo único que hace nuestra aplicación es mostrar una pantalla oscura.

Cuando termines este tutorial, nuestra aplicación estará completa.

Antes de comenzar a programar, veamos un repaso rápido a unos conceptos básicos que debes conocer para trabajar con UICollectionView.

6. Conceptos fundamentales de UICollectionView

PROTOCOLO UICOLLECTIONVIEWDATASOURCE

Apple nos ofrece la clase UICollectionView para que podamos trabajar con Collection Views en nuestras aplicaciones. Esta clase nos permite mostrar en pantalla información de forma muy visual.

La pregunta es:

¿Cómo le decimos a la clase UICollectionView que información debe mostrar? 

La respuesta es, utilizando el protocolo UICollectionViewDataSource.

Si no sabes lo que es un protocolo, no te preocupes, puedes consultarlo aquí.

Además de entender los protocolos, es importante que tengas en cuenta esto:

[caja-gris]Una UICollectionView se divide en Secciones e Items[/caja-gris]

Una vez que has revisado el concepto de protocolo y entiendes que una Collection View se divide en diferentes secciones, donde cada sección puede contener un determinado número de items, ya podemos explicar de forma específica en que consiste el protocolo UICollectionViewDataSource.

UICollectionViewDataSource es el enlace entre los datos que queremos mostrar y nuestra UICollectionView. Este protocolo declara dos métodos obligatorios:

  • collectionView:numberOfItemsInSection()
  • collectionView:cellForItemAt()

El primero de los métodos: numberOfItemsInSection(), especifica el número de items que mostraremos en nuestra Collection View y se ejecutará tantas veces como secciones tenga nuestra Collection View. En nuestro caso, como no hemos indicado el número de secciones, iOS entenderá que nuestra Collection View tiene una única sección, por lo que este método se ejecutará una única vez.

El segundo método: cellForItemAt(), nos permite especificar los datos que mostraremos en cada ítem de la UICollectionView y se ejecutará tantas veces como items tenga la única sección de nuestra Collection View.

Al tratarse de métodos obligatorios, tendremos que implementarlos en nuestra clase si queremos utilizar el protocolo UICollectionViewDataSource.

PROTOCOLO UICOLLECTIONVIEWDELEGATE

Por otro lado tenemos el protocolo UICollectionViewDelegate. Este protocolo es el encargado de determinar la apariencia de nuestra UICollectionView. Todos sus métodos son opcionales, por lo que no estamos obligados a implementar ninguno. Sin embargo, ofrece funcionalidades muy útiles como especificar el height de los items, configurar tanto el header como el footer de una UICollectionView, configurar lo que pasa cuando el usuario pulsa en un item, etc.

INDEXPATH

Si has seguido otros tutoriales de EfectoApple, tal vez hayas visto que nos hemos referido a este concepto como NSIndexPath.

Desde la versión 3 de Swift, Apple ha eliminado bastantes prefijos NS de muchas clases y la clase NSIndexPath ha sido una de ellas.

Por tanto, en lugar de trabajar con NSIndexPath, desde esta versión de Swift, trabajarás con IndexPath.

Después de este inciso, vamos a explicar el concepto.

Si recuerdas, lo que hemos comentado en el apartado anterior. Las Collection Views se dividen en diferentes secciones, donde a su vez cada sección puede contener un determinado número de items.

La clase IndexPath es fundamental para que entiendas completamente el trabajo con Collection Views en aplicaciones iOS. Siempre que quieras utilizar alguna Collection View en tu aplicación, tendrás que implementar el método cellForItemAt() y gran parte del funcionamiento de este método se basa en un objeto de la clase IndexPath.

Este objeto tiene dos propiedades:

  • .section
  • .row

A través de estas dos propiedades, podremos situarnos en un punto concreto de una Collection View. Mediante la propiedad .section especificaremos en que sección de nuestra Collection View nos encontramos, mientras que a través de la propiedad .row determinaremos, dentro de esa sección, en que item nos encontramos.

Por tanto si especificáramos lo siguiente:

  • .section = 0
  • .row = 4

Nos encontraríamos en el quinto item de la primera sección de nuestra Collection View. Fácil, ¿no?

7. Añadiendo datos a nuestra Collection View

Ahora que ya conoces el concepto de IndexPath y ya entiendes para que sirven los protocolos UICollectionViewDataSource y UICollectionViewDelegate, podemos utilizarlos para añadir datos a nuestra aplicación.

AJUSTANDO NUESTRA CLASE A LOS PROTOCOLOS

Lo primero que tenemos que hacer es especificar que la clase CollectionViewController.swift se ajustará a los protocolos UICollectionViewDataSource y UICollectionViewDelegate. Este es el primer paso siempre que trabajes con protocolos, determinar que clase será la que implemente el protocolo.

Para hacer esto unicamente tendrás que añadir el nombre de los protocolos a continuación de la declaración de nuestra clase, es decir, tu clase CollectionViewController.swift deberá tener este aspecto:

Después de añadir estos dos protocolos, Xcode te mostrará por pantalla el siguiente error:

 

UICollectionView Protocol Error

 

Este error es completamente normal. Xcode te está avisando que no has implementado los dos métodos obligatorios, que debes utilizar, si quieres que tu clase se ajuste al protocolo UICollectionViewDataSource. Por ahora, no prestes atención a este error, más adelante, al añadir los dos métodos, haremos que desaparezca.

El siguiente paso será declarar la variable donde almacenaremos la información que queremos que muestre nuestra tabla.

CREANDO NUESTRO MODELO DE DATOS

Como los datos que mostraremos en nuestra UICollectionView será un listado de series, utilizaremos un array llamado tvSeries para almacenar ese listado. Por tanto, tendrás que añadir la siguiente constante justo antes del método viewDidLoad():

Perfecto. Ahora que ya tenemos nuestro array con todos los nombres de las series que queremos mostrar por pantalla, es hora de hacer que nuestra Collection View muestre estos datos.

Esto lo haremos en el primer apartado de la segunda parte de nuestro Tutorial sobre UICollectionView.

8. Resumen final

Espero que la primera parte de este tutorial te haya servido para entender como funcionan las UICollectionViews en iOS. Se trata de un elemento fundamental, por lo que es interesante que seas capaz de manejarlas perfectamente.

Aquí tienes un pequeño resumen de los puntos más importantes que hemos visto:

  1. Protocolos en iOS
  2. Los Protocolos UICollectionViewDataSource y UICollectionViewDelegate
  3. Delegados en iOS
  4. IndexPath
  5. Cómo añadir datos a una UICollectionView

9. ¿Qué veremos en la segunda parte del Tutorial?

En la segunda parte del Tutorial de Introducción a UICollectionView continuaremos con el desarrollo de nuestra aplicación e iremos viendo estos apartados:

  1. Funcionamiento completo de una UICollectionView
  2. Realizar navegación en nuestra app utilizando un Navigation Controller
  3. Paso de información entre diferentes View Controllers
  4. Personalización de la Navigation Bar

10. Has terminado la Primera parte de este Tutorial

Has finalizado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes tu recompensa, en forma de video-chorra:

[ejercicio titulo = “¡Celebración!” num=”1″]
https://www.youtube.com/watch?v=jB4BsmcfqNg
[/ejercicio]

11. ¿Donde ir ahora?

Puedes ir a la segunda parte de nuestro Tutorial sobre UICollectionView directamente desde aquí.

Además puedes acceder a más tutoriales disponibles en EfectoApple desde aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Y como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Etiquetas:
Sin comentarios

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.