Sådan laver du en lommeregner i Xcode ved hjælp af Swift: 9 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:30

I denne hurtige vejledning viser jeg dig, hvordan du opretter en simpel lommeregner ved hjælp af Swift i Xcode. Denne app er bygget til at se næsten identisk ud med den originale lommeregner -app til iOS. Du kan enten følge vejledningen trin for trin og bygge lommeregneren sammen med mig, eller du kan simpelthen gå til det sidste trin og kopiere og indsætte koden i din visningskontroller. Men hvis du gør dette, skal du sørge for at forbinde alle dine elementer på storyboardet med din view controller.

Trin 1: Oprettelse af projektet

Det første trin i at lave vores lommeregner er faktisk at oprette projektet i Xcode. Du kan gøre dette ved at klikke på "Opret et nyt Xcode -projekt" og navngive det, hvad du vil. Jeg kaldte min "Lommeregner". Det næste trin er at vælge "Single View Application" til apptypen. Behold alle andre oplysninger som standardværdien.

Trin 2: Storyboard Layout

Trin 2 i oprettelsen af vores lommeregner kræver, at du designer et grundlæggende layout i storyboardet. Inden du starter dette, anbefaler jeg, at du ændrer din simulatorenhed til iPhone 7 Plus. Begynd med at trække en knap videre til storyboardet og ændre dens dimensioner til 89 x 89. Skift baggrundsfarve til kviksølv på attributterinspektøren og dens skrifttypefarve til wolfram. Juster derefter skrifttypen til Helvetica Light 30. Fortsæt med at kopiere og indsætte knappen, indtil du har i alt 20. Juster layoutet på disse knapper, så du har fem rækker og fire kolonner.

Trin 3: Storyboard Design og æstetik

Slet den anden knap i nederste række, og udvid den første knap for at overtage denne plads. Skift pladsholderværdien for denne knap til nul. Fortsæt med at ændre talværdierne og symbolerne for hver knap, indtil det er praktisk talt identisk med billedet vist ovenfor. På attributinspektøren er den mørkere grå farve sølv, den orange farve er mandarin, og skrifttypefarven ændres til sne på de orange knapper. Klik derefter på visningskontrollen, og skift dens baggrundsfarve til sort. Tilføj en etiket over knapperne, og juster dens størrelse, så du føler dig godt tilpas. Juster teksten til højre, og skift etikettens skrifttype til Helvetica light 70. Hvis du vil, kan du tilføje begrænsninger til alle elementerne for at få appen til at se ens ud for alle enheder.

Trin 4: Tilslutning og integration af elementer

Åbn attributinspektøren, og skift tagget for hver enkelt talknap. Mærket skal være 1 mere end den faktiske numeriske værdi. For eksempel skal #0 -knappen have en tagværdi på 1, #1 -knappen skal have en tagværdi på 2, #2 -knappen skal have en tagværdi på 3 og så videre. Tryk derefter på kontrol, klik på knappen #0, og træk den til visningskontrollen. En popup skal vises på skærmen. Skift forbindelsen til 'handling', typen til 'UIButton', hændelsen til 'Touch Up Inside', argumenterne til 'afsender' og dens navn til 'numre'. Du kan ændre navnet til hvad du vil, men det betyder, at du bliver nødt til at ændre navnet igen, når du kalder funktionen senere i programmet. Derefter skal du styre, klikke og trække hver talknap til den funktion, vi lige har oprettet. Nu skal du styre, klikke og trække etiketten ind i programmet, men IKKE ind i funktionen. Det betyder, at du ganske enkelt bringer etiketten ind i funktionen som en separat variabel. Husk, hvis du nogensinde er forvirret omkring koden, har jeg efterladt al min kode, som du kan bruge på det sidste trin i denne instruks.

Trin 5: Etablering af variabler

For at gøre vores talknapper funktionelle, bliver vi nødt til at forbinde deres værdi med etiketten i vores 'tal' -funktion. Du kan gøre dette ved først at oprette en variabel 'numberOnScreen' og gøre den af typen dobbelt og lig med 0: var numberOnScreen: Double = 0; Og glem ikke, hvis koden her er lidt uklar, har jeg efterladt dig den fulde kode på det sidste trin, som du kan bruge til din smag. Opret derefter en anden variabel 'performingMath' af typen bool og gør den falsk: var performingMath = false; Opret også en anden variabel kaldet 'previousNumber' af typen double og sæt den lig med 0: var previousNumber: Double = 0; Den sidste variabel, du skal oprette, er variablen 'operation'. Indstil den til 0: var operation = 0;

Trin 6: Nummerknapper Funktion

Når du har etableret de relevante variabler, kan du fortsætte med at kopiere og indsætte denne kode i din 'tal' -funktion:

