Iniciando com Storyboard no IOS

Uma funcionalidade interessante que facilita a vida do desenvolvedor de IOS para fazer interface do usuário é o StoryBoard.
Foi implementado no XCode 4.2 e SDK 5.0.
O Storyboard, termo conhecido para quem faz filmes e quadrinhos inventado pela Walt Disney, agora utilizado na engenharia de software. Utilizamos diversos gráficos e desenhos para desenhar um fluxo, ajudando no desenvolvimento de fluxo de telas. Para saber mais sobre o StoryBoard, vale uma visita a famosa wikipedia.
Antes desta nova implementação, os desenvolvedores de IOS tinham que utilizar arquivos xib, que gerava um arquivo xml do InterfaceBuilder para cada tela. Agora temos somente um arquivo para diversas telas.
Utilizando o StoryBoard, temos uma visão conceitual de todas as telas da app e a interligação entre as mesmas. A transição entre as telas, conhecidas como "segues",  são criadas através de um simples clique entre as telas.
O único problema que eu vejo na utilização de StoryBoard é em desenvolvimento com vários programadores, fico imaginando como deve ser bacana fazer um merge com o StoryBoard. O código gerado deve ser bem legível para um simples humano. Em alguns casos e telas, talvez seja necessário utilizar o xib, caso tenham muitos desenvolvedores na aplicação.

Vamos em um exemplo básico de utilização do StoryBoard.

Após criar um projeto de testes, vemos que temos um arquivo "Main.storyboard", este é o arquivo que ao clicar em cima, vemos que abre o Interface Builder.
Na imagem abaixo, vemos o arquivo Main.storyboard e temos somente um view controller.
Percebemos também que tem a primeira "flecha", mostrando o início do fluxo e no canto direito, a opção de "Is Initial View Controller" está selecionada.

Neste view controller inicial, vamos criar um label e um botão. Não vou ensinar comandos básicos neste artigo, como criar objetos, etc. Depois de criar os objetos na tela principal, procurar o objeto View Controller e arrastar o objeto ao lado de nosso view controller principal.

Ficando igual na imagem abaixo:

Reparem no canto direito da imagem, onde abaixo tem os objetos disponíveis e colocamos o view controller no storyboard. Acima, alterei o nome do view controller para principal na opção: View Controller -> Title, isso ajuda na organização, alterar também o title do novo controller para "segundo". Na caixa da esquerda, vemos a alteração do nome do view controller para "Principal".

Adicionei um terceiro view controller para este nosso exemplo e defini o Title dele como "Terceiro".

Apertando command - ou +, alteramos o zoom de nosso StoryBoard.

Ficando conforme abaixo:

Agora vamos adicionar um label e um botão na segunda tela e um label na terceira tela.

Para criar um segues, fica apertado o botão "control" clica no botão e arrasta até a tela. No interface builder, você verá que criou uma flecha para a terceira tela.

Após soltar, mostrará uma lista com algumas opções de segues. Selecione a opção Push.

Ficará igual a tela abaixo:

Perceba que alinhamos as telas e os segues foram criados.
Agora vamos executar a aplicação para ver se está funcionando.
Executando a aplicação, ao clicar no botão, irá ocorrer um erro de execução e retornará um erro parecido como abaixo:

 2015-10-05 19:26:54.389 TesteStoryBoard[248:28916] *** Terminating app due to uncaught exception 'NSGenericException', reason: 'Push segues can only be used when the source controller is managed by an instance of UINavigationController.'  
 *** First throw call stack:  
 (0x23e2068b 0x351dae17 0x285f52f9 0x285919b5 0x285917e3 0x28591a55 0x27f1a795 0x27f1a725 0x27f0354b 0x27f1a085 0x27f19cff 0x27f12e57 0x27ee47e5 0x27ee2fdf 0x23de3c3f 0x23de382d 0x23de1b9b 0x23d35249 0x23d35035 0x2ce18ad1 0x27f4a899 0x1185d 0x35926873)  
 libc++abi.dylib: terminating with uncaught exception of type NSException  
 (lldb)   

Este erro ocorreu porque não tem um Navigation Controller.
Para inserir um Navigation Controller, vamos no Menu "Editor", escolhemos a Opção "Embed In" e selecionamos a opção "Navigation Controller".
Você irá reparar que aparecerá um novo componente na apresentação do storyboard, o Navigation Controller.

Build na aplicação e testar a mesma.
Agora ela funcionará perfeitamente.
Fizemos uma navegação simples entre telas e o melhor, sem programar uma linha.
O Interface Builder funciona muito bem para fazer telas. Sendo este a grande facilidade em programar em IOS.
Gostaria que no Android tivéssemos recurso parecido.
Para quem quiser fazer download do código fonte, segue o link do github:
https://github.com/dsromerobr/TesteStoryBoard

Se quiser ver mais recursos do StoryBoard, acompanhe o segundo tutorial:
http://blog.dsromero.com.br/2015/10/iniciando-com-storyboard-no-ios-segunda.html