Introdução aos Storyboards [Parte 1]

06 Sea Introdução a Storyboards

1. Introdução

A Apple introduziu os storyboards no lançamento do IOS 5.

Faz muitos anos disso …

No entanto recebi 2 e-mails de leitura de effectapple Comentário que encontraram algumas dificuldades para seguir tutoriais porque eles não dominam os storyboards.

Então esta semana será o assunto sobre o qual vamos focar nosso tutorial.

antes do lançamento Dos Storyboards, os desenvolvedores do IOS só tiveram a opção de criar as interfaces de nossos aplicativos por meio de arquivos com extensão .xib ou diretamente programá-los através de código.

Cada um desses arquivos representou uma tela do nosso aplicativo.

Essa maneira de trabalhar teve suas vantagens (muitas vezes .xib ainda é uma escolha melhor do que storyboards) e, claro, também suas desvantagens.

Portanto, hoje você tem três opções para criar suas interfaces :

1. progrida diretamente via código
2. use arquivos .xib
3. use storyboards

Nesta semana tutorial, vamos ver tudo o que você precisa saber para se sentir confortável usando storyboards e não tem nenhum problema sempre que quiser criar um novo aplicativo iOS.

Vantagens de usar storyboards em seus desenvolvimentos

Talvez mais tarde desenvolva um tutorial sobre como criar interfaces através de código ou diretamente usando .xib.

Como esta semana vamos nos concentrar nos storyboards, vamos ver algumas das vantagens que nos oferecem.

1. eles são perfeitos para ver a navegação completa Fluxo de uma aplicação.
2. permite criar um aplicativo multiview sem ter que gravar praticamente o código.
3. são muito úteis para desenvolvimentos de mídia pequeno.

Como qualquer opção, eles também têm desvantagens.

Eu só vou comentar sobre uma.

Porque toda a nossa interface é concentrada em um \ Arquivo Nico, existem muitos conflitos que complicam o desenvolvimento da equipe de um aplicativo.

No entanto, em muitas equipes de desenvolvimento são a opção preferida ao criar qualquer interface, por isso é importante que seja capaz de trabalhar com eles.

3. O que vamos ver neste tutorial sobre storyboards?

Os pontos mais importantes que veremos são os seguintes:

1. vantagens de usar storyboards em seus desenvolvimentos
2. interface do construtor sabendo
3. o que é o dock?
4. especificando a interface principal do nosso aplicativo
5. seqüência de início de um
6. Como selecionar o controlador de visualização inicial
7. Defina os modos retrato e paisagem do nosso aplicativo
8. Como adicionar um tableviewController, um navegaçãoController e um tabbarcontroller?

Vamos começar, em seguida, dar uma olhada nas fundações básicas dos storyboards.

Criando nosso projeto no Xcode

Para iniciar criar um novo projeto no Xcode, acessando o menu Arquivo > New > Project … e escolha o modelo de aplicativo de visualização única:

Então clique em Next e dê o não Você quer. No meu caso, vou chamar de storyboards_demo. Deixe o resto das opções, como você os vê na imagem:

Clique em Next, salve o projeto Onde você quiser e terminar de pressionar o botão Criar.

Após a criação do projeto, o Xcode mostrará algo assim:

com este projeto de demonstração, veremos tudo o que é necessário para dominar os storyboards.

5. Noções básicas de storyboards

Clique no arquivo principal.Storyboard e veja alguns conceitos que você deve saber:

construtor de interface

A tela que foi aberta ao acessar O principal.Storyboard é conhecido como a interface do construtor e tem a seguinte aparência:

nas primeiras versões do iOS, o construtor de interface foi uma aplicação independente de Xcode e apenas como agora, foi usado para criar as interfaces de nossas aplicações.

A parte esquerda da interface do construtor é conhecida como contorno do documento e nos mostra um Lista de todas as cenas que compõem nossa interface.

Uma cena representa cada uma das telas do nosso aplicativo

dentro de cada cena, todos os objetos que estão adicionando à interface, além de restrições e outros elementos.

Para mostrar ou ocultar o esboço do documento, você pode usar o botão a seguir, localizado na parte inferior esquerda:

Como você vê, em nosso projeto recém-criado, só temos uma tela. Esta tela é representada pelo nosso controlador de visualização.

Na parte superior direita do construtor de interface, temos o Inspetor de Atributo. Através das opções que você oferece, podemos fazer modificações nas propriedades de qualquer objeto que faz parte da nossa interface.

dentro do inspetor de atributo Você tem 6 menus diferentes, onde todos controlam um aspecto diferente de qualquer objeto:

Por outro lado, no canto inferior direito, descarte a biblioteca do objeto:

