fbpx
 

Implementando un Container View Controller

Implementando un Container View Controller

 1. Introducción

 

¿Sabes en qué consiste un Container View Controller?

Si tienes algo de experiencia en Desarrollo iOS, los habrás usado más de una vez.

Puede que lo hayas utilizado y ni siquiera lo sepas.

Un container view controller te permite combinar contenido de diferentes view controllers, dentro de una única interfaz de usuario.

Imagina que queremos diseñar una aplicación que se divida en 2 partes:

  • Parte superior: Mostraremos un TableView con un listado de países
  • Parte inferior: Un MapView que muestra una serie de ubicaciones

Algo muy parecido a esto:

 

container view controller example

 

Cuando el usuario pulse en un país de la tabla, nuestro mapa se actualizará mostrando la ubicación de dicho país.

Este tipo de aplicación sería un caso perfecto para implementar un container view controller personalizado.

Diseñaríamos algo como esto:

  • Un view controller que controle la lista de países
  • Otro view controller que gestione y muestre las localizaciones en el mapa
  • Un container view controller que gestione la jerarquía y la comunicación entre los child view controllers

Por tanto, el container view controller nos permitiría gestionar dos view controllers al mismo tiempo en la pantalla.

Cada uno de los view controllers que gestionamos desde el container view controller es conocido como Child View Controller.

En el apartado 4 veremos más en profundidad la teoría que debes conocer para trabajar con un container view controller.

Después de repasar los conceptos fundamentales, como siempre, desarrollaremos una aplicación en la que utilizaremos un container view controller personalizado.

 

2. ¿Qué vamos a ver en este Tutorial?

 

Estos son los puntos más importantes en los que nos centraremos:

  • ¿En qué consiste un Container View Controller?
  • ¿Qué ventaja ofrecen los Container View Controller?
  • Implementación Práctica de un Container View Controller
  • Desarrollo de una Aplicación que muestre dos Child View Controllers
  • Como añadir una animación a nuestra App

 

3. La Aplicación que vamos a Desarrollar

 

Vamos a crear una Máquina del Tiempo.

Viajaremos 40 años en el futuro y veremos como le afectará el paso del tiempo a uno de los actores de moda de Hollywood.

Esta aplicación contará con un container view controller y dos child view controllers.

A través de 2 botones, el usuario podrá cambiar de un child view controller a otro.

Además añadiremos una animación para que suavice el cambio entre view controllers.

Este será el aspecto que tendrá nuestra aplicación al terminar:

 

container view controller app demo

 

Se trata de una aplicación muy sencilla, que cambia entre un view controller y otro. Lo interesante del proyecto es que la desarrollaremos poniendo en práctica todo lo que aprenderemos sobre los Container View Controller.

 

4. Teoría sobre los Container View Controller

 

¿Qué es un Container View Controller?

 

Es un elemento que nos permite combinar contenido de diferentes view controllers, dentro una única interfaz.

Facilitan la navegación y permiten crear nuevos tipos de interfaces, basándonos en contenido ya existente.

Si recuerdas, en la introducción hemos mencionado que es posible que hayas utilizado algún container view controller sin ni siquiera saberlo. Esto es debido a que hay elementos muy comunes que entran dentro de la categoría de container view controller y son estos:

  • UInavigationController
  • UITabBarController
  • UISplitViewController

 

Estoy seguro que has utilizado alguno de ellos en cualquier desarrollo.

Un container view controller es como cualquier otro view controller. Gestiona una vista principal y algo de contenido. La diferencia es que un container view controller obtiene parte de su contenido de otros view controllers. Ese contenido proviene de las views de otros view controllers, que además están incluidas en su propia jerarquía de vistas.

Ya comentamos al principio del tutorial, que cada uno de los view controllers que gestionamos desde el container view controller es conocido como Child View Controller.

El container view controller establece el tamaño y posición de cualquier child view controller, pero es el propio child view controller quien gestiona el contenido que se muestra en su view.

La implementación de un container view controller es bastante sencilla y la veremos en la parte práctica del tutorial.

 

¿Qué ventaja nos ofrece trabajar con un Container View Controller?

 

Si no tienes mucha experiencia en Desarrollo iOS, siempre suelo recomendar que programes tus aplicaciones utilizando el patrón MVC.

Creo que utilizar MVC es la mejor forma de comprender el funcionamiento de los pilares fundamentales del Desarrollo iOS desde cero.

Sin embargo, el MVC tiene un problema conocido como Massive View Controller. De forma muy simplificada, este problema consiste en sobrecargar los view controllers de funcionalidades, haciendo que se conviertan en monstruos difíciles de manejar.

Si te interesa ampliar información sobre este patrón de diseño y el problema Massive View Controller, puedes empaparte de estos conceptos en el Tutorial sobre MVC.

Una de las opciones que puede ayudarnos a solucionar parte de este problema, es utilizar un container view controller, cuando veamos que la interfaz de nuestra aplicación va a gestionar diferentes funcionalidades en la misma pantalla.

