UISplitViewController
El UISplitViewController es uno de los controladores que nos proporciona Apple para poder manejar dos controladores de vista en una misma pantalla, pero este efecto visual solamente se puede observar en los iPads y los iPhones 6, 7 y 8 (en sus versiones plus cuando se encuentran en modo Landscape). Aplicaciones como Gmail utilizan este controlador para mostrar dos vistas en una misma pantalla, una lista de elementos (lista de correos ) y al costado el detalle del elemento seleccionado (contenido del correo).
Es un controlador muy util para poder administrar y aprovechar el amplio espacio que nos proporcionan estos dispositivos y no solamente pensar en agrandar los elementos.
Comencemos a implementar nuestro UISplitView
Construiremos una aplicación que nos muestre una lista de películas y al seleccionar una de ellas nos muestre el detalle de la misma.
Lo primero es generar un nuevo proyecto y eliminar el UIViewController que tenemos por default y arrastrar hacía nuestro StoryBoard un UISplitViewController, como podemos ver tenemos 2 segues principales que parten desde el UISplitViewController hacía las otras 2 vistas, una como master y otra como detail.
Ahora necesitamos un controlador para nuestro “master view controller” y otro para nuestro “detail view controller”, en nuestro ejemplo lo llamaremos MasterViewController y DetailViewController. En el MasterViewContoller es en donde configuraremos la lista de nuestras películas y en el DetailViewController es donde mostraremos el detalle de la película seleccionada.
Si ejecutamos nuestra aplicación sin realizar ninguna configuración del UISplitView, nuestra aplicación se verá de la siguiente manea:
Iphone:
iPad Portrait/ iPad Landscape
Como podemos ver la primera vista que se muestra tanto en el iPad(modo portrait) como en el iPhone es la vista de detalle y ello es porque no hemos configurado nuestro SplitView.
Empecemos a configurar nuestro SplitView
Toda la configuración la realizaremos en nuestro MasterViewController. Para que el SplitView se pueda visualizar en los iPads cuando se encuentran en orientación portrait debemos de agregar las siguientes líneas de código:
Ahora ejecutamos nuestra aplicación y se verá de la siguiente manera:
Pero si ejecutamos nuestra aplicación en un iPhone nos damos con la sorpresa de que la primera vista que se visualiza es el detalle, bueno para solucionar este problema debemos de agregar el delegado del UISplitView en la función setupSplit(), entonces nuestra función quedaría de la siguiente manera:
Luego configuremos nuestro UISplitViewControllerDelegate:
Con esa sencilla función del UISplitViewControllerDelegate logramos que en los iPhones primero se visualice la vista de nuestro master (lista de películas) y no nuestra vista de detalle. Si volvemos a ejecutar nuestra aplicación en un iPhone tendremos el siguiente resultado:
Listo ya hemos configurado nuestro UISplitView y funciona de manera correcta en ambos dispositivos (iPhone y iPad), pero y ¿cómo logro mostrar el detalle de la película seleccionada?, bueno lo primero que que debemos de realizar es configurar nuestra vista de detalle, colocar los elementos visuales que se quieren mostrar en el detalle (Imagen, título y resumen). Luego debemos de realizar una configuración de nuestros controladores (MasterViewController y DetailViewController) para que al iniciar la aplicación el DetailViewController tenga datos para mostrar, en caso contrario la aplicación no iniciará.
La configuración debe de realizarse en nuestro AppDelegate.
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { }
Listo!!! ejecuta y disfruta de la nueva interface de tu aplicación.
Pero qué pasa si seleccionamos otra película de la lista??, no se actualiza el detalle de la película verdad?… Bueno ello sucede porque no hemos configurado nuestro UITableViewDelegate para que al seleccionar una nueva película, se actualice la información del detalle. Pero y te preguntarás como envío los nuevos datos de la película seleccionada, si no tengo ningún camino entre ambos controladores. Pues para ello haremos uso de los poderosos “Protocolos”, el tema de protocolos es muy extenso por ahora solo nos limitaremos a implementarlo.
Declaramos nuestro protocolo de la siguiente manera, por comodidad prefiero declararlo en la parte superior del controlador donde implementaré el protocolo (fuera de la clase del controlador).
Ya hemos definido nuestro protocolo, ahora debemos de implementarlo en nuestro DetailViewController:
Con ello ya tenemos un camino para poder actualizar nuestra vista de detalle pero necesitamos declarar una variable del tipo del protocolo en nuestro MasterViewController:
weak var delegate: DetailDelegate?
Ahora debemos de otorgarle los permisos a esta última variable que hemos declarado para que pueda realizar los cambios en el controlador del detalle, aprovecharemos nuestra función setupSplitView() y le agrearemos las siguiente línea:
masterViewController.delegate = detailViewController
Con ello la tenemos la conexión y la variable que nos permitirá realizar los cambios en nuestro DetailViewController, ahora en nuestro MasterViewController debemos de configurar nuestro UITableViewDelegate para que cada vez que seleccionemos una nueva película enviar los nuevos datos a mostrarse:
Ejecutemos nuestra aplicación…. selecciona la película que quieras y podrás ver el detalle actualizado. Listo hemos terminado nuestra aplicación!!! ya puedes ir al cine de tu localidad y ofrecer tus servicios para adaptar su aplicación al iPad 😁.
El proyecto completo lo puedes encontrar en el repositorio UISplitViewController en mi GitHub.