A partir daqui você pode adicionar qualquer item à interface do seu aplicativo.

teste por exemplo Para arrastar um rótulo, um botão, um campo de texto e um controle deslizante para o seu ViewController:

você olha você, além de adicioná-los à nossa interface, o Xcode adicionou-os à lista de elementos que aparecem no contorno do documento:

sim alecu Tas o aplicativo, fazendo CMD + R, você verá que os elementos que adicionamos à nossa interface são mostrados no simulador.

dock

logo acima de cada viewController você pode ver a doca.

O dock mostra os objetos de alto nível de cada cena. Cada cena terá pelo menos um objeto ViewController, um primeiro objeto de resposta e um objeto de saída, mas também pode ter outros elementos. O dock é simplesmente um documento de contorno em miniatura.

ViewController Evidentemente representa nosso único viewController.

primeira resposta gerencia o foco do nosso aplicativo. Muito provavelmente, praticamente não usá-lo.

Sair pode ser usado para adicionar opções de navegação em nossas interfaces.

interface principal

antes, ao executar nosso projeto , o aplicativo que criamos, já sabia perfeitamente o que o storyboard eu tinha que vincular ao executar o aplicativo.

Isso não tem nenhum mistério, só temos um arquivo principal. que nosso projeto sabe que este é o arquivo que contém nossa interface.

No entanto, em algum outro projeto você pode usar vários storyboards diferentes, por isso é importante que você entenda, onde especificamos o que é o storyboard principal .

Simplificando muito, qualquer aplicativo iOS, por padrão, inicia sua execução na classe AppDelegate.swift.

Clique nesta classe e confira a parte inicial dele:

o atributo @uiaPplicationmain localizado no topo determina que a nossa classe AppDelegate é o ponto de entrada de nosso aplicativo.

É obrigatório que nosso AppDelegate Herdar do Uirpondon e tenha uma propriedade do tipo Uiwindow para que o aplicativo funcione.

Se você olhar para os métodos que aparecem nesta classe, todos estão praticamente vazios. Somente DidfinishLaunchingWithOptions () tem algum código e a única coisa que ele faz é retorna.

Uma vez que a classe inicial de nosso aplicativo for revisada, é provável que o acompanhe. Onde nossa referência de inscrição ao Storyboard? / P>

o arquivo info.Plist

para responder a este você terá que abrir o arquivo info.Plist e localizar a entrada principal do nome da base de arquivo de storyboard.

Quando executamos o aplicativo, o objeto UIAPplication carrega o storyboard especificado nesta chave, inicializa o viewController que é marcado como controlador de visualização inicial (agora vamos ver onde isso é feito) e, em seguida, coloca a visão desse viewController no objeto Uiwindow.

Há outro ponto em que devemos especificar o que é o principal Interface do nosso aplicativo. Se você clicar no nome do projeto, no canto superior esquerdo e você rolar para cima para a seção Informações de implementação, verá como outra opção chamada interface principal, onde aparece o nome do nosso storyboard.

Estas 2 opções são fundamentais para o seu aplicativo para começar corretamente.

Controlador de visualização inicial

Reviamos no ponto anterior, que, uma vez que especificamos, o que será nosso storyboard principal, também devemos determinar qual será o viewController que nosso aplicativo deve carregar primeiro.

para selecionar este, acesso Main.StoreBoard, clique em nosso único viewController e na quarta opção do inspetor de propriedades, você verá a opção do controlador de visualização inicial.

Essa opção especifica que quando o storyboard é carregado, a primeira tela mais RRAÁ Nosso aplicativo será aquele que é selecionado como um controlador de visualização inicial.

Na verdade, se você olhar, você verá que no construtor de interface, apenas para a esquerda do viewController aparece uma seta apontando Para a direita. Se você arrastar essa seta e colocá-lo apontando para outro viewController, este último se tornaria o controlador de visualização inicial.

Como uma conclusão, se em algum momento você tiver problemas com o seu aplicativo, porque você vê que você não carrega o storyboard que deve ou porque a primeira tela que mostra não é a que você deseja, é conveniente que você verifique essas 3 últimas opções que acabamos de ver, porque é mais provável que você tenha modificado qualquer um deles e Não se lembre disso.

Retrato / paisagem

Ao desenvolver um aplicativo, você tem várias opções.

Você pode querer que seu aplicativo seja executado sozinho no retrato ( Quando o dispositivo estiver na posição vertical) ou também na paisagem (quando o dispositivo estiver em uma posição horizontal).

Estas opções e mais você pode controlá-las no menu que vimos antes: Informações de implantação.

