Tutorial básico de criação de aplicativos para iOS

@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

1. 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.

2. Na biblioteca, digite text field no campo de filtro para encontrar o objeto Text Field rapidamente.

3. 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.

4. 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..

5. 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.

   

6. 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

1. 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.

   

2. No Attributes inspector, encontre o campo chamado Placeholder e digite New to-do item.

3. 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

1. Clique no botão Assistant na barra de ferramentas do Xcode para abrir o assistant editor.

   

2. Na barra de seleção do editor, alterne o assistente de Automatic para Preview.

   

3. 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

1. Em seu storyboard, selecione o campo de texto.

2. No canvas, clique no ícone Auto Layout Align.

   

3. Selecione as caixas de verificação próximas a Horizontal Center in Container e Vertical Center in Container.

   

4. Clique no botão Add 2 Constraints.

   

5. No canvas, clique no ícone Auto Layout Pin.

   

6. 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.

7. 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.

Traduzido de:

• developer.apple.com