zação e término do aplicativo. É esta classe que inicializa o nosso controller principal
e permite que o usuário possa utilizar o aplicativo.
A classe HWViewController é o nosso controller principal, responsável por
gerenciar diversos eventos do aplicativo
como rotação, navegação para outros
controllers e gerenciamento da view , e é uma das classes com que mais traba-
lharemos ao construir aplicativos para iOS.
Por último, o arquivo Main.storyboard é utilizado para desenhar a tela do
aplicativo. Mais adiante no livro veremos a fundo o funcionamento de storyboards,
por enquanto basta saber que é nele onde as telas serão criadas.
9
2.3. Dando vida ao aplicativo
Casa do Código
2.3
Dando vida ao aplicativo
A ideia deste aplicativo é esconder e mostrar uma tela (view) através do toque em
um botão. No fim, teremos visto:
1) Como customizar a tela do controller principal
2) Como adicionar elementos na tela utilizando o Storyboard
3) Como lidar com eventos de botões
4) Como fazer uma animação simples
Editor visual de telas
Até a versão 3 do Xcode, as telas eram representadas apenas por ar-
quivos com a extensão .xib, e editados através de um programa à parte
chamado Interface Builder. Porém, a partir da versão 4, ele foi integrado
diretamente com o Xcode. Existem diversas formas de integrar a parte
visual de um arquivo .xib com o código-fonte propriamente dito, o que
pode causar um pouco de confusão no início do aprendizado.
Além disso, a partir do Xcode 4.2 a Apple introduziu o conceito de
Storyboards, possibilitando assim a criação e gerenciamento de todas as
telas do aplicativo em um único arquivo, ao invés de diversos xibs. De
qualquer maneira, Xibs continuam sendo uma maneira totalmente vá-
lida de criar interfaces.
Aqui no livro detalharemos os passos necessários para que você não
fique perdido com a quantidade de informações, porém não se apegue a
uma única maneira de desenhar as interfaces, e não desanime caso pareça
difícil no início. Rapidamente você verá que o fluxo é bastante lógico, e
passará a trabalhar com mais produtividade.
Para começar, vamos criar os elementos gráficos que serão manipulados. Para
isso, clique no arquivo Main.storyboard, e você deverá ver uma tela como a da
figura 2.4.
10
Casa do Código
Capítulo 2. Hello World, seu primeiro programa em iOS
Figura 2.4: Tela inicial do Interface Builder
Os componentes que podem ser adicionais na view, como outras views, botões,
seletores de opções, campos de texto e afins estão disponíveis na Object Library,
acessível através do menu View -> Utilities -> Show Object Library,
que por padrão estará localizada no canto inferior direito, conforme a imagem 2.5.
11
2.3. Dando vida ao aplicativo
Casa do Código
Figura 2.5: A Object Library
Nesta lista, selecione o componente
View (que é uma instância da classe
UIView) e arraste-o para a tela do iPhone. Ao fazer isso você notará que o Xcode
tentará adicionar a view de tal forma que preencha todo o espaço disponível, porém
é possível mudar o tamanho sem problemas. Feito isso, selecione o Size Inspector
através do menu View -> Utilities -> Show Size Inspector, que deverá estar localizado
no canto superior da tela. Esta janela permite alterar diversas propriedades do com-
ponente, como tamanho e posição, cor de fundo e transparência. Por hora, mude
o tamanho nos campos Width e Height para 280 e 150, respectivamente, e
posicione-o no X e Y 20. Você pode fazer esta operação com o mouse também.
Repare que tanto o fundo da tela quanto a view que acabamos de adicionar tem
fundo branco - um fantasma numa tempestade de neve. Para trocar a cor de fundo da
view selecione o Attributes Inspector em View -> Utilities -> Show Attributes Inspector, e em seguida mude o campo Background para preto, ou qualquer outra cor que lhe
agradar.
12
Casa do Código
Capítulo 2. Hello World, seu primeiro programa em iOS
Figura 2.6: Localização da cor de fundo do componente, no Attributes Inspector
O próximo passo é adicionar dois botões, um para esconder a view, e outro para
mostrá-la novamente. Os botões são do tipo UIButton. Na paleta de componentes,
eles estão listados como Button. Botões podem ser transparentes também, assim
como utilizar uma imagem como fundo. O primeiro botão será chamado Esconder,
e o segundo será chamado Mostrar. Existem duas formas de fazer isso
pelo Interface
Builder: dando dois cliques em cima do botão e inserindo o texto; ou acessando View
-> Utilities -> Show Attributes Inspector e preenchendo a propriedade Title.
Attributes Inspector
O Attributes Inspector permite definir diversas propriedades dos com-
ponentes, variando de acordo com o tipo de cada um. Por hora, apenas
o título do botão nos interessa.
Após ter feito estes passos, a tela deverá estar como a figura 2.7.
13
2.4. Associe sua tela com o código
Casa do Código
Figura 2.7: Estado da view após adicionar os componentes
2.4
Associe sua tela com o código
Uma vez tendo criado a tela, é necessário associar os componentes com o código