Si recuerdas, la aplicación de ejemplo que vimos en el primer apartado de este tutorial, era un caso claro de una interfaz donde se mezclaban dos funcionalidades diferentes.

Podríamos desarrollar esa aplicación sin usar ningún container view controller. Podríamos gestionar tanto la parte de la tabla como la parte del mapa en el mismo view controller.

Sin embargo, esto supondría aumentar la complejidad de nuestro view controller y sobre todo, incumplir uno de los principios básicos del diseño de software: Cada clase debe tener una única responsabilidad.

Si no conoces los 5 principios básicos de la POO, descritos por Robert C. Martin, puedes revisarlos aquí.

Por estos motivos, la principal ventaja que nos ofrecen los container view controller es la de mantener los view controllers lo más ligeros posibles. No es necesario que complejas interfaces se gestionen desde un único view controller. Usando un container view controller podemos dividir una interfaz en componentes funcionales, gestionando cada uno de ellos en un view controller independiente.

 

5. Implementación Práctica de un Container View Controller

 

Cuando trabajes con un container view controller en tu proyecto, tendrás que establecer una relación entre él y sus child view controllers.

Puedes establecer estas relaciones a través de Interface Builder o directamente por código.

En la aplicación que vamos a desarrollar, veremos como hacerlo a través de las dos opciones.

Sin embargo, antes de de ponernos con ella, es conveniente ver cual es la teoría de como añadir y eliminar un child view controller de nuestro container mediante código.

 

Añadiendo un Child View Controller

 

El proceso para añadir un child view controller a un container view controller consta de estos pasos:

  1. Llamar al método addChildViewController: para especificar que ahora nuestro container view controller gestiona la view del child view controller
  2. Añadir la view del child view controller a la jerarquía de vistas del container (Recuerda siempre especificar tamaño y posición del frame del child view controller)
  3. Agregar las constraints que necesitemos para gestionar el tamaño y posición de la view del child view controller
  4. Llamar al método didMove(ToParentViewController:) del child view controller

 

Eliminando un Child View Controller

 

Por otra parte, aquí tienes el proceso de eliminar un child view controller de un container view controller:

  1. Llamar al método willMove(toParentViewController:) pasándole nil
  2. Eliminar cualquier constraint que hayamos configurado en la view del child view controller
  3. Eliminar la view del child view controller de la jerarquía de vistas del container
  4. Llamar al método removeFromParentViewController() para finalizar la relación entre el container y el child view controller

 

No te preocupes, si ahora mismo, no tienes muy claro estos 2 procesos, los vamos a ver paso a paso en nuestra aplicación.

Ahora si, ya podemos echar un vistazo al proyecto que vamos a desarrollar.

 

6. Nuestro Proyecto de Inicio

 

Para poder centrarnos en las partes importantes del Tutorial, he preparado un proyecto de inicio, que utilizaremos como base para el desarrollo de la aplicación.

Puedes descargar el proyecto de inicio desde aquí.

Una vez que lo has bajado, descomprímelo y ábrelo con Xcode.

Se trata de un proyecto muy sencillo.

Accede a Main.storyboard y verás que la interfaz consta de lo siguiente:

  • Un content view controller
  • Un child view controller con la imagen actual
  • Un child view controller con la imagen del año 2057
  • Dos botones

 

container view controller storyboard app

 

El funcionamiento es muy sencillo. Cuando el usuario pulse en el botón Año 2057, nuestro content view controller eliminará el child view controller que muestra la imagen actual y añadirá el child view controller que muestra la imagen del año 2057.

Esta aplicación tan simple nos permitirá llevar a la práctica el concepto de container view controller y como añadir y eliminar cualquier child view controller.

Abre la clase ViewController.swift y esto será lo que encontrarás:

 

container view controller initial proyect

 

Tenemos 3 variables:

  • contentVC: Gestiona nuestro content view controller
  • youngViewController: Gestiona el child view controller con la foto actual
  • oldViewController: Gestiona el child view controller con la foto del año 2017
  • activeViewController: Es una referencia al child view controller que se encuentre activo en cada momento

 

Si te fijas, la variable activeViewController dispone de una cláusula didSet. Esto nos permite que cuando se modifique su valor, se realice una llamada automática a los métodos removeInactiveViewController() yupdateActiveViewController().

También tenemos algunos métodos vacíos:

  • configureApp(): Nos servirá para referenciar los child view controllers en el storyboard
  • @IBAction youngButton: Se ejecutará cuando el usuario pulse el botón Año 2017
  • @IBAction oldButton: Se ejecutará cuando el usuario pulse el botón Año 2057
  • removeInactiveViewController(inactiveViewController:): Eliminará el child view controller que deje de estar activo de nuestro container view controller
  • updateActiveViewController(): Añadirá el child view controller a nuestro container view controller

 