Na seção de orientação do dispositivo você pode ver o que E você tem 4 opções para escolher.

Se executarmos o aplicativo, com as opções que você vê na imagem, nosso aplicativo girará sua interface sempre que usamos o iPhone em uma posição vertical com o botão vertical com o botão inicial Abaixo e também na posição horizontal, ambos com o botão home para a direita e para a esquerda.

No entanto, se o nosso dispositivo estiver em uma posição vertical com o botão Home Up, nossa aplicação não seria adaptada para Esta posição, uma vez que a opção de cabeça para baixo é desativada.

Portanto, é isso que cada uma das opções representa:

• retrato: posição vertical com o botão inicial abaixo
• de cabeça para baixo: posição vertical com o botão de casa acima
• paisagem esquerda: posição horizontal com o botão home para a esquerda
• paisagem direita: posição horizontal com o botão home para a direita

quando se trata de desenvolver seu projeto, você deve levar em conta tudo isso.

Adicionando um TableViewController

Por padrão, quando criamos um único aplicativo de visualização, o projeto Xcode cria um viewController em nosso storyboard.

Às vezes, você provavelmente deseja trabalhar diretamente com um tableviewController.

Nestes casos, para substituir uns aos outros, tão rápido quanto seguir estas etapas:

1. Selecione nosso viewController no main.storyboard
2. Remova pressionando a exclusão Key
3. Adicionar um tableviewController da biblioteca de objetos
4. Escolha este TabelaViewController como um controlador de visualização inicial

abaixo, você pode ver esta sequência de ações:

Se você atualmente executa o aplicativo, verá como a visualização inicial que mostra é a de uma tabela vazio.

Adicionando um navegaçãoController

O navegação Controller é a opção perfeita TA para adicionar navegação entre telas quando criamos aplicativos multivist.

Um navegaçãoController deve estar sempre associado a outro controlador. Este controlador pode ser de qualquer tipo: ViewController, tableviewController, CollectionViewController.

Este controlador associado ao navegaçãoController torna-se seu principal controlador, isto é, no seu rootviewController.

Para adicionar um navegaçãoController ao seu aplicativo, você pode seguir algumas etapas semelhantes às que vimos Na seção anterior:

1. Selecione nosso tableviewController no main.storyboard
2. Exclui pressionando a tecla Excluir
3. Adicionar um navegaçãoController do objeto Biblioteca
4. Escolha este navegaçãoController como um controlador de visualização inicial

aqui você tem estas etapas no vídeo:

Como você conseguiu observar, o navegaçãoController foi associado por padrão um tableviewController.

Se você atualmente executa o projeto, você verá como Nosso aplicativo mostra o tableviewController juntamente com uma barra de navegação na parte superior com o título do controlador de exibição raiz, que indica que nosso aplicativo tem um Naveiga Tioncontroller.

Adicionando um tabbarController

los tabbarcontrollers, apenas como navegaçãoController eles permitem que você Para criar aplicativos multivist.

No entanto, se nos números de navegação estabelecermos uma navegação hierárquica, dos pais para crianças, no tabarController os diferentes viewControllers que usamos serão no mesmo nível de navegação.

Para adicionar um tabarController através de um storyboard, seguiremos algumas etapas semelhantes às observadas nas seções anteriores:

1. Selecione nosso navegaçãoController no main.storyboard
2. Exclui-o pressionando a tecla Excluir
3. Selecione o controlador de exibição de raiz do controlador de navegação
4. também removê-lo com a tecla Excluir
5. Adicionar um tabbarcontroller da biblioteca de Objetos
6. Escolha este TabbarController como um controlador de visualização inicial

Estes são os PAs seguido:

Se você executar o aplicativo, você verá como nossa tela principal é agora um tabarController que conta com 2 ViewControllers, identificados como item 1 e item 2.

9. Resumo final

Fizemos uma revisão rápida aos aspectos fundamentais dos storyboards. Vimos como adicionar elementos básicos que nos permitirão criar interfaces complexas.

No entanto, não lidamos com um dos tópicos mais importantes dos storyboards: os membros.

Este conceito vamos vê-lo na segunda parte deste tutorial. Acesse agora à segunda parte daqui.

10. Você terminou o tutorial

Você terminou este tutorial desta semana no Efineple. Como sempre, aqui está sua recompensa. O vídeo Chora esta semana:

11. Onde ir agora?

Acessa a segunda parte do tutorial em storyboards, onde veremos conceitos mais avançados que serão muito úteis, daqui,

você pode acessar mais tutoriais disponível em efetapple daqui.

Se este artigo parecia útil, você me faria um grande favor compartilhando-o em suas redes sociais.