Come creare una calcolatrice in Xcode usando Swift: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

In questo breve tutorial, ti mostrerò come creare una semplice calcolatrice usando Swift in Xcode. Questa app è costruita per sembrare quasi identica all'app calcolatrice originale per iOS. Puoi seguire le istruzioni passo dopo passo e costruire la calcolatrice con me, oppure puoi semplicemente andare all'ultimo passaggio e copiare e incollare il codice nel controller della vista. Tuttavia, se lo fai, assicurati di collegare tutti i tuoi elementi sullo storyboard con il controller della vista.

Passaggio 1: creazione del progetto

Il primo passo per creare la nostra calcolatrice è creare effettivamente il progetto in Xcode. Puoi farlo facendo clic su "Crea un nuovo progetto Xcode" e nominandolo come desideri. Ho chiamato il mio "Calcolatrice". Il passaggio successivo consiste nel selezionare "Applicazione vista singola" per il tipo di app. Mantieni tutte le altre informazioni come valore predefinito.

Passaggio 2: layout dello storyboard

Il passaggio 2 della creazione del nostro calcolatore richiede la progettazione di un layout di base nello storyboard. Prima di iniziare, ti consiglio di cambiare il tuo dispositivo simulatore su iPhone 7 Plus. Inizia trascinando un pulsante sullo storyboard e modificandone le dimensioni in 89 x 89. Cambia il colore di sfondo in mercurio nell'ispettore attributi e il colore del carattere in tungsteno. Quindi, regola il carattere su Helvetica Light 30. Continua a copiare e incollare il pulsante finché non hai un totale di 20. Regola il layout di questi pulsanti in modo da avere cinque righe e quattro colonne.

Passaggio 3: design ed estetica dello storyboard

Elimina il secondo pulsante nella riga inferiore ed espandi il primo pulsante per occupare questo spazio. Cambia il valore del segnaposto di questo pulsante a zero. Continuare a modificare i valori numerici e i simboli di ciascun pulsante finché non è praticamente identico all'immagine mostrata sopra. Nell'ispettore attributi, il colore grigio più scuro è argento, il colore arancione è mandarino e il colore del carattere viene modificato in neve sui pulsanti arancioni. Quindi, fai clic sul controller della vista e cambia il colore di sfondo in nero. Aggiungi un'etichetta sopra i pulsanti e regolane le dimensioni in base alle tue esigenze. Allinea il testo a destra e cambia il carattere dell'etichetta in Helvetica light 70. Se lo desideri, puoi aggiungere vincoli a tutti gli elementi per rendere l'app uguale per tutti i dispositivi.

Passaggio 4: collegamento e integrazione di elementi

Apri l'ispettore degli attributi e cambia il tag per ogni singolo pulsante numerico. Il tag dovrebbe essere 1 in più rispetto al valore numerico effettivo. Ad esempio, il pulsante #0 dovrebbe avere un valore di tag di 1, il pulsante #1 dovrebbe avere un valore di tag di 2, il pulsante #2 dovrebbe avere un valore di tag di 3 e così via. Quindi, premi Ctrl, fai clic sul pulsante #0 e trascinalo sul controller della vista. Sullo schermo dovrebbe apparire un popup. Cambia la connessione in "azione", " il tipo in "UIButton", " l'evento in "Ritocco interno", " gli argomenti in "Mittente" e il suo nome in "numeri". Puoi cambiare il nome con quello che desideri, ma ciò significa che dovrai cambiare nuovamente il nome quando chiami la funzione in un secondo momento nel programma. Quindi, controlla, fai clic e trascina ogni pulsante numerico nella funzione che abbiamo appena creato. Ora controlla, fai clic e trascina l'etichetta nel programma, ma NON nella funzione. Ciò significa che devi semplicemente portare l'etichetta nella funzione come variabile separata. Ricorda, se sei mai confuso riguardo al codice, ho lasciato tutto il mio codice per te da usare nell'ultimo passaggio di questo Instructable.

Passaggio 5: definizione delle variabili

Per rendere funzionali i nostri pulsanti numerici, dovremo collegare il loro valore all'etichetta nella nostra funzione "numeri". Puoi farlo creando prima una variabile 'numberOnScreen' e rendendola di tipo double e uguale a 0: var numberOnScreen: Double = 0; E non dimenticare, se il codice qui sopra non è chiaro, ti ho lasciato il codice completo nell'ultimo passaggio affinché tu possa usarlo a tuo piacimento. Quindi, stabilisci un'altra variabile 'performingMath' di tipo bool e rendila falsa: var performingMath = false; Inoltre, crea un'altra variabile chiamata 'previousNumber' di tipo double e impostala uguale a 0: var previousNumber: Double = 0; L'ultima variabile che devi creare è la variabile 'operazione'. Impostalo uguale a 0: var operazione = 0;

Passaggio 6: funzione dei pulsanti numerici

Dopo aver stabilito le variabili appropriate, puoi procedere a copiare e incollare questo codice nella funzione "numeri":

if performingMath == true {

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

numberOnScreen = Double(label.text!)!

performMath = false

}

