Esse artigo lhe guiará pelo processo de criação de uma interface com o usuário simples e o acréscimo de comportamentos personalizados que transforma a interface em um aplicativo funcional. O aplicativo final poderá ser executado tanto no iPhone quanto no iPad.
Ese artigo irá mostrar como:
-
Usar o XCode para criar e gerenciar um projeto
-
Identificar as partes chave de um projeto do XCode
-
Executar seu aplicativo no simulador do iOS
-
Criar um interface com o usuário básico no storyboard
-
Visualizar a sua interface
-
Adotar o layout automático para adicionar flexibilidade a sua interface
Depois de você ter completado todos os passos desse artigo, você terá um aplicativo que deve se parecer com isso:

Esse artigo usa o Xcode 6.1.1 e o iOS SDK 8.1, assim se você estiver usando uma outra versão, pode perceber algumas diferenças nas telas mostradas.
Crie um novo projeto
O Xcode inclui diversos templates embutidos para o desenvolvimento de tipos comuns de aplicativos iOS, como jogos, aplicativos baseados em abas, tabelas e outros. A maioria desses templates possui uma interface pré-configurada e arquivos de código fonte. Nesse artigo, usaremos o template mais básico: o Single View Application.
Trabalhar com o template Single View Application lhe ajudará a entender a estrutura básica de um aplicativo iOS e como o conteúdo é mostrado na tela. Depois que tiver aprendido como tudo funciona, você pode usar um dos outros templates em seu próprio projeto.
Para criar um novo projeto
-
Abra o Xcode a partir do diretório
/Applications
.A tela de boas vindas do Xcode é mostrada.
Se uma janela de projeto aparecer ao invés da janela de boas vindas, não se preocupe – você provavelmente criou ou abriu um projeto do Xcode anteriormente. Apenas o use o item do menu do próximo passo para criar o projeto.
-
Na tela de boas vindas, clique em “Create a new Xcode project” (ou selecione File > New > Project).
O Xcode abre uma nova janela e mostra uma caixa de diálogo onde você deve escolher um template.
-
Na seção iOS no lado esquerdo da caixa de diálogo, selecione Application.
-
Na área principal da caixa de diálogo, clique em Single View Application e em seguida clique em Next.
-
Na caixa de diálogo que aparece, dê um nome para seu aplicativo e selecione opções adicionais para seu projeto.
Use os seguintes valores:
-
Product Name:
ToDoList
O Xcode usa o nome do produto que você informar para nomear seu projeto e aplicativo.
-
Organization Name: O nome de sua empresa ou o seu próprio nome. Você pode deixar esse campo em branco.
-
Organization Identifier: O identificado de sua empresa, se possuir um. Se não possuir use
com.example
. -
Bundle Identifier: Esse valor é gerado automaticamente baseado no nome do produto e no identificador de sua empresa.
-
Language: Objective-C
-
Devices: Universal
Um aplicativo universal pode ser executada tanto no iPhone quanto no iPad.
-
Use Core Data: Não selecione essa opção.
-
-
Clique em Next.
-
Na caixa de diálogo que aparece, escolha um local para salvar o seu projeto e clique em Create.
O Xcode abre seu novo projeto em janela chamada workspace window:
Você pode notar um avido que diz “No signing identity found.” Esse aviso significa que você ainda não configurou o Xcode para o desenvolvimento iOS, mas pode completar esse artigo sem fazer isso. No final desse texto, há um link que lhe ajudará a configurar o Xcode para continuar o desenvolvimento iOS.
Familiarize-se com o XCode
O Xcode inclui tudo o que você precisa para criar um aplicativo. Ele não apenas organiza os arquivos que criarão ele, fornece editores para o código e elementos da interface, permite que você compile e execute seu aplicativo, e inclui um poderoso depurador integrado.
Use alguns momentos para se familiarizar com a área de trabalho do Xcode. Você usará os controles identificados na janela abaixo no decorrer desse artigo. Clique nos diversos botões para sentir como eles funcionam. Se quiser mais informações sobre uma parte da interface, leia os tópicos de ajuda – para encontra-los, clique com a tecla Control pressionada em uma área do Xcode e escolha o tópico desejado no menu de atalho que aparece.

