Introducción a UICollectionView con Swift [Parte 2]

1. Introducción

El tutorial de esta semana corresponde a la segunda parte del Tutorial de Introducción sobre Collection View en Swift.

Si no has revisado la primera parte, te recomiendo que lo hagas. En la primera parte hablamos de conceptos fundamentales que te ayudarán a comprender el funcionamiento de las Collection Views.

Puedes acceder a la primera parte del Tutorial desde aquí.

2. ¿Qué vamos a ver en este tutorial

Terminaremos de desarrollar una aplicación que consta de una Collection View 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 la segunda parte del Tutorial:

• ¿Cómo funcionan las Collection Views?
• ¿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:

 

Con esta sencilla aplicación repasaremos algunos conceptos importantes del Desarrollo iOS.

4. ¿Qué vimos en la primera parte del Tutorial?

Estos son algunos de los puntos principales que vimos en la primera parte de nuestro Tutorial sobre Collection Views:

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 Collection View

Si seguiste la primera parte, recordarás que el siguiente paso que debemos dar es mostrar los datos de nuestra Collection View por pantalla.

¡Vamos a ello!

5. Mostrando Datos en nuestra Collection View

Una vez que hemos creado 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. Para ello utilizaremos los dos métodos del protocolo UICollectionViewDataSource:

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

Añade la implementación de estos dos métodos a tu clase CollectionViewController.swift:

Recuerda que hemos comentado antes, que estos dos métodos no se ejecutan una única vez.

Explicando el código

A continuación tienes la explicación del código de cada uno de los métodos.

El método numberOfItemsInSection(), como hemos dicho, es el encargado de especificar el número de items que mostraremos. En nuestro caso, como queremos mostrar tantos items como elementos hayamos almacenado en nuestro array tvSeries, utilizaremos la propiedad count, que lo que hace es devolver el número de elementos que hay almacenados en un array. De esta forma, si nuestro array tvSeries tiene 24 elementos, nuestro método numberOfItemsInSection devolverá 24. Por tanto nuestra Collection View mostrará 14 items con contenido.

Por otro lado, el método cellForItemAt() crea un objeto item, que hemos llamado cell, de tipo SeriesCollectionViewCell, al que se le asigna el identificador “Item”.

Este identificador, ten en cuenta que debe coincidir con el identificador que le hayamos asignado en el Storyboard al Item del Collection View.

 

 

Posteriormente, lo que hace es asignar a su propiedad itemLabel.text, el texto que queremos mostrar, que en nuestro caso, será el elemento que esté contenido en el array, en la posición indexPath.row. Recuerda que la propiedad indexPath.row indica el item en el que nos encontramos, por lo que la primera vez que se ejecute el método cellForItemAt(), indexPath.row será igual a 0, la segunda será igual a 1, la tercera será igual a 2, de esta forma podremos recorrer nuestro array tvSeries y mostraremos cada vez un elemento distinto del array. No olvides que el método cellForItemAt() se ejecuta tantas veces como items vayamos a mostrar en nuestra tabla.

Por último, en su propiedad itemImage.image, creamos una UIImage con el nombre que obtenemos del array tvSeries. Para que esto funcione, nos hemos asegurado que el nombre de cada imagen coincide con el nombre de cada serie.

Error al Ejecutar nuestra Aplicación

Ahora, prueba a ejecutar tu aplicación y…

…comprobarás que nuestra CollectionView se muestra completamente vacía.

¿Por qué ha sucedido esto?

Si te das cuenta, uno de los protocolos que hemos utilizado se llama UICollectionViewDelegate, lo que nos da la pista de que se trata de un Protocolo de Delegado.

Si no has trabajado antes con ellos, aquí puedes consultar todo lo que necesitas sobre el concepto de Delegado.

Como has podido ver, hay que seguir 3 pasos para implementar un delegado. Nosotros solo hemos realizado 2 pasos:

• Paso 1: OK – En la clase que actuará como Delegado lo hemos indicado específicamente añadiendo el protocolo UICollectionViewDelegate en su cabecera.

 

 

• Paso 2: PENDIENTE – En la clase que delegará sus funciones tendremos que indicar quien será su clase Delegado. En este caso, no hemos especificado todavía en nuestra Collection View quien será su clase delegado.

 

• Paso 3: OK – Hemos implementado las funciones que queremos que realice el delegado a través de los métodos numberOfItemsInSection() y cellForItemAt()

Para que el delegado funcione correctamente no podemos saltarnos el Paso 2. Así que vamos a ello. Vamos a especificar en nuestra Collection View quien será su clase delegado.

Accede al Main.storyboard y dejando la tecla Ctrl pulsada haz clic en el objeto Collection View y arrastra hasta soltar justo encima del View Controller. En el menú flotante que aparece, selecciona delegate.

Repite el proceso de nuevo y selecciona también dataSource.

Puedes ver este proceso de enlazado en el siguiente video:

 

 

Ahora ya puedes ejecutar la aplicación y comprobar que nuestra Collection View muestra correctamente los datos contenidos en el array tvSeries.

 

 

Si pulsas en las imágenes de las series, verás que nuestra aplicación no hace nada. No realiza ningún tipo de navegación. Esta funcionalidad la vamos a añadir en el siguiente punto del Tutorial.

6. Añadiendo navegación

Para realizar la navegación entre la primera pantalla y la segunda, vamos a utilizar un Navigation Controller.

El Navigation Controller es la forma más sencilla que nos ofrece Apple para realizar transiciones entre pantallas de nuestra aplicación.

Para añadirlo a nuestra app, abre el fichero Main.storyboard, selecciona el primer View Controller y haz clic en el menú Editor>Embed In>Navigation Controller.

 

 

