Hvordan lage en kalkulator i Xcode ved hjelp av Swift: 9 trinn

2025 Forfatter: John Day | [email protected]. Sist endret: 2025-01-23 15:02

I denne korte opplæringen vil jeg vise deg hvordan du lager en enkel kalkulator ved hjelp av Swift i Xcode. Denne appen er bygget for å se nesten identisk ut med den opprinnelige kalkulatorappen for iOS. Du kan enten følge instruksjonene trinn-for-trinn og bygge kalkulatoren med meg, eller du kan bare gå til det siste trinnet og kopiere og lime inn koden i visningskontrolleren. Men hvis du gjør dette, må du sørge for å koble alle elementene på storyboardet med visningskontrolleren.

Trinn 1: Opprette prosjektet

Det første trinnet i å lage vår kalkulator er å faktisk lage prosjektet i Xcode. Du kan gjøre dette ved å klikke "Opprett et nytt Xcode -prosjekt" og navngi det hva du vil. Jeg kalte min "Kalkulator". Det neste trinnet er å velge "Single View Application" for apptypen. Behold all annen informasjon som standardverdi.

Trinn 2: Storyboard Layout

Trinn 2 for å lage vår kalkulator krever at du designer et grunnleggende oppsett i storyboardet. Før du starter dette, anbefaler jeg å bytte simulatorenhet til iPhone 7 Plus. Begynn med å dra en knapp til storyboardet og endre dimensjonene til 89 x 89. Endre bakgrunnsfargen til kvikksølv på attributtinspektøren og skriftfargen til wolfram. Juster deretter skriften til Helvetica Light 30. Fortsett å kopiere og lime inn knappen til du har totalt 20. Juster oppsettet til disse knappene slik at du har fem rader og fire kolonner.

Trinn 3: Storyboard Design og estetikk

Slett den andre knappen på den nederste raden, og utvid den første knappen for å ta over denne plassen. Endre plassholderverdien til denne knappen til null. Fortsett å endre tallverdiene og symbolene for hver knapp til den er praktisk talt identisk med bildet som vises ovenfor. På attributtinspektøren er den mørkere grå fargen sølv, den oransje fargen er mandarin, og skriftfargen endres til snø på de oransje knappene. Klikk deretter på visningskontrolleren og endre bakgrunnsfargen til svart. Legg til en etikett over knappene, og juster størrelsen slik at du føler deg komfortabel. Juster teksten til høyre og endre etikettens skrift til Helvetica light 70. Hvis du vil, kan du legge til begrensninger for alle elementene for å få appen til å se like ut på alle enheter.

Trinn 4: Koble til og integrere elementer

Åpne attributtinspektøren og endre taggen for hver enkelt tallknapp. Koden skal være 1 mer enn den faktiske numeriske verdien. For eksempel bør #0 -knappen ha en tag -verdi på 1, #1 -knappen skal ha en tag -verdi på 2, #2 -knappen skal ha en tag -verdi på 3, og så videre. Trykk deretter på kontroll, klikk på #0 -knappen, og dra den til visningskontrolleren. En popup skal vises på skjermen. Endre tilkoblingen til 'handling', typen til 'UIButton', hendelsen til 'Touch Up Inside', argumentene til 'Avsender' og navnet til 'tall'. Du kan endre navnet til det du vil, men det betyr at du må endre navnet igjen når du ringer funksjonen senere i programmet. Deretter kontrollerer du, klikker og drar hver tallknapp til funksjonen vi nettopp opprettet. Kontroller, klikk og dra etiketten inn i programmet, men IKKE inn i funksjonen. Dette betyr at du ganske enkelt tar med etiketten i funksjonen som en egen variabel. Husk at hvis du noen gang er forvirret om koden, har jeg lagt igjen all koden min som du kan bruke på det siste trinnet i denne instruksen.

Trinn 5: Etablering av variabler

For å gjøre tallknappene våre funksjonelle, må vi koble verdien til etiketten i funksjonen "tall". Du kan gjøre dette ved først å opprette en variabel 'numberOnScreen' og gjøre den av typen double og lik 0: var numberOnScreen: Double = 0; Og ikke glem, hvis koden her er litt uklar, har jeg gitt deg hele koden på det siste trinnet slik at du kan bruke det du liker. Deretter etablerer du en annen variabel 'performingMath' av typen bool og gjør den usann: var performingMath = false; Opprett også en annen variabel kalt 'previousNumber' av typen double og sett den lik 0: var previousNumber: Double = 0; Den siste variabelen du må opprette er varianten 'operasjon'. Sett den lik 0: var operasjon = 0;

Trinn 6: Nummerknapper Funksjon

Etter at du har etablert de riktige variablene, kan du fortsette å kopiere og lime inn denne koden i "tall" -funksjonen din:

hvis performingMath == true {

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

numberOnScreen = Double (label.text!)!

performingMath = false

}

annet {

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

numberOnScreen = Double (label.text!)!

}

I hovedsak viser denne koden visse tall på etiketten når du trykker på riktig knapp. Vi trenger imidlertid fortsatt å kunne bruke alle de andre knappene og gjøre kalkulatoren funksjonell. Vi vil gjøre dette i de neste par trinnene.

Trinn 7: Integrering av betjeningsknapper

Åpne attributtinspektøren og endre taggen for alle forskjellige knapper. Den klare knappen skal ha en etikett på 11, divisjonsknappen skal ha en kode på 12, multiplikasjonsknappen skal ha en kode på 13, subtraksjonsknappen skal ha en etikett på 14, tilleggsknappen skal ha en kode på 15, og like -knappen skal ha et merke på 16. Deretter trykker du på kontroll, klikker på slett -knappen og drar den til visningskontrolleren. En popup skal vises på skjermen. Endre tilkoblingen til "handling", typen til "UIButton", hendelsen til "Touch Up Inside", argumentene til "Sender" og navnet til "knapper". Du kan endre navnet til det du vil, men det betyr at du må endre navnet igjen når du ringer funksjonen senere i programmet. Deretter kontrollerer du, klikker og drar hver diverse knapp til funksjonen vi nettopp opprettet.

Trinn 8: Diverse knapper Funksjon

Etter at du har koblet alle de merkede diverse knappene til riktig funksjon, kan du begynne å sette inn koden i 'knappene' -funksjonen:

previousNumber = Double (label.text!)!

hvis sender.tag == 12 {// Del

label.text = "/";

}

hvis sender.tag == 13 {// Multipliser

label.text = "x";

}

hvis sender.tag == 14 {// Trekker fra

label.text = "-";

}

hvis sender.tag == 15 {// Legg til

label.text = "+";

}

operasjon = sender.tag

performingMath = true;

}

ellers hvis sender.tag == 16 {

hvis operasjon == 12 {// Del

label.text = String (previousNumber / numberOnScreen)

}

ellers hvis operasjon == 13 {// Multipliser

label.text = String (previousNumber * numberOnScreen)

}

ellers hvis operasjon == 14 {// Trekk fra

label.text = String (previousNumber - numberOnScreen)

}

ellers hvis operasjon == 15 {// Legg til

label.text = String (previousNumber + numberOnScreen)

}

}

ellers hvis sender.tag == 11 {

label.text = ""

forrigeNummer = 0;

numberOnScreen = 0;

operasjon = 0;

}

I hovedsak viser denne koden en av de forskjellige knappene når den trykkes og fortsetter å beregne det endelige svaret og viser det på etiketten.

Trinn 9: Full kode

Hvis du ikke ønsket å gå igjennom og bygge kalkulatoren trinn for trinn med meg, kan du ganske enkelt legge til elementene i storyboardet ditt og kopiere og lime inn hele koden i visningskontrolleren. Her er koden:

importer UIKit

klasse ViewController: UIViewController {

var numberOnScreen: Double = 0;

var previousNumber: Double = 0;

var performingMath = false;

var operasjon = 0;

@IBAction func -tall (_ sender: UIButton) {

hvis performingMath == true {

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

numberOnScreen = Double (label.text!)!

performingMath = false

}

annet {

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

numberOnScreen = Double (label.text!)!

}

}

@IBOutlet svak var -etikett: UILabel!

@IBAction func -knapper (_ sender: UIButton) {

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

previousNumber = Double (label.text!)!

hvis sender.tag == 12 {// Del

label.text = "/";

}

hvis sender.tag == 13 {// Multipliser

label.text = "x";

}

hvis sender.tag == 14 {// Trekker fra

label.text = "-";

}

hvis sender.tag == 15 {// Legg til

label.text = "+";

}

operasjon = sender.tag

performingMath = true;

}

ellers hvis sender.tag == 16 {

hvis operasjon == 12 {// Del

label.text = String (previousNumber / numberOnScreen)

}

ellers hvis operasjon == 13 {// Multipliser

label.text = String (previousNumber * numberOnScreen)

}

ellers hvis operasjon == 14 {// Trekk fra

label.text = String (previousNumber - numberOnScreen)

}

ellers hvis operasjon == 15 {// Legg til

label.text = String (previousNumber + numberOnScreen)

}

}

ellers hvis sender.tag == 11 {

label.text = ""

forrigeNummer = 0;

numberOnScreen = 0;

operasjon = 0;

}

}

overstyr func viewDidLoad () {

super.viewDidLoad ()

// Gjør ytterligere oppsett etter at du har lastet inn visningen, vanligvis fra en penn.

}

overstyr func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Kast alle ressurser som kan gjenskapes.

}

}