Com fer una calculadora a Xcode mitjançant Swift: 9 passos

2025 Autora: John Day | [email protected]. Última modificació: 2025-01-23 14:38

En aquest tutorial ràpid, us mostraré com crear una calculadora senzilla amb Swift a Xcode. Aquesta aplicació està dissenyada per tenir un aspecte gairebé idèntic a l’aplicació de calculadora original per a iOS. Podeu seguir les instruccions pas a pas i construir la calculadora amb mi, o simplement anar al darrer pas i copiar i enganxar el codi al controlador de visualització. Tot i això, si feu això, assegureu-vos de connectar tots els vostres elements al guió gràfic amb el controlador de visualització.

Pas 1: creació del projecte

El primer pas per fer la calculadora és crear el projecte en Xcode. Podeu fer-ho fent clic a "Crea un nou projecte Xcode" i assignant-li el nom que vulgueu. Vaig anomenar la meva "Calculadora". El següent pas és seleccionar "Aplicació de visualització única" per al tipus d'aplicació. Conserva tota la resta d'informació com a valor predeterminat.

Pas 2: disseny del guió gràfic

El pas 2 de crear la nostra calculadora requereix que dissenyeu un disseny bàsic al guió gràfic. Abans de començar, us recomano canviar el dispositiu de simulació per l’iPhone 7 Plus. Comenceu arrossegant un botó al tauler d’escriptori i canviant les seves dimensions a 89 x 89. Canvieu el color de fons a mercuri de l’inspector d’atributs i el color de la font a tungstè. A continuació, ajusteu el tipus de lletra a Helvetica Light 30. Continueu copiant i enganxant el botó fins que en tingueu un total de 20. Ajusteu el disseny d'aquests botons de manera que tingueu cinc files i quatre columnes.

Pas 3: Disseny i estètica del guió gràfic

Suprimiu el segon botó de la fila inferior i amplieu el primer botó per ocupar aquest espai. Canvieu el valor del marcador de posició d'aquest botó a zero. Continueu canviant els valors numèrics i els símbols de cada botó fins que sigui pràcticament idèntic a la imatge que es mostra més amunt. A l'inspector d'atributs, el color gris més fosc és platejat, el taronja és mandarina i el color de la lletra es canvia a neu als botons taronja. A continuació, feu clic al controlador de visualització i canvieu el color de fons a negre. Afegiu una etiqueta a sobre dels botons i ajusteu-ne la mida perquè us sentiu còmode. Alineeu el text a la dreta i canvieu el tipus de lletra de l'etiqueta a Helvetica light 70. Si voleu, podeu afegir restriccions a tots els elements per tal de fer que l'aplicació sembli la mateixa per a tots els dispositius.

Pas 4: Connexió i integració d'elements

Obriu l’inspector d’atributs i canvieu l’etiqueta de cada botó numèric. L'etiqueta ha de ser 1 més que el valor numèric real. Per exemple, el botó # 0 ha de tenir un valor d'etiqueta 1, el botó # 1 ha de tenir un valor d'etiqueta 2, el botó # 2 ha de tenir un valor d'etiqueta 3, etc. A continuació, premeu control, feu clic al botó # 0 i arrossegueu-lo al controlador de visualització. Hauria d'aparèixer una finestra emergent a la pantalla. Canvieu la connexió a "acció", el tipus a "UIButton", l'esdeveniment a "Retoc interior", els arguments a "Remitent" i el seu nom a "números". Podeu canviar el nom pel que vulgueu, però això vol dir que hauríeu de canviar-lo de nou en trucar a la funció més endavant al programa. A continuació, controleu, feu clic i arrossegueu cada botó numèric a la funció que acabem de crear. Ara, controleu, feu clic i arrossegueu l'etiqueta al programa, però NO a la funció. Això vol dir que simplement introduïu l'etiqueta a la funció com a variable independent. Recordeu, si mai esteu confós amb el codi, he deixat tot el meu codi perquè el pugueu utilitzar a l'últim pas d'aquest instructable.

Pas 5: establiment de variables

Per fer que els nostres botons numèrics siguin funcionals, haurem de connectar el seu valor a l'etiqueta de la funció "números". Per fer-ho, primer creeu una variable 'numberOnScreen' i feu-la de tipus doble i igual a 0: var numberOnScreen: Double = 0; I no ho oblideu, si el codi que hi ha aquí és una mica poc clar, us he deixat el codi complet a l’últim pas perquè el pugueu utilitzar al vostre gust. A continuació, estableix una altra variable "performingMath" del tipus bool i fes-la falsa: var performingMath = false; A més, creeu una altra variable anomenada 'previousNumber' de tipus double i establiu-la igual a 0: var previousNumber: Double = 0; L'última variable que heu de crear és la variable "operació". Establiu-lo igual a 0: operació var = 0;

Pas 6: Funció de botons numèrics

Un cop establertes les variables adequades, podeu procedir a copiar i enganxar aquest codi a la funció "números":

si performingMath == true {

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

numberOnScreen = Doble (label.text!)!

performingMath = fals

}

més {

label.text = label.text! + Cadena (sender.tag-1)

numberOnScreen = Doble (label.text!)!

}

Bàsicament, aquest fragment de codi mostra certs números a l’etiqueta quan es prem el botó adequat. Tot i això, encara hem de poder utilitzar tots els altres botons i fer que la calculadora funcioni. Ho farem en els pròxims dos passos.

Pas 7: integració de botons d'operació

Obriu l’inspector d’atributs i canvieu l’etiqueta de tots els botons diversos. El botó d'esborra ha de tenir una etiqueta d'11, el botó de divisió ha de tenir una etiqueta de 12, el botó de multiplicació ha de tenir una etiqueta de 13, el botó de resta ha de tenir una etiqueta de 14, el botó de suma ha de tenir una etiqueta de 15, i el botó igual ha de tenir una etiqueta de 16. A continuació, premeu control, feu clic al botó d'esborra i arrossegueu-lo al controlador de visualització. Hauria d'aparèixer una finestra emergent a la pantalla. Canvieu la connexió a "acció", el tipus a "UIButton", l'esdeveniment a "Retoc interior", els arguments a "Remitent" i el seu nom a "botons". Podeu canviar el nom pel que vulgueu, però això vol dir que hauríeu de canviar-lo de nou en trucar a la funció més endavant al programa. A continuació, controleu, feu clic i arrossegueu tots els botons diversos a la funció que acabem de crear.

Pas 8: Funció de botons diversos

Després d'haver connectat tots els botons diversos etiquetats a la seva funció adequada, podeu començar a inserir el codi a la funció "botons":

previousNumber = Doble (label.text!)!

si remitent.tag == 12 {// Divideix

label.text = "/";

}

if sender.tag == 13 {// Multiplicar

label.text = "x";

}

si remitent.tag == 14 {// Resta

label.text = "-";

}

si remitent.tag == 15 {// Afegeix

label.text = "+";

}

operació = remitent.etiqueta

performingMath = cert;

}

else if sender.tag == 16 {

si operació == 12 {// Divideix

label.text = Cadena (previousNumber / numberOnScreen)

}

else if operació == 13 {// Multiplicar

label.text = Cadena (previousNumber * numberOnScreen)

}

else if operació == 14 {// Resta

label.text = Cadena (previousNumber - numberOnScreen)

}

else if operació == 15 {// Afegeix

label.text = Cadena (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

Número anterior = 0;

numberOnScreen = 0;

operació = 0;

}

Bàsicament, aquest fragment de codi mostra un dels diversos botons quan es prem i continua calculant la resposta final i la mostra a l’etiqueta.

Pas 9: codi complet

Si no volíeu crear la calculadora pas a pas amb mi, podeu afegir els elements al vostre guió gràfic i copiar i enganxar el codi complet al controlador de visualització. Aquí teniu el codi:

importar UIKit

classe ViewController: UIViewController {

var numberOnScreen: Double = 0;

var número anterior: doble = 0;

var performingMath = fals;

operació var = 0;

Números de funcions @IBAction (_ remitent: UIButton) {

si performingMath == true {

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

numberOnScreen = Doble (label.text!)!

performingMath = fals

}

més {

label.text = label.text! + Cadena (sender.tag-1)

numberOnScreen = Doble (label.text!)!

}

}

@IBOutlet etiqueta var feble: UILabel!

Botons de funcions @IBAction (_ remitent: UIButton) {

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

previousNumber = Doble (label.text!)!

si remitent.tag == 12 {// Divideix

label.text = "/";

}

if sender.tag == 13 {// Multiplicar

label.text = "x";

}

si remitent.tag == 14 {// Resta

label.text = "-";

}

si remitent.tag == 15 {// Afegeix

label.text = "+";

}

operació = remitent.etiqueta

performingMath = cert;

}

else if sender.tag == 16 {

si operació == 12 {// Divideix

label.text = Cadena (previousNumber / numberOnScreen)

}

else if operation == 13 {// Multiplicar

label.text = Cadena (previousNumber * numberOnScreen)

}

else if operació == 14 {// Resta

label.text = Cadena (previousNumber - numberOnScreen)

}

else if operació == 15 {// Afegeix

label.text = Cadena (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

Número anterior = 0;

numberOnScreen = 0;

operació = 0;

}

}

sobreescriu func viewDidLoad () {

super.viewDidLoad ()

// Feu qualsevol configuració addicional després de carregar la vista, normalment des d'un punt.

}

substitueix func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Eliminar els recursos que es puguin recrear.

}

}