Storyboards en iOS 9

Standard

Hola a todos, desde hace tiempo he venido buscando la forma de aprovechar al máximo la opción que te da las versiones más nuevas de Xcode y iOS para usar Storyboards sobre el ya conocido Interface Builder, para construir las interfaces gráficas de nuestras aplicaciones.

De entrada los storyboards son excelentes para tener una visibilidad de todas las escenas involucradas con tus proyectos, pero a medida que el proyecto va creciendo se presentan ciertos retos:

Problema

storyboard-problem

1. Complejidad. A medida que va creciendo el proyecto nos llenamos de escenas que se pudieran agrupar de alguna manera como módulos.
2. Colaboración y control de versiones. Al tener un sólo archivo con todas las escenas, Main.storyboard, es muy difícil, por no decir imposible, la modificación de dos o más personas de las escenas, se hace un cuello de botella.
3. Desempeño. Conforme crece la complejidad de nuestros proyectos, hemos visto como el performance al cargar el editor de de storyboards se degrada. Esto no debe de ser problema en Macs más “grandes”, pero dado que no pienso cambiar la movilidad de mi Macbook Air, tuve que buscar opciones. 🙂

Antecedentes

A principios de año estuve haciendo leyendo un blog que se me hizo muy interesante, una solución muy elegante para mi problema, usar un Custom Segue. La solución prometía solo que no me agradaba tanto salirme del standard, así que dejé para más adelante el hacer un refactor mayor en todas las aplicaciones para después. Dejo por aquí el blog que te puede servir:

http://spin.atomicobject.com/2014/03/06/multiple-ios-storyboards/

Si no, la única opción que tenías era partir tus storyboards y conectarlo todo por código. Ejemplo:

let storyboard = UIStoryboard(name: "DetailView", bundle: NSBundle.mainBundle())
let viewController = storyboard.instantiateInitialViewController()
if let viewController = viewController {
self.presentViewController(viewController, animated: true, completion: nil)
}

Debido a que con las nuevas actualizaciones a Xcode e IOS han impactado todavía más en el performance, ya no le pude dar más vueltas a la situación, procastinar más pues. Así que antes de lanzar el refactor decidí revisar de nuevo y me topé con una grata sorpresa, Apple decidió incluir aportar una solución a partir de la versión iOS 9, los Storyboards References.

Requisitos

Para este blog estoy usando las últimas versiones de:
– Xcode Version 7.1
– iOS 9.1 (pero funciona desde la 9 en adelante)

Setup del Proyecto

1. New > Project …

3D8378F8-A66C-4DA2-B386-75289472EA3F

2. Configurar el Proyecto

DB5E7013-E89E-4D30-8340-BC468142F8D7

3. Vamos a trabajar en Main.storyboard.

Interfaz de Usuario

4. Dado que ahora tenemos un Tab Bar Controller con dos View Controllers. Podemos hacer la interfaz un poco más interesante y más cercano a lo que tenemos en un proyecto real.
5. Seleccionamos First View y le damos en el menú Editor > Embed In > Navigation Controller.

AE4118EF-4C65-40CE-88C8-FE983D739A74

Refactoring a Storyboards

6. Aquí es donde pasa la magia, esta es una de las nuevas características de Xcode.
Seleccionamos el Navigation Controller y First View y vamos al menú Editor > Refactor to Storyboard.

BF0AD158-9694-40A4-BBA6-DE6B377F4783

7. Le damos en el nombre FirstTab.storyboard. Así queda el contenido.

0B19D853-9281-457E-91FC-9ECDEE42557F

8. En Main.storyboard se hace más simple, en lugar de donde estaban las escenas va a haber una Referencia al Storyboard de FirstTab.

01C3B8C7-3AD6-479F-B741-AA14333C582A

Más opciones. ñ.ñ

9. Esa referencia se puede modificar si agregamos una tercer vista, Third View, con id ThirdView, en FirstTab.storyboard.

57A62010-D6FC-4CDA-93A4-B9025EDABDAA

10. Si volvemos a Main.storyboard podemos cambiar la configuración de Storyboard Reference, en el Attributes Inspector.

D127CDE1-F01A-4C0B-B674-6F9F3F289B03

Aparte de tener el mecanismo de Storyboard Refactor, también está el componente de Storyboard Reference, que puedes seleccionar del Object Library como cualquier otro componente, y posicionarlo, digamos en el Main.storyboard.

F65EF781-6431-46A8-A460-CD623E28E4F7

Ya con esto podemos relacionarlo nuestro View Controller de origen con el Storyboard Reference pulsando CTRL y ligando nuestro controller con la referencia.

F4B8467F-8A98-4B2F-9FBA-4707AE48B34D

Del menú solo seleccionaríamos de la sección de Relationship Segue – view controllers.

6CD7DED6-966B-4A6B-B927-E74EAA3EC49E

Comentarios finales

Los Storyboard References llegaron para quedarse, prácticamente estoy haciendo refactors en todos mis proyectos y ya estoy viendo los beneficios, sobre todo en organización y performance. Espero que esta nueva característica les sirva y la empiecen a aplicar en sus proyectos. Hasta la próxima.

3 thoughts on “Storyboards en iOS 9

Leave a Reply

Your email address will not be published. Required fields are marked *