Execute o simulador iOS
Como você baseia seu projeto em um template do Xcode, o ambiente básico é configurado automaticamente para você. Mesmo que você ainda não tenha escrito nenhum código, você pode compilar e executar o template Single View Application sem nenhuma configuração adicional.
Para compilar e executar seu aplicativo, use o módulo iOS Simulator incluido no Xcode. Como o nome implica, o iOS Simulator lhe dá um ideia de como seu aplicativo deve ficar e se comportar quando for executado em um dispositivo iOS.
O iOS Simulator pode modelar vários tipos diferentes de hardware – iPad, iPhone com tamanhos de tela diferentes, e assim em diante – de forma que você pode simular seu aplicativo em todos os dispositivos para os quais está desenvolvendo. Nesse artigo, usaremos a opção iPhone 6.
Para executar sua aplicação no simulador do iOS
-
Certifique-se de que iPhone 6 está selecionado no menu Scheme da barra de ferramentos do Xcode.
Vá em frente e dê um olhada no menu para ver quais as outras opções de hardware estão disponíveis no iOS Simulator.
-
Clique no botão Run, localizado no canto superior esquerdo da barra de ferramentos do Xcode.
Alternativamente, selecione Product > Run (ou pressione as teclas Command-R).
Se você estiver executando um aplicativo pela primeira vez, o Xcode perguntará se você gostaria de ativar o modo desenvolvedor em seu Mac. O modo de desenvolvedor permite que o Xcode acesse alguns recursos de depuração sem a necessidade de solicitar sua senha a cada vez. Decida se quer ativar esse modo e siga os avisos. Se você escolher não ativa-lo, pode ser necessário informar sua senha mais adiante. Esse artigo assume que o modo desenvolvedor está ativo.
-
Observe a barra de ferramentas do Xcode a medida que o processo de compilação segue.
O Xcode exibe mensagens sobre o processo de compilação no activity viewer, que fica no meio da barra de ferramentas.
Depois que o Xcode termina de compilar o seu projeto, o iOS Simulator inicia automaticamente. Ele pode levar alguns momentos para iniciar pela primeira vez.
O iOS Simulator é aberto no modo iPhone, assim como você especificou. Na tema simulada do iPhone, o iOS Simulator abre seu aplicativo. Antes do aplicativo ser aberto, você verá uma tela de abertura com o nome do aplicativo, ToDoList.

Em seguida, você deve ver algo como isso:

Nesse momento, o template Single View Application não faz muito – apenas exibe um tela vazia. Outros templates possuem um comportamento mais complexo. É importante entender um template antes de estende-lo para criar seu próprio aplicativo. Rodar seu projeto no iOS Simulator com nenhum modificação é uma boa forma de começar a entender o projeto a ser desenvolvido.
Quit iOS Simulator by choosing iOS Simulator > Quit iOS Simulator (or pressing Command-Q).
Revise o código fonte
O template Single View Application vem acompanhado de alguns arquivos de código fonte que configuram o ambiente da aplicação. A maior parte do trabalho é feito pela função UIApplicationMain
, que é chamada automaticamente no arquivo main.m
de seu projeto. A função UIApplicationMain
cria um objeto aplicativo que configura a infraestrutura de seu aplicativo para que ele funcione com o sistema iOS. Isso inclui a criação de um run loop que entrega os eventos de entrada de seu aplicativo.
Você não irá lidar com o arauivo main.m
diretamente, mas é interessante saber como ele funciona.
Para revisar o código fonte main.m
-
Certifique-se de que o navegador do projeto está aberto na área de navegação.
O project navigator exibe todos os arquivos de seu projeto. Se ele não estriver aberto, clique no botão na extremidade esquerda da barra de seleção de navegação (Alternativamente, exiba-o selecionando View > Navigators > Show Project Navigator).
-
Abra a pasta Supporting Files no project navigator clicando no triângulo ao lado dele.
-
Selecione
main.m
.O Xcode abre o arquivo de código fonte no editor da área da janela.
Alternativamente, dê um clique duplo sobre o arquivo
main.m
para abri-lo em uma janela separada.
O arquivo main.m e a função UIApplicationMain
A função main
no arquivo main.m
chama a função UIApplicationMain
dentro de um bloco autorelease.
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
}
A sentença @autoreleasepool
dá suporte ao gerenciamento de memória de seu aplicativo. Automatic Reference Counting (ARC) torna o gerenciamento de memória mais fácil pois faz com que o compilador mantenha um registro de quem é o dono de um objeto; O @autoreleasepool
é parte dessa infraestrutura de gerenciamento de memória.
A chamada para UIApplicationMain
cria dois componentes iniciais importantes de seu aplicativo:
-
Uma instância da classe
UIApplication
, chamada de application object.Esse objeto gerencia o loop de eventos do aplicativo e coordena outros comportamentos de alto nível dele. A classe
UIApplication
, definida no framework UIKit, não requer que você escreva código adicional para que esse trabalho seja feito. -
Uma instância da classe
AppDelegate
, chamada de app delegate.O Xcode cria essa classe para você como parte da configuração do template Single View Application. O app delegate cria as janelas onde o conteúdo do aplicativo é desenhado e fornece um local onde transições de estado são respondidas dentro do aplicativo. O app delegate é o local onde você escreve seu código personalizado. Como todas as classes, a classe
AppDelegate
é definida em dois arquivos de código fonte: o arquivo de interface,AppDelegate.h
, e o arquivo da implementação,AppDelegate.m
.
Quando seu aplicativo é iniciado, o application object chama métodos predefinidos do app delegate para dar ao seu código personalizado uma chance de fazer seu trabalho – aqui é onde o comportamento interessante de um aplicativo é executado.
Os arquivos de código do App Delegate
Para entender a função do app delegate com mais profundidade, visualize os arquivos de código fonte dele, AppDelegate.h
(o arquivo da interface) e AppDelegate.m
(o arquivo da implementação). Para visualizar o arquivo da interface do app delegate, selecione AppDelegate.h
no project navigator. A interface do app delegate contém uma única propriedade: window
. Com essa propriedade o app delegate consegue gerenciar a janela na qual todos o conteúdo de seu aplicativo é desenhado.
Em seguida, visualize o arquivo da implementação do app delegate selecionando AppDelegate.m
no project navigator. A implementação do app delegate contém esqueletos de métodos importantes. Esses método pré-definidos permitem que a aplicação converse com o app delegate. Durante um evento da execução significativo – por exemplo, a inicialização do aplicativo, avisos de pouca memória, e encerramento do aplicativo – o objeto do aplicativo chama o método correspondente do app delegate, dando a você uma oportunidade de responder ao evento apropriadamente. Você não precisa fazer algo especial para garantir que esses métodos sejam chamadas na hora certa – o objeto do aplicativo lida com essa parte para você.
Cada um desses método automaticamente implementados tem um comportamento padrão. Se você deixar a implementação gerada vazia ou remover o método do arquivo AppDelegate.m
, você obterá o comportamento padrão toda vez que esse método for chamado. Use esses esqueletos para inserir código personalizado que você queira que seja executado quando os métodos são chamados. Nesse artigo, não precisaremos fazer nenhuma alteração no arquivo AppDelegate.m
.
Abra seu Storyboard
Você está pronto agora para trabalhar no storyboard de seu aplicativo. Um storyboard é uma representação visual da interface com o usuário do aplicativo, mostrando telas de conteúdo e as transições entre elas. Você usa storyboards para definir o fluxo – ou história – que seu aplicativo segue.
Para abrir seu storyboard
-
No project navigator, selecione
Main.storyboard
.O Xcode abre o storyboard no Interface Builder— que é o editor visual da interface — na área de edição. O plano de fundo do storyboard é o canvas. Você usa o canvas para adicionar e arrumar os elementos da interface.
Seu storyboard deve ser parecido com isso:

Neste ponto, o storyboard de seu aplicativo contém uma cena, que representa uma tela de conteúdo de seu aplicativo. A seta que aponta para o lado esquerdo da cena no canvas é o storyboard entry point, o que significa que esta é a cena que é carregada inicialmente quando o aplicativo é iniciado. Nesse momento, a cena que você visualiza no canvas contém um único view que é gerenciado por um view controller (controlador de views). Você aprenderá mais sobre a função de views e views controllers mais adiante nesse artigo.
Quando você executa um aplicativo no iPhone 6 do iOS Simulator, o view desta cena é o que você vê na tela do dispositivo. Mas quando você olha a cena no canvas, você notará que ele não possui as dimensões exatas da tela do iPhone 6. Isso se deve ao fato de que o canvas é uma representação geral de sua interface que se ajusta automaticamente de forma que se adeque ao contexto de cada dispositivo e orientação. Você aprenderá como tornar sua interface adaptativa mais adiante.
Construa uma interface básica
Chegou a hora de construir uma interface básica para a cena que permite que você adiciona um novo item na sua lista de afazeres.
O Xcode fornece uma biblioteca de objetos que você pode adicionar ao storyboard. Alguns desses itens são elementos de interface que pertencem a um view, como botões e campos de texto. Outros, como view controllers e reconhecimento de gestos, definem o comportamento de seu aplicativo mas não aparecem na tela.
Para ser capaz de adicionar um item a sua lista, você precisa adicionar um campo de texto, o elemento de interface que permite que o usuário insira uma única linha de texto.
Para adicionar um campo de texto à sua cena
-
Abra a biblioteca de objetos (Object library).
A biblioteca de objetos (Object library) aparece na parte de baixo da área de utilitários. Se você não consegue visualizar ela, clique em seu botão, que é o terceiro botão da esquerda da barra de seleção de bibliotecas (Alternativamente, exiba ela selecionando View > Utilities > Show Object Library).
Uma lista aparece mostrando nome, descrição e representação visual de cada objeto.
-
Na biblioteca, digite
text field
no campo de filtro para encontrar o objeto Text Field rapidamente. -
Arraste um campo de texto da biblioteca de objetos para sua cena.
Se você precisar, pode aumentar o zoom usando a opção do menu Editor > Canvas > Zoom.
-
Arraste o campo de texto de forma que ele fique centralizado verticalmente e alinhado com a margem esquerda da cena.
Para de arrastar o campo de texto quando você visualizar algo como isso:
As guias de layout em azul lhe ajudam a posicionar o campo de texto. Guias de layout são visíveis apenas quando você arrasta ou redimensiona objetos próximos a ela; elas desaparecem quando você solta o campo de texto..
-
Se necessário, clique no campo de texto para revelar os manipuladores de redimensionamento.
Você redimensiona um elemento da interface arrastando os resize handles (manipuladores de redimensionamento), que são pequenos quadrados brancos que aparecem nas bordas dos elementos. Você revela os manipuladores quando seleciona os elementos. Nesse caso, o campo de texto já deve estar selecionado porque você acabou de arrasta-lo. Se o seu campo de texto está igual a imagem abaixo, você pode redimensiona-lo; se não quer faze-lo, selecione o canvas.
-
Redimensione os cantos esquerdo e direito do campo de texto até que você visualize três guias de layout verticais..
Para de redimensionar o elemento quando você visualizar algo como isso:
Apesar de você ter um campo de texto em sua cena, não nenhuma instrução sobre o que deve ser informado nele. Use o atributo placeholder do campo de texto para avisar o usuário de que ele deve informar uma tarefa no campo.
Para configurar o texto padrão do campo de texto
-
Com o campo de texto selecionado, abra o Attributes inspector
da área de utilitários.
O Attributes inspector aparece quando você seleciona o quarto botão da esquerda na barra de inspetores. Ele permite que você edite atributos de um objeto de seu storyboard.
-
No Attributes inspector, encontre o campo chamado Placeholder e digite
New to-do item
. -
Pressione Return para exibir o novo texto padrão no campo de texto.
Visualize a sua interface
Visualize seu aplicativo periodicamente para checar se tudo está ficando do jeito esperado. Você pode visualizar a interface de seu aplicativo usando o assistant editor, que exibe um editor secundário lado a lado do principal.
Para visualizar a sua interface
-
Clique no botão Assistant na barra de ferramentas do Xcode para abrir o assistant editor.
-
Na barra de seleção do editor, alterne o assistente de Automatic para Preview.
-
Se quiser ter mais espaço para trabalhar, esconda a área de utilitários e o navegador do projeto clicando nos botões Navigator e Utilities da barra de ferramentas do Xcode.
Sua janela Xcode deve ficar parecida com isso:
Como você pode ver, o campo de texto não está totalmente certo. Ele se estende para fora do canto da tela. A interface que você especificou em seu storyboard parece certa, então por quê isso está acontecendo na visualização do iPhone?
Como vimos anteriormente, você está criando uma interface adaptativa que é escalonada para diferentes tamanhos de iPhones e iPads. A cena que visualiza por padrão em seu storyboard mostra uma versão generalizada de sua interface. Aqui, você precisará especificar como a interface deve ser ajustada para dispositivos específicos. Por exemplo, quando a interface é encolhida para o tamanho de um iPhone, o campo de texto deve ser encolhido. Quando a interface é esticada para o tamanho de um iPad, o campo de texto deve ser esticado. Você pode especificar essas regras de interface usando o layout automático.
Adote o layout automático
O Auto Layout é um mecanismos de layout poderoso que lhe ajuda a projetar layouts adaptativos com facilidade. Você descreve sua intenção para o posicionamento dos elementos em um cena e então deixa o mecanismo determinar como implementar essa intenção da melhor forma possível. Você define sua intenção usando constraints—regras que explicam onde um elemento deve ser posicionado relativamente a outro, que tamanho deve ter, ou quais entre dois elementos deve ser encolhido primeiro quando algo reduz o espaço disponível para cada um deles.
O campo de texto na nossa interface deve aparecer a uma quantidade fixa de espaço da parte superior da tela do dispositivo e alongar-se na direção das margens horizontais, para qualquer dispositivo.
Para posicionar o campo de texto usndo o layout automático
-
Em seu storyboard, selecione o campo de texto.
-
No canvas, clique no ícone Auto Layout Align.
-
Selecione as caixas de verificação próximas a Horizontal Center in Container e Vertical Center in Container.
-
Clique no botão Add 2 Constraints.
-
No canvas, clique no ícone Auto Layout Pin.
-
Acima de “Spacing to nearest neighbor,” selecione os dois limites horizontais em vermelho clicando neles.
Esses limites indicam o espaçamento para os vizinhos mais próximos à frente e atrás do elemento. Por causa da caixa de verificação “Constrain to margins” estar selecionada, o campo de texto nesse caso ficará contido às margens do view.
-
Clique no botão Add 2 Constraints.
A visualização da interface do aplicativo é atualizada para refletir os novos limites:

Se você não conseguir o comportamento esperado, use a depuração do layout automático do Xcode para lhe ajudar. Com o campo de texto selecionado, clique em Auto Layout Issues e escolha a opção Reset to Suggested Constraints para que o Xcode atualize sua interface para um conjunto válido de limites. Ou clique em Resolve Auto Layout Issues e escolha Clear Constraints para remover todos os limites, e então siga os passos acima novamente.
Checkpoint: Execute o seu aplicativo iOS no iOS Simulator para certificar-se de que a cena que você criou esta do jeito esperado. Você deve ser capaz de clicar dentro do campo de texto de digitar texto nele usando o teclado (se quiser, ative o teclado virtual pressionando Command-K). Se você rotacionar o dispositivo (Command-Seta Esquerda ou Command-Seta Direita) ou executar o aplicativo em um dispositivo diferente, o campo de texto estica ou encolhe dependendo da orientação e tamanho da tela do dispositivo. Observe que em alguns dispositivos, o campo de texto pode ficar escondido pelo teclado quando a tela estiver na orientação paisagem.

Apesar dessa cena não fazer muita coisa, a interface com o usuário básica está funcional. Considerar o layout desde o começo garante que você terá uma fundação sólida no futuro.