Esto añadirá un Navigation Controller que nos permitirá navegar fácilmente entre nuestras pantallas.

Además de esto, debemos crear un segue que permita a nuestra aplicación cambiar de pantalla cuando el usuario pulse en cualquier item de nuestra Collection View.

Para ello, como la transición es entre el Item de la Collection View y nuestra segunda pantalla, dejamos pulsada la tecla ctrl y enlazamos ambos elementos:

 

 

Como has podido ver, en el tipo de segue, hemos elegido Show. Este es el segue estándar para las transiciones con un Navigation Controller.

Después de realizar este paso, si ejecutas la aplicación, verás como, al pulsar sobre la imagen de cualquier serie, nuestra aplicación realiza la navegación hacia la segunda pantalla perfectamente. El problema es que siempre muestra la misma imagen y el mismo título:

 

 

Esto se debe a que no hemos especificado en nuestra aplicación, cual es la imagen y el título que debemos mostrar en la segunda pantalla y siempre se muestra la imagen y el título que tenemos ahora mismo en nuestro Storyboard.

En el siguiente apartado veremos como solucionar esto.

7. Pasando datos de un View Controller a otro

Lo que queremos conseguir, es que si el usuario pulsa en la imagen de Friends, nuestra aplicación muestre la pantalla de detalle con el título y la imagen de dicha serie.

Si pulsa en la imagen de Futurama, deberemos mostrar el título Futurama y la imagen correspondiente a esta serie.

Para poder hacer esto, está claro que debemos de pasar información desde CollectionViewController.swift a DetailViewController.swift.

Concretamente necesitaremos pasar el título de la serie sobre la que pulse el usuario.

Para poder pasar información entre dos View Controllers que están unidos por un segue, tenemos a nuestra disposición este método:

Así que, vamos a añadir el siguiente código al final de nuestra clase CollectionViewController.swift:

Explicando el código

Lo que hacemos en este método es lo siguiente:

• Creamos una variable item que almacene el item del UICollectionViewCell que haya pulsado el usuario.
• Obtenemos el indexPath que tiene ese item.
• Creamos una variable detailVC a partir de nuestro DetailViewController.
• Obtenemos el nombre de la serie que ha pulsado el usuario, a partir de nuestro array tvSeries y el indexPath que hemos conseguido anteriormente. Almacenamos este nombre en la variable detailName de nuestro detailVC.

De esta forma, tendríamos almacenado el nombre de la serie que ha pulsado el usuario en la variable detailName de nuestro DetailViewController.

Lo siguiente que tendríamos que hacer es utilizar la variable detailName para modificar el título y la imagen de la segunda pantalla de nuestra aplicación. Para ello, abre DetailViewController.swift y en el método viewDidLoad() añade lo siguiente:

Como ves, lo único que hacemos es utilizar la variable detailName para modificar el título y la imagen de nuestra pantalla de detalle.

Si ahora ejecutas la aplicación y pulsas en cualquier serie, verás como nuestra app realiza la transición y muestra los detalles de la serie en la que hayas pulsado.

Todo funciona como debe funcionar.

A nivel de diseño, la app no ha quedado del todo bien. El color de la Navigation Controller no es el correcto y la status bar de nuestra aplicación aparece en color oscuro, cuando quedaba mucho mejor si fuera blanca. Además el botón Back aparece en color azul, cuando debería ser blanco.

Todos estos detalles los vamos a corregir en el siguiente apartado del tutorial

8. Corrigiendo algunos detalles

Cambiando el color de nuestra Navigation Bar

Lo primero que vamos a hacer es cambiar el color de nuestra Navigation Bar de blanco a oscuro. Para ello, abre el Main.storyboard y selecciona la Navigation Bar. Haz clic en su propiedad Bar Tint y elige este color: 383838.

Cambiando el color de los títulos de los View Controllers

Al cambiar nuestra Navigation Bar a un color oscuro, debemos cambiar los títulos de nuestros View Controllers a blanco. Para ello, selecciona la Navigation Bar de nuevo y en su propiedad Title Color, elige White.

Cambiando el color de la Status Bar

En este caso, para poder modificar el color de nuestra Status Bar de negro a blanco, tendremos que seguir estos 2 pasos:

1. Haz clic en el nombre de nuestro proyecto en Xcode y selecciona el Target. En la pestaña General, puedes acceder a las opciones del proyecto. En la parte inferior de ese menú verás una opción llamada Status Bar Style. Cambia esa opción de Default a Light.
2. Haz clic en el fichero Info.plist de tu proyecto y añade esta entrada:

View controller-based status bar appearance : NO

 

 

Con estas dos modificaciones, el color de la Status Bar de nuestra aplicación pasará de negro a blanco, tal y como queríamos.

Cambiando el color del botón Back

Si ejecutas la aplicación en este punto, verás como los cambios se han realizado correctamente. Sin embargo, si accedes a la vista detalle, verás como el botón para volver a la vista principal aparece en color azul.

Vamos a cambiarlo a blanco.

Para ello, accede a Main.storyboard, selecciona la Navigation Bar y cambia su propiedad Tint a White.

 

 

Si ejecutas la aplicación verás como todos los detalles de diseño han quedado solucionados.

9. Resumen final

Espero que este tutorial te haya servidor para entender como funcionan las Collection Views 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. Funcionamiento de una Collection View
6. Realizar navegación en nuestra app utilizando un Navigation Controller
7. Paso de información entre diferentes View Controllers
8. Personalización de la Navigation Bar

10. Descarga el Proyecto

 

Consigue el proyecto completo y muchos más con el Pack de Aplicaciones de EfectoApple que puedes descargar totalmente gratis desde aquí.

11. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes el video-chorra de esta semana:

12. ¿Donde ir ahora?

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.