quarta-feira, 30 de julho de 2014

Primeiros passos com Storyboards no iOS












Crias telas de um aplicativo com agilidade e facilidade nunca foi um trabalho muito fácil ou simples.
Desde que o recurso de storyboards entrou no Xcode, tudo isso mudou.
Quer aprender a criar suas telas com agilidade e facilidade ?
Então vamos lá....




1. Onde estávamos ?

Iniciaremos esse projeto com os mesmos recursos do artigo anterior. (crie o projeto e coloque um botão e pare nessa parte).
Ao clicar em "Main.storyboard" uma tela como a demonstrada abaixo será exibida.
"Toda tela" no iOS vem do tipo ViewController(UIViewController).
Essa seta do lado esquerdo da tela indica por onde o sistema irá começar, portanto essa é a primeira tela que será exibida ao abrir o aplicativo.
Clique em "Navigation Controller" e arraste para dentro da sua storyboard.























2. Criando uma navegação


Ao adicionar uma "Navigation Controller" sua tela ficará com a aparência igual a demonstrada.
Clique na janela "Table View" e pressione "Delete" no seu teclado.























3. Mudando a estrutura de navegação


(1) Clique na seta de "inicialização do aplicativo" e arraste para a Navigation Controller, (2) segure a tecla "command" do seu teclado, clique na "Navigation Controller" e arraste para a ViewController.
Uma janela de dialogo será exibida igual a demonstrada. Clique na opção "root view".






























4. Navegando para outras telas

Siga os seguintes passos: (1) No menu da direita selecione a opção "View Controller" e arraste para a sua storyboard (utilize os controles de zoom conforme indicado), (2) segure o botão "command" do seu teclado, clique no botão e arraste para a View Controller que você acabou de adicionar.
Clique na opção "push" e rode o seu projeto.



























5. O que fizemos ?


Colocamos um controle de navegação no nosso aplicativo !
Quando clicamos no botão e arrastamos para a segunda View Controller, associamos o clique do botão a abertura da segunda tela.
O mais interessante é que quando essa tela abre, ela entende a navegação e adiciona um botão para voltar.











Gostaram dessa introdução aos storyboards ?
Todo o sistema de navegação de um aplicativo pode ser construido dessa forma.
Ao invés de digitar linhas de programação para abrir e fechar telas, é mais fácil definir tudo com poucos cliques. :)