hvis performingMath == true {

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

numberOnScreen = Dobbelt (label.text!)!

performingMath = false

}

andet {

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

numberOnScreen = Dobbelt (label.text!)!

}

Grundlæggende viser dette stykke kode visse tal på etiketten, når der trykkes på den relevante knap. Vi mangler dog stadig at kunne bruge alle de andre knapper og gøre lommeregneren funktionel. Vi vil gøre dette i de næste par trin.

Trin 7: Integrering af betjeningsknapper

Åbn attributinspektøren, og skift mærket for alle forskellige knapper. Den klare knap skal have et mærke på 11, divisionsknappen skal have et mærke på 12, multiplikationsknappen skal have et mærke på 13, subtraktionsknappen skal have et mærke på 14, tilføjelsesknappen skal have et mærke på 15, og den samme knap skal have et mærke på 16. Tryk derefter på kontrol, klik på knappen Fjern, og træk den til visningskontrollen. En popup skal vises på skærmen. Skift forbindelsen til 'handling', typen til 'UIButton', hændelsen til 'Touch Up Inside', argumenterne til 'Afsender' og dens navn til 'knapper'. Du kan ændre navnet til hvad du vil, men det betyder, at du bliver nødt til at ændre navnet igen, når du kalder funktionen senere i programmet. Derefter skal du styre, klikke og trække hver diverse knap til den funktion, vi lige har oprettet.

Trin 8: Diverse knapper funktion

Når du har tilsluttet alle de mærkede diverse knapper til deres passende funktion, kan du begynde at indsætte koden i funktionen 'knapper':

previousNumber = Dobbelt (label.text!)!

hvis sender.tag == 12 {// Opdel

label.text = "/";

}

hvis sender.tag == 13 {// Multiplicer

label.text = "x";

}

hvis sender.tag == 14 {// Træk fra

label.text = "-";

}

hvis sender.tag == 15 {// Tilføj

label.text = "+";

}

operation = afsender.tag

performingMath = true;

}

ellers hvis sender.tag == 16 {

hvis operation == 12 {// Divider

label.text = String (previousNumber / numberOnScreen)

}

ellers hvis operation == 13 {// Multiplicer

label.text = String (previousNumber * numberOnScreen)

}

ellers hvis operation == 14 {// Træk fra

label.text = String (previousNumber - numberOnScreen)

}

ellers hvis operation == 15 {// Tilføj

label.text = String (previousNumber + numberOnScreen)

}

}

ellers hvis sender.tag == 11 {

label.text = ""

foregåendeNummer = 0;

numberOnScreen = 0;

operation = 0;

}

Grundlæggende viser dette stykke kode en af de forskellige knapper, når der trykkes på det, og fortsætter med at beregne det endelige svar og viser det på etiketten.

Trin 9: Fuld kode

Hvis du ikke ville gå igennem og bygge lommeregneren trin for trin med mig, kan du blot tilføje elementerne til dit storyboard og kopiere og indsætte den fulde kode i din visningskontroller. Her er koden:

import UIKit

klasse ViewController: UIViewController {

var numberOnScreen: Dobbelt = 0;

var foregåendeNummer: Dobbelt = 0;

var performingMath = false;

var operation = 0;

@IBAction func -numre (_ afsender: UIButton) {

hvis performingMath == true {

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

numberOnScreen = Dobbelt (label.text!)!

performingMath = false

}

andet {

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

numberOnScreen = Dobbelt (label.text!)!

}

}

@IBOutlet svag var -etiket: UILabel!

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

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

previousNumber = Dobbelt (label.text!)!

hvis sender.tag == 12 {// Opdel

label.text = "/";

}

hvis sender.tag == 13 {// Multiplicer

label.text = "x";

}

hvis sender.tag == 14 {// Træk fra

label.text = "-";

}

hvis sender.tag == 15 {// Tilføj

label.text = "+";

}

operation = afsender.tag

performingMath = true;

}

ellers hvis sender.tag == 16 {

hvis operation == 12 {// Divider

label.text = String (previousNumber / numberOnScreen)

}

ellers hvis operation == 13 {// Multiplicer

label.text = String (previousNumber * numberOnScreen)

}

ellers hvis operation == 14 {// Træk fra

label.text = String (previousNumber - numberOnScreen)

}

ellers hvis operation == 15 {// Tilføj

label.text = String (previousNumber + numberOnScreen)

}

}

ellers hvis sender.tag == 11 {

label.text = ""

foregåendeNummer = 0;

numberOnScreen = 0;

operation = 0;

}

}

tilsidesætte func viewDidLoad () {

super.viewDidLoad ()

// Gør yderligere opsætning efter indlæsning af visningen, typisk fra en nib.

}

tilsidesætte func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Bortskaf alle ressourcer, der kan genskabes.

}

}