Como fazer uma calculadora no Xcode usando Swift: 9 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Neste tutorial rápido, vou mostrar como criar uma calculadora simples usando Swift no Xcode. Este aplicativo foi desenvolvido para ser quase idêntico ao aplicativo de calculadora original para iOS. Você pode seguir as instruções passo a passo e construir a calculadora comigo ou simplesmente ir para a última etapa e copiar e colar o código em seu controlador de visualização. No entanto, se você fizer isso, certifique-se de conectar todos os seus elementos no storyboard com seu controlador de visualização.

Etapa 1: Criando o Projeto

O primeiro passo para fazer nossa calculadora é realmente criar o projeto no Xcode. Você pode fazer isso clicando em "Criar um novo projeto Xcode" e nomeando-o como desejar. Chamei a minha de "Calculadora". A próxima etapa é selecionar "Aplicativo de visualização única" para o tipo de aplicativo. Mantenha todas as outras informações como o valor padrão.

Etapa 2: Layout do storyboard

A etapa 2 da criação de nossa calculadora requer que você projete um layout básico no storyboard. Antes de começar, recomendo mudar seu dispositivo simulador para o iPhone 7 Plus. Comece arrastando um botão para o storyboard e alterando suas dimensões para 89 x 89. Altere sua cor de fundo para mercúrio no inspetor de atributos e sua cor de fonte para tungstênio. Em seguida, ajuste a fonte para Helvetica Light 30. Continue a copiar e colar o botão até que você tenha um total de 20. Ajuste o layout desses botões para que você tenha cinco linhas e quatro colunas.

Etapa 3: Design e estética do storyboard

Exclua o segundo botão na linha inferior e expanda o primeiro botão para ocupar este espaço. Altere o valor do marcador de posição deste botão para zero. Continue a alterar os valores numéricos e símbolos de cada botão até que seja praticamente idêntico ao da imagem mostrada acima. No inspetor de atributos, a cor cinza mais escura é prata, a cor laranja é tangerina e a cor da fonte é alterada para neve nos botões laranja. Em seguida, clique no controlador de visualização e mude sua cor de fundo para preto. Adicione uma etiqueta acima dos botões e ajuste seu tamanho da forma que desejar. Alinhe o texto à direita e altere a fonte do rótulo para Helvetica light 70. Se desejar, você pode adicionar restrições a todos os elementos para fazer com que o aplicativo tenha a mesma aparência para todos os dispositivos.

Etapa 4: conectando e integrando elementos

Abra o inspetor de atributos e altere a tag para cada botão de número. A tag deve ser 1 a mais do que o valor numérico real. Por exemplo, o botão # 0 deve ter um valor de tag de 1, o botão # 1 deve ter um valor de tag de 2, o botão # 2 deve ter um valor de tag de 3 e assim por diante. Em seguida, pressione control, clique no botão # 0 e arraste-o para o controlador de visualização. Um pop-up deve aparecer na tela. Altere a conexão para 'ação', o tipo para 'UIButton', o evento para 'Touch Up Inside', os argumentos para 'Remetente' e seu nome para 'números'. Você pode alterar o nome para o que quiser, mas isso significa que você terá que alterar o nome novamente ao chamar a função mais tarde no programa. Em seguida, controle, clique e arraste cada botão de número para a função que acabamos de criar. Agora, controle, clique e arraste o rótulo para o programa, mas NÃO para a função. Isso significa que você simplesmente traz o rótulo para a função como uma variável separada. Lembre-se, se você já se confundiu com o código, deixei todo o meu código para você usar na última etapa deste Instructable.

Etapa 5: Estabelecendo Variáveis

Para tornar nossos botões numéricos funcionais, teremos que conectar seu valor ao rótulo em nossa função 'números'. Você pode fazer isso criando primeiro uma variável 'numberOnScreen' e torná-la do tipo double e igual a 0: var numberOnScreen: Double = 0; E não se esqueça, se o código aqui não estiver claro, deixei o código completo da última etapa para você usar como quiser. Em seguida, estabeleça outra variável 'performMath' do tipo bool e torne-a falsa: var performMath = false; Além disso, crie outra variável chamada 'previousNumber' do tipo double e defina-a igual a 0: var previousNumber: Double = 0; A última variável que você deve criar é a variável 'operação'. Defina-o igual a 0: var operation = 0;

Etapa 6: Função dos botões numéricos

Depois de estabelecer as variáveis apropriadas, você pode continuar a copiar e colar este código em sua função de 'números':

if performMath == true {

label.text = String (sender.tag-1)

numberOnScreen = Double (label.text!)!

performMath = false

}

outro {

label.text = label.text! + String (remetente.tag-1)

numberOnScreen = Double (label.text!)!

}

Essencialmente, esse trecho de código exibe certos números na etiqueta quando o botão apropriado é pressionado. No entanto, ainda precisamos ser capazes de usar todos os outros botões e tornar a calculadora funcional. Faremos isso nas próximas etapas.

Etapa 7: Integração dos botões de operação

Abra o inspetor de atributos e altere a tag para todos os botões diversos. O botão limpar deve ter uma tag 11, o botão de divisão deve ter uma tag 12, o botão de multiplicação deve ter uma tag 13, o botão de subtração deve ter uma tag 14, o botão de adição deve ter uma tag 15, e o botão igual deve ter um tag 16. Em seguida, pressione control, clique no botão limpar e arraste-o para o controlador de visualização. Um pop-up deve aparecer na tela. Altere a conexão para 'ação', o tipo para 'UIButton', o evento para 'Retoque interno,' os argumentos para 'Remetente' e seu nome para 'botões'. Você pode alterar o nome para o que quiser, mas isso significa que você terá que alterar o nome novamente ao chamar a função mais tarde no programa. Em seguida, controle, clique e arraste cada botão diverso para a função que acabamos de criar.

Etapa 8: Função de botões diversos

Depois de conectar todos os botões diversos marcados às funções apropriadas, você pode começar a inserir o código na função 'botões':

previousNumber = Double (label.text!)!

if sender.tag == 12 {// Divide

label.text = "/";

}

if sender.tag == 13 {// Multiply

label.text = "x";

}

if sender.tag == 14 {// Subtrair

label.text = "-";

}

if sender.tag == 15 {// Adicionar

label.text = "+";

}

operação = sender.tag

performMath = true;

}

else if sender.tag == 16 {

if operation == 12 {// Divide

label.text = String (previousNumber / numberOnScreen)

}

else if operation == 13 {// Multiply

label.text = String (previousNumber * numberOnScreen)

}

else if operation == 14 {// Subtrair

label.text = String (previousNumber - numberOnScreen)

}

else if operation == 15 {// Adicionar

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

operação = 0;

}

Essencialmente, esse trecho de código exibe um dos botões diversos quando é pressionado e prossegue para calcular a resposta final e a exibe no rótulo.

Etapa 9: Código Completo

Se você não quiser construir a calculadora passo a passo comigo, pode simplesmente adicionar os elementos ao seu storyboard e copiar e colar o código completo em seu controlador de visualização. Aqui está o código:

importar UIKit

classe ViewController: UIViewController {

var numberOnScreen: Double = 0;

var previousNumber: Double = 0;

var performMath = false;

var operação = 0;

Números de função @IBAction (_ sender: UIButton) {

if performMath == true {

label.text = String (sender.tag-1)

numberOnScreen = Double (label.text!)!

performMath = false

}

outro {

label.text = label.text! + String (remetente.tag-1)

numberOnScreen = Double (label.text!)!

}

}

Rótulo de var fraco @IBOutlet: UILabel!

Botões de função @IBAction (_ sender: UIButton) {

if label.text! = "" && sender.tag! = 11 && sender.tag! = 16 {

previousNumber = Double (label.text!)!

if sender.tag == 12 {// Divide

label.text = "/";

}

if sender.tag == 13 {// Multiply

label.text = "x";

}

if sender.tag == 14 {// Subtrair

label.text = "-";

}

if sender.tag == 15 {// Adicionar

label.text = "+";

}

operação = sender.tag

performMath = true;

}

else if sender.tag == 16 {

if operation == 12 {// Divide

label.text = String (previousNumber / numberOnScreen)

}

else if operation == 13 {// Multiply

label.text = String (previousNumber * numberOnScreen)

}

else if operation == 14 {// Subtrair

label.text = String (previousNumber - numberOnScreen)

}

else if operation == 15 {// Adicionar

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

operação = 0;

}

}

substituir função viewDidLoad () {

super.viewDidLoad ()

// Faça qualquer configuração adicional após carregar a visualização, normalmente de uma ponta.

}

função de substituição didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Descarte todos os recursos que podem ser recriados.

}

}