Tornando o aplicativo interativo

Neste capítulo, apresentaremos algumas coisas novas e recursos de IU que o iOS fornece para interação com o usuário. Estaremos adicionando -

• Campos de Texto
• Labels
• Botões e suas ações

Além disso, estaremos escrevendo o código em swift para um rótulo dinâmico, que mostrará o resultado calculado da entrada inserida pelo usuário.

Com o título “Tornando nosso aplicativo interativo”, queremos dizer fazer nosso aplicativo interagir com o usuário. Portanto, aqui damos ao usuário o poder de interagir e controlar o aplicativo.

Adicionando Campos de Texto

Aqui, faremos novamente um novo projeto. Deve ser facilmente gerenciável, pois já discutimos como criar um novo projeto no Xcode.

Ok, agora vamos criar um novo projeto chamado “Idade do meu cachorro”. Depois de criar este projeto, clicaremos em nosso arquivo “Main.storyboard” e seguiremos os passos abaixo.

• Na barra de pesquisa do painel de utilitários (localizada no canto inferior direito do Xcode), procure Rótulo. Clique e arraste esse rótulo para o seu main.storyboard / (View). Em seguida, clique duas vezes no rótulo e renomeie-o como - “Idade do meu cachorro”.

• Pesquise por “campo de texto”, clique e arraste esse campo de texto para a sua Visualização. Enquanto este campo de texto estiver selecionado, vá para o inspetor de atributos e altere o tipo de teclado para Teclado numérico, de modo que apenas o número possa ser inserido como mostrado na imagem abaixo.

Adicionando botões à nossa visualização

Agora procure um botão na barra de pesquisa. Arraste-o para a sua visualização, clique duas vezes nele e renomeie como “Calcular”.

Adicionando etiqueta à vista

Pesquise o rótulo e adicione-o abaixo do botão, para mostrar a saída de idade. Clique duas vezes e esvazie o rótulo e estique-o um pouco, para que a saída completa fique visível.

Tip - Se você não conseguir renomear clicando duas vezes, selecione o item e no painel de utilitários - Attribute inspector, há o título desse item, modifique-o e pressione Return como mostrado na imagem a seguir.

Agora, seu Main.storyboard deve ser semelhante à imagem a seguir.

Não paramos por aqui, agora iremos discutir como adicionar imagens ao main.storyboard.

Adicionando Imagens à Nossa Visão

Para começar, devemos primeiro procurar uma imagem, que queremos adicionar ao projeto. Você pode baixar a imagem abaixo -

Copie esta imagem em seu projeto, ou arraste esta imagem para seu projeto, então você verá a seguinte janela.

Certifique-se de selecionar, copiar itens se necessário e criar grupos. Clique no botão Concluir.

Agora, vá para o Painel de Utilitários → Biblioteca de Objetos e procure por visualizações de Imagens. Arraste a visualização da imagem para a sua visualização. Agora sua visualização deve ser semelhante à captura de tela fornecida abaixo.

Agora, clique nesta Visualização da Imagem, você acabou de arrastar na sua visualização e verá que na área do utilitário existe uma opção chamada “Imagem” para selecionar a imagem. Clique nessa seta e você verá todas as imagens disponíveis. Certifique-se de ter selecionado esta visualização de imagem recém-adicionada.

Agora que você selecionou a imagem para sua visualização de imagem, sua visualização final deve ser semelhante à seguinte captura de tela. Esta é a única coisa que faremos com nosso main.storyboard, para este aplicativo.

Esta é a nossa visão agora, após adicionar todos os elementos da IU.

Depois disso, temos uma implementação lógica de nosso código que continuaremos se você tiver concluído até esta etapa.

Agora, selecione seu controlador de visualização e abra o editor assistente clicando no botão do editor assistente no canto superior direito (conforme mostrado na imagem abaixo).

Agora, nossa visão deve se parecer com a imagem a seguir.

Adicionando funcionalidade ao nosso aplicativo

Até agora, nosso aplicativo é apenas um aplicativo estático, que não responde a nada e não muda na interação do usuário.

Agora vem a parte principal de conectar nossos Elementos de IU ao nosso Código e a IU mudará de acordo com a entrada do usuário. o“ViewController.swift” file é o nosso arquivo principal, no qual escreveremos o código para a nossa visualização Atual.

Note- Atualmente estamos trabalhando com visualizações únicas, mais tarde, quando discutirmos sobre visualizações múltiplas. Discutiremos como arquivos diferentes controlam visualizações diferentes.

Clique no campo de texto, pressione control e arraste o cursor para a segunda parte da tela, ou seja, o arquivo viewcontroller.swift. Você verá uma linha azul conectando nossa visualização e arquivo rápido. Ao soltar o mouse, você verá um pop-up, solicitando uma entrada.

TIP- Preencha o campo Nome com qualquer Nome que se pareça com o seu campo de entrada. Um ponto importante é que o nome não pode ter um espaço, então você pode escrevê-lo como mostrado na imagem anterior, ou seja, se o nome tiver várias palavras, então a primeira palavra deve ser escrita em minúsculas, então o primeiro alfabeto de cada próximo palavra será maiúscula.

Siga o mesmo procedimento e conecte o resto dos Elementos. Lembre-se de que, para um campo de texto e um rótulo, o tipo é Outlet. No entanto, ao adicionar um botão, o tipo deve ser a ação, conforme mostrado na captura de tela abaixo.

Neste estágio, nosso viewcontroller.swift se parecerá com -

Agora, dentro da ação do botão, adicione as seguintes linhas -

var age = Int(enteredAge.text!)! * 8 
yearsLabel.text = String(age);

Tip- Não precisamos adicionar um ponto-e-vírgula para encerrar uma linha em swift, mas mesmo se colocássemos um ponto-e-vírgula, o compilador não relataria nenhum erro .

No código acima, a primeira linha declara uma variável 'idade', que discutiremos no próximo capítulo. Em seguida, atribuímos o valor inserido pelo usuário, convertendo-o em um inteiro e multiplicando-o por 8.

Na segunda linha, atribuímos o valor de 'idade' ao nosso rótulo de saída. Neste estágio, nosso controlador de visualização terá a seguinte aparência -

Agora, vamos rodar nosso aplicativo e é assim que vai aparecer.

Tip- Se o seu teclado não aparecer na primeira execução, abra o simulador, clique em hardware, vá para teclado e clique em Alternar teclado de software.

No próximo capítulo, discutiremos sobre uma nova ferramenta chamada Playground. Também aprenderemos alguns conceitos mais rápidos como Variáveis, Dicionários, Arrays Loops, Classes e objetos.