Hur man gör en räknare i Xcode med Swift: 9 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

I denna snabba handledning kommer jag att visa dig hur du skapar en enkel räknare med Swift i Xcode. Denna app är byggd för att se nästan identisk ut med den ursprungliga kalkylatorappen för iOS. Du kan antingen följa anvisningarna steg-för-steg och bygga miniräknaren med mig, eller så kan du helt enkelt gå till det sista steget och kopiera och klistra in koden i din vykontroll. Men om du gör detta, se till att ansluta alla dina element på storyboard med din view controller.

Steg 1: Skapa projektet

Det första steget i vår kalkylator är att faktiskt skapa projektet i Xcode. Du kan göra detta genom att klicka på "Skapa ett nytt Xcode -projekt" och namnge det vad du vill. Jag kallade min "Miniräknare". Nästa steg är att välja "Single View Application" för apptypen. Behåll all annan information som standardvärde.

Steg 2: Storyboard Layout

Steg 2 för att skapa vår miniräknare kräver att du utformar en grundläggande layout i storyboard. Innan du börjar detta rekommenderar jag att du byter simulator till iPhone 7 Plus. Börja med att dra en knapp till storyboard och ändra dess mått till 89 x 89. Ändra dess bakgrundsfärg till kvicksilver på attributinspektören och dess teckensnittsfärg till volfram. Justera sedan teckensnittet till Helvetica Light 30. Fortsätt att kopiera och klistra in knappen tills du har totalt 20. Justera layouten för dessa knappar så att du har fem rader och fyra kolumner.

Steg 3: Storyboard Design och estetik

Ta bort den andra knappen på den nedre raden och expandera den första knappen för att ta över detta utrymme. Ändra platshållarens värde för denna knapp till noll. Fortsätt att ändra siffervärden och symboler för varje knapp tills den är praktiskt taget identisk med bilden ovan. På attributinspektören är den mörkare grå färgen silver, den orange färgen är mandarin och teckensnittsfärgen ändras till snö på de orange knapparna. Klicka sedan på view controller och ändra dess bakgrundsfärg till svart. Lägg till en etikett ovanför knapparna och justera storleken så att du känner dig bekväm. Rikta in texten till höger och ändra etikettens teckensnitt till Helvetica light 70. Om du vill kan du lägga till begränsningar för alla element för att appen ska se likadan ut för alla enheter.

Steg 4: Anslutning och integrering av element

Öppna attributinspektören och ändra taggen för varje sifferknapp. Taggen ska vara 1 mer än det verkliga numeriska värdet. Till exempel bör #0 -knappen ha ett taggvärde 1, #1 -knappen ska ha ett taggvärde 2, #2 -knappen ska ha ett taggvärde 3 och så vidare. Tryck sedan på kontroll, klicka på #0 -knappen och dra den till visningskontrollen. En popup ska visas på skärmen. Ändra anslutningen till "åtgärd", typen till "UIButton", händelsen till "Touch Up Inside", argumenten till "Avsändare" och dess namn till "nummer". Du kan ändra namnet till vad du vill, men det betyder att du måste byta namn igen när du ringer funktionen senare i programmet. Kontrollera, klicka och dra sedan varje sifferknapp till funktionen som vi just skapade. Kontrollera, klicka och dra etiketten till programmet, men INTE till funktionen. Detta innebär att du helt enkelt tar in etiketten i funktionen som en separat variabel. Kom ihåg att om du någonsin är förvirrad om koden har jag lämnat all min kod som du kan använda på det sista steget i denna instruktionsbok.

Steg 5: Upprätta variabler

För att våra sifferknappar ska fungera måste vi koppla deras värde till etiketten i vår "nummer" -funktion. Du kan göra detta genom att först skapa en variabel 'numberOnScreen' och göra den av typen dubbel och lika med 0: var numberOnScreen: Double = 0; Och glöm inte, om koden här är lite oklar, har jag lämnat hela koden på det sista steget för dig att använda efter dina önskemål. Upprätta sedan en annan variabel 'performingMath' av typen bool och gör den falsk: var performingMath = false; Skapa också en annan variabel som heter 'previousNumber' av typen double och ställ in den lika med 0: var previousNumber: Double = 0; Den sista variabeln du måste skapa är variabeln 'operation'. Ställ in det lika med 0: var operation = 0;

Steg 6: Nummerknappar Funktion

När du har fastställt lämpliga variabler kan du fortsätta att kopiera och klistra in den här koden i din "nummer" -funktion:

if performingMath == true {

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

numberOnScreen = Dubbel (etikett.text!)!

performingMath = false

}

annat {

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

numberOnScreen = Dubbel (etikett.text!)!

}

I huvudsak visar den här koden vissa nummer på etiketten när du trycker på lämplig knapp. Vi behöver dock fortfarande kunna använda alla andra knappar och göra miniräknaren funktionell. Vi kommer att göra detta i nästa par steg.

Steg 7: Integrera funktionsknappar

Öppna attributinspektören och ändra taggen för alla diverse knappar. Den tydliga knappen ska ha en tagg på 11, divisionsknappen ska ha en tagg på 12, multiplikationsknappen ska ha en tagg på 13, subtraktionsknappen ska ha en tagg på 14, tilläggsknappen ska ha en tagg på 15, och samma knapp ska ha en etikett på 16. Tryck sedan på kontroll, klicka på knappen för att rensa och dra den till visningskontrollen. En popup ska visas på skärmen. Ändra anslutningen till "åtgärd", typen till "UIButton", händelsen till "Touch Up Inside", argumenten till "Avsändare" och dess namn till "knappar". Du kan ändra namnet till vad du vill, men det betyder att du måste byta namn igen när du ringer funktionen senare i programmet. Kontrollera, klicka och dra sedan alla olika knappar till funktionen som vi just skapade.

Steg 8: Övriga knappar funktion

När du har anslutit alla taggade diverse knappar till lämplig funktion kan du börja infoga koden i funktionen "knappar":

previousNumber = Dubbel (label.text!)!

if sender.tag == 12 {// Divide

label.text = "/";

}

if sender.tag == 13 {// Multiplicera

label.text = "x";

}

if sender.tag == 14 {// Subtrahera

label.text = "-";

}

if sender.tag == 15 {// Lägg till

label.text = "+";

}

operation = avsändare. tag

performingMath = true;

}

annars om avsändare.tag == 16 {

if operation == 12 {// Divide

label.text = String (previousNumber / numberOnScreen)

}

annars om operation == 13 {// Multiplicera

label.text = String (previousNumber * numberOnScreen)

}

annars om operation == 14 {// Subtrahera

label.text = String (previousNumber - numberOnScreen)

}

annars om operation == 15 {// Lägg till

label.text = String (previousNumber + numberOnScreen)

}

}

annars om avsändare.tag == 11 {

label.text = ""

föregående nummer = 0;

numberOnScreen = 0;

operation = 0;

}

I huvudsak visar denna kodbit en av de olika knapparna när den trycks in och fortsätter att beräkna det slutliga svaret och visar det på etiketten.

Steg 9: Fullständig kod

Om du inte ville gå igenom och bygga miniräknaren steg för steg med mig, kan du helt enkelt lägga till elementen i din storyboard och kopiera och klistra in hela koden i din view controller. Här är koden:

importera UIKit

klass ViewController: UIViewController {

var numberOnScreen: Dubbel = 0;

var föregående Antal: Dubbel = 0;

var performingMath = false;

var operation = 0;

@IBAction func -nummer (_ avsändare: UIButton) {

if performingMath == true {

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

numberOnScreen = Dubbel (etikett.text!)!

performingMath = false

}

annat {

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

numberOnScreen = Dubbel (etikett.text!)!

}

}

@IBOutlet svag var etikett: UILabel!

@IBAction func -knappar (_ avsändare: UIButton) {

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

previousNumber = Dubbel (label.text!)!

if sender.tag == 12 {// Divide

label.text = "/";

}

if sender.tag == 13 {// Multiplicera

label.text = "x";

}

if sender.tag == 14 {// Subtrahera

label.text = "-";

}

if sender.tag == 15 {// Lägg till

label.text = "+";

}

operation = avsändare. tag

performingMath = true;

}

annars om avsändare.tag == 16 {

if operation == 12 {// Divide

label.text = String (previousNumber / numberOnScreen)

}

annars om operation == 13 {// Multiplicera

label.text = String (previousNumber * numberOnScreen)

}

annars om operation == 14 {// Subtrahera

label.text = String (previousNumber - numberOnScreen)

}

annars om operation == 15 {// Lägg till

label.text = String (previousNumber + numberOnScreen)

}

}

annars om avsändare.tag == 11 {

label.text = ""

föregående nummer = 0;

numberOnScreen = 0;

operation = 0;

}

}

åsidosätta func viewDidLoad () {

super.viewDidLoad ()

// Gör någon ytterligare inställning efter att du läst in vyn, vanligtvis från en spets.

}

åsidosätta func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Kassera alla resurser som kan återskapas.

}

}