seguintes abaixo. Como curiosidade, este é um termo que a Apple em-
prestou de outras artes, como filmes e teatro.
Scene: termo em inglês para Cena, daquela mesma de teatro ou
TV, que é cada tela em si. No livro utilizaremos o termo em inglês,
pois é algo bem próprio de storyboards e lhe ajudará em futuras
pesquisas sobre o assunto. Na prática Scenes e controladores (vide
abaixo) estão diretamente ligados, não sendo possível ter um sem
o outro.
View Controller: já vimos bastante sobre controladores, e eles for-
mam uma parte fundamental de storyboards, trabalhando direta-
mente em conjunto com scenes. Tudo o que você já aprendeu sobre
controladores no livro se aplica no caso de storyboards.
Segue: é o conceito que defini a transição de uma scene para outra.
O termo em inglês e português são iguais.
5.1
Projeto e conceitos gerais
Crie um novo projeto do tipo Single View Application com as configurações
padrão, chamado DemonstracaoStoryboards, e em seguida abra o arquivo
Main.storyboard. A imagem 5.1 mostra a estrutura inicial de uma storyboard.
74
Casa do Código
Capítulo 5. Storyboards
Figura 5.1: A estrutura inicial de uma storyboard
A seta indicada pelo item 1 informa que este controlador é o ponto de partida
(controlador inicial) da storyboard, o item 2 é a Scene (que é a porção da view),
enquanto que o item 3 é o controlador propriamente dito. Portanto, se você quiser
definir propriedades da Scene (ou da view, utilizando um outro termo) clique em
qualquer área da região branca, indicada pelo número 2. Por outro lado, caso queira
definir propriedades do controlador, como título, opções de transição para outras
Scenes, métricas de simulação de interface e afins, clique na barra preta localizada
na parte inferior da Scene, indicada pelo número 3 na imagem - na prática, o con-
trolador é o elemento amarelo localizado na extremidade esquerda da barra preta.
Neste capítulo será mostrado o funcionamento de storyboards sem focar em de-
talhes de um programa específico - mais adiante no livro construíremos um aplica-
tivo mais completo que também fará uso mais extensivo de storyboards, ajudando
assim a firmar os conceitos. Por enquanto, o importante é focar na maneira como ele
funciona, o que é bastante simples. O aplicativo consiste em uma serie de telas fic-
tícias, com alguns níveis de navegação auxiliados por um por navigation controller,
75
5.1. Projeto e conceitos gerais
Casa do Código
com os quais serão demonstrados as formas de conexão e navegação de um Segue
para outro, como invocar manualmente um Segue, e como retornar para o início da
app sem ter que voltar manualmente tela por tela.
A imagem 5.2 mostra o estado da storyboard do projeto desta capítulo quando
estiver finalizada. A tela foi diminuida de tamanho para poder caber tudo em uma
única imagem. Note que é possível visualizar toda a estrutura de navegação do apli-
cativo, sabendo quando é a tela inicial e os possíveis caminhos de uma tela para outra.
Figura 5.2: Resultado final da storyboard deste capítulo
Ao abrir o arquivo Main.storyboard você encontrará uma tela como a da
imagem 5.1, onde já há um controlador, o qual será a tela (Scene) inicial do apli-
cativo. Insira neste controlador 3 botões, chamados Listar compromissos, Inserir
novo compromisso e Sobre este aplicativo, respectivamente. A imagem 5.3 mostra
o resultado.
76
Casa do Código
Capítulo 5. Storyboards
Figura 5.3: Tela inicial do aplicativo
Nível de zoom e organizar controladores na storyboard
Uma coisa ruim do editor de storyboards é que, quanto mais controladores você
adicionar, mais difícil fica visualizá-los e organizá-los no editor, o que é ainda mais
sofrível caso você tenha um monitor pequeno (ou, pior, apenas a tela do notebook,
como muitas pessoas). O time da Apple ainda precisa trabalhar bastante em diversas
questões de usabilidade.
Utilize os controles disponíveis no canto inferior direito da tela para alterar o
nível de zoom do editor, conforme mostra a imagem [ref-labl sb2.png]. O botão
do meio, representado pelo símbolo de igualdade (=) retorna o zoom a 100%. Já
para arrastar o controlador para outra parte da tela (como quando quiser mudá-lo
de posição, por exemplo) clique e arraste a barra preta.
77
5.1. Projeto e conceitos gerais
Casa do Código
Figura 5.4: Controles de zoom
Construir a Segue Sobre
Como você pode deduzir pela imagem 5.3, existem três Segues para as quais
é possível navegar a partir da Segue inicial. Vamos começar pela Sobre este apli-
cativo. Com o Main.storyboard aberto, abra a Object Library ( View ->
Utilities -> Show Object Library) e arraste para a storyboard um item do
tipo View Controller, e em seguida adicione neste controlador um UILabel com
o texto Demonstração App 1.0. A imagem 5.5 mostra o resultado parcial.
78
Casa do Código
Capítulo 5. Storyboards
Figura 5.5: Resultado parcial com a tela Sobre
Neste ponto temos dois controladores, porém sem qualquer ligação entre eles.