Nuestro objetivo en este tutorial será el de ir rellenando estos métodos, para conseguir que nuestra aplicación funcione perfectamente.

Vamos con ello.

 

7. Desarrollando el Proyecto

 

El método de Configuración y los Botones

 

Vamos a empezar por completa el método configureApp() y los botones youngButton y oldButton.

Lo que queremos hacer en el método configureApp() es simplemente, referenciar a nuestro storyboard e inicializar las variables youngViewController y oldViewController a partir de los dos child view controllers que hemos creado en el storyboard.

Para ello, haremos lo siguiente:

Como puedes ver, hemos inicializado los controllers a partir de sus identificadores, que tenemos configurados en el storyboard.

Lo siguiente que haremos será rellenar los métodos youngButton() y oldButton():

Lo único que hacemos es asegurarnos, que cuando el usuario pulse uno de los botones, modificamos el activeViewController al child view controller correspondiente.

 

Añadiendo y Eliminando los Child View Controller

 

El siguiente paso será rellenar los métodos removeInactiveViewController() y updateActiveViewController(). Lo único que tendremos que añadir a estos métodos, serán los pasos que hemos visto en la parte teórica del tutorial.

Por otro, lado nuestro método updateActiveViewController() deberá tener esta pinta:

Si ahora ejecutas la aplicación, verás como funciona correctamente.

Tras cada pulsación a uno de los botones, se realiza el cambio entre un child view controller y otro.

Sin embargo te habrás dado cuenta, que el cambio se realiza de forma brusca, sin ningún tipo de animación.

Vamos a ver como suavizar este comportamiento, añadiendo una animación en el cambio de un child view controller a otro.

 

8. Añadiendo la animación a nuestra App

 

El objetivo de este tutorial no es revisar como realizar animaciones en aplicaciones iOS, por lo que lo vamos a verlo rápidamente.

Para poder hacer una animación en la que nuestra vista aparezca poco a poco tendremos que jugar con la propiedad alpha de la misma. Haremos que pase de un alpha = 0.0 a un alpha = 1.0. Además, especificaremos que la animación deberá durar 5 segundos. De esta forma, iOS se encarga de realizar la transición de 0.0 a 1.0 en esos 5 segundos.

El código es muy sencillo y lo añadiremos al método updateActiveViewController(), por lo que el método quedará así:

Ahora, vuelve a probar la aplicación y al ejecutarla y pulsa el botón del Año 2057, verás como la transición entre un child view controller y otro se realiza de forma suave, tal y como queríamos.

 

9. Resumen Final y Descarga del Proyecto

 

Hemos visto en que consisten los container view controller, cuales son las ventajas que nos aportan y además hemos desarrollado una aplicación donde implementamos un container view controller que muestra dos child view controllers diferentes.

Espero que te pueda servir siempre que necesites integrar elementos de este tipo en tus aplicaciones iOS.

Puedes descargar el proyecto completo que hemos desarrollado en este tutorial desde aquí.

 

10. Has terminado el Tutorial

 

Espero que hayas disfrutado este tutorial y sobre todo te sirva para poder integrar cualquier container view controller en tus proyectos iOS.

Como siempre, aquí tienes el video-chorra de esta semana.

 

 

11. ¿Donde ir ahora?

 

Si quieres ampliar información sobre los Container View Controllers puedes hacerlo entrando aquí.

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. Así podrá llegar a mas gente que pueda estar interesada en este tema.

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

Recuerda, cada lunes un nuevo Tutorial sobre Desarrollo iOS.

Gracias por leer EfectoApple.

 

5 Comentarios
  • Yesid Hernandez
    Publicado a las 00:04h, 05 diciembre Responder

    Buenas tardes amigo, el tutorial funciona perfectamente, pero tengo una duda, como puedo enviar variables desde el View padre a los hijos que se cargan el container viwe?

    • Eric
      Publicado a las 10:37h, 17 enero Responder

      Tienes que crear un nuevo archivo Swift, asignarle la clase y podrás trabajar en el.

  • César Vilela
    Publicado a las 17:52h, 15 mayo Responder

    Hola, excelentemente explicado, tengo poquito tiempo en Swift, y trabajo con ViewControllers y JSON para extraer datos del server. Y se me ocurrió hacer algo así, y encontré el Container, y mejor esta página, así que haré la prueba con el container y subview, porque debo mostrar información con 4 botones pero con los mismo datos iniciales.

  • Raúl
    Publicado a las 15:39h, 14 junio Responder

    Hola.
    Excelente tutorial, como todos los de esta página. Tengo una duda, ¿si yo quisiera mostrar dos TableView en la misma vista (uno ocupando la mitad izquierda de la pantalla y otro la mitad derecha), tendría que hacerlo usando el Container View Controller?

  • Aquiles
    Publicado a las 18:54h, 14 marzo Responder

    ¡Excelente! Muy buena didáctica. Gracias.

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.