altro {

etichetta.testo = etichetta.testo! + Stringa(sender.tag-1)

numberOnScreen = Double(label.text!)!

}

In sostanza, questo pezzo di codice visualizza determinati numeri sull'etichetta quando viene premuto il pulsante appropriato. Tuttavia, dobbiamo ancora essere in grado di utilizzare tutti gli altri pulsanti e rendere funzionale la calcolatrice. Lo faremo nei prossimi due passaggi.

Passaggio 7: integrazione dei pulsanti operativi

Apri l'ispettore degli attributi e cambia il tag per tutti i pulsanti vari. Il pulsante di cancellazione dovrebbe avere un tag 11, il pulsante di divisione dovrebbe avere un tag di 12, il pulsante di moltiplicazione dovrebbe avere un tag di 13, il pulsante di sottrazione dovrebbe avere un tag di 14, il pulsante di addizione dovrebbe avere un tag di 15, e il pulsante uguale dovrebbe avere un tag di 16. Quindi, premere Ctrl, fare clic sul pulsante Cancella e trascinarlo sul controller della vista. Sullo schermo dovrebbe apparire un popup. Cambia la connessione in "azione", " il tipo in "UIButton", " l'evento in "Ritocco interno", " gli argomenti in "Mittente" e il suo nome in "pulsanti". Puoi cambiare il nome con quello che desideri, ma ciò significa che dovrai cambiare nuovamente il nome quando chiami la funzione in un secondo momento nel programma. Quindi, controlla, fai clic e trascina ogni pulsante vario nella funzione che abbiamo appena creato.

Passaggio 8: funzione pulsanti vari

Dopo aver collegato tutti i pulsanti vari taggati alla loro funzione appropriata, puoi iniziare a inserire il codice nella funzione 'pulsanti':

numero precedente = Double(etichetta.testo!)!

if sender.tag == 12 { //Dividi

label.text = "/";

}

if sender.tag == 13 { //Moltiplica

label.text = "x";

}

if sender.tag == 14 { //Sottrai

label.text = "-";

}

if sender.tag == 15 { //Aggiungi

etichetta.testo = "+";

}

operazione = mittente.tag

performMath = vero;

}

altrimenti se mittente.tag == 16 {

if operazione == 12{ //Dividi

label.text = String (numero precedente / numero su schermo)

}

else if operazione == 13{ //Moltiplica

label.text = String(previousNumber * numberOnScreen)

}

else if operazione == 14{ //Sottrai

label.text = String (numero precedente - numero su schermo)

}

else if operazione == 15{ //Aggiungi

label.text = String (numero precedente + numero su schermo)

}

}

altrimenti se sender.tag == 11{

etichetta.testo = ""

Numeroprecedente = 0;

numeroSu Schermo = 0;

operazione = 0;

}

In sostanza, questo pezzo di codice visualizza uno dei pulsanti vari quando viene premuto e procede al calcolo della risposta finale e lo visualizza sull'etichetta.

Passaggio 9: codice completo

Se non volevi seguire e costruire la calcolatrice passo dopo passo con me, puoi semplicemente aggiungere gli elementi allo storyboard e copiare e incollare il codice completo nel controller della vista. Ecco il codice:

import UIKit

class ViewController: UIViewController {

var numberOnScreen: Double = 0;

var numero precedente: Double = 0;

var performMath = false;

var operazione = 0;

@IBAction func numbers (_ sender: UIButton) {

if performingMath == true {

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

numberOnScreen = Double(label.text!)!

performMath = false

}

altro {

etichetta.testo = etichetta.testo! + Stringa (mittente.tag-1)

numberOnScreen = Double(label.text!)!

}

}

@IBOutlet etichetta var debole: UILabel!

@IBAction func button(_ sender: UIButton) {

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

numero precedente = Double(etichetta.testo!)!

if sender.tag == 12 { //Dividi

label.text = "/";

}

if sender.tag == 13 { //Moltiplica

label.text = "x";

}

if sender.tag == 14 { //Sottrai

label.text = "-";

}

if sender.tag == 15 { //Aggiungi

etichetta.testo = "+";

}

operazione = mittente.tag

performMath = vero;

}

altrimenti se mittente.tag == 16 {

if operazione == 12{ //Dividi

label.text = String (numero precedente / numero su schermo)

}

else if operazione == 13{ //Moltiplica

label.text = String(previousNumber * numberOnScreen)

}

else if operazione == 14{ //Sottrai

label.text = String (numero precedente - numero su schermo)

}

else if operazione == 15{ //Aggiungi

label.text = String (numero precedente + numero su schermo)

}

}

altrimenti se sender.tag == 11{

etichetta.testo = ""

Numeroprecedente = 0;

numeroSu Schermo = 0;

operazione = 0;

}

}

override func viewDidLoad() {

super.viewDidLoad()

// Esegui qualsiasi configurazione aggiuntiva dopo aver caricato la vista, in genere da un pennino.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Elimina tutte le risorse che possono essere ricreate.

}

}