Een rekenmachine maken in Xcode met Swift: 9 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:19

In deze korte tutorial laat ik je zien hoe je een eenvoudige rekenmachine maakt met Swift in Xcode. Deze app is gebouwd om er bijna identiek uit te zien als de originele rekenmachine-app voor iOS. Je kunt de aanwijzingen stap voor stap volgen en de rekenmachine samen met mij bouwen, of je kunt gewoon naar de laatste stap gaan en de code kopiëren en plakken in je viewcontroller. Als je dit echter doet, zorg er dan voor dat je al je elementen op het storyboard verbindt met je viewcontroller.

Stap 1: Het project maken

De eerste stap bij het maken van onze rekenmachine is om het project daadwerkelijk in Xcode te maken. U kunt dit doen door op "Een nieuw Xcode-project maken" te klikken en het een naam te geven die u maar wilt. Ik noemde de mijne "Rekenmachine". De volgende stap is om "Single View Application" te selecteren voor het app-type. Bewaar alle andere informatie als de standaardwaarde.

Stap 2: Storyboard-indeling

Stap 2 van het maken van onze rekenmachine vereist dat u een basislay-out in het storyboard ontwerpt. Voordat je hiermee begint, raad ik aan om je simulatorapparaat te wijzigen naar de iPhone 7 Plus. Begin door een knop naar het storyboard te slepen en de afmetingen te wijzigen in 89 x 89. Verander de achtergrondkleur in kwik in de attributeninspecteur en de letterkleur in wolfraam. Pas vervolgens het lettertype aan naar Helvetica Light 30. Blijf de knop kopiëren en plakken tot je er in totaal 20 hebt. Pas de lay-out van deze knoppen aan zodat je vijf rijen en vier kolommen hebt.

Stap 3: Storyboard-ontwerp en esthetiek

Verwijder de tweede knop op de onderste rij en vouw de eerste knop uit om deze ruimte over te nemen. Wijzig de waarde van de tijdelijke aanduiding van deze knop in nul. Ga door met het wijzigen van de nummerwaarden en symbolen van elke knop totdat deze praktisch identiek is aan de afbeelding hierboven. In de attributeninspecteur is de donkergrijze kleur zilver, de oranje kleur mandarijn en de tekstkleur is veranderd in sneeuw op de oranje knoppen. Klik vervolgens op de weergavecontroller en verander de achtergrondkleur in zwart. Voeg een label toe boven de knopen en pas de grootte aan zoals jij je prettig voelt. Lijn de tekst naar rechts uit en wijzig het lettertype van het label in Helvetica light 70. Als je wilt, kun je beperkingen toevoegen aan alle elementen om de app er voor alle apparaten hetzelfde uit te laten zien.

Stap 4: Elementen verbinden en integreren

Open de attributeninspecteur en wijzig de tag voor elke afzonderlijke cijferknop. De tag moet 1 meer zijn dan de werkelijke numerieke waarde. De #0-knop moet bijvoorbeeld een tagwaarde van 1 hebben, de #1-knop moet een tagwaarde van 2 hebben, de #2-knop moet een tagwaarde van 3 hebben, enzovoort. Druk vervolgens op Control, klik op de #0-knop en sleep deze naar de viewcontroller. Er zou een pop-up op het scherm moeten verschijnen. Wijzig de verbinding in 'actie', het type in 'UIButton', de gebeurtenis in 'Touch Up Inside', de argumenten in 'Afzender' en de naam in 'nummers'. U kunt de naam wijzigen in wat u maar wilt, maar dat betekent dat u de naam opnieuw moet wijzigen wanneer u de functie later in het programma aanroept. Bedien, klik en sleep vervolgens elke cijferknop naar de functie die we zojuist hebben gemaakt. Controleer, klik en sleep het label nu naar het programma, maar NIET naar de functie. Dit betekent dat je het label gewoon als aparte variabele in de functie brengt. Onthoud dat als je ooit in de war bent over de code, ik al mijn code voor je heb achtergelaten om te gebruiken bij de laatste stap van deze Instructable.

Stap 5: Variabelen vaststellen

Om onze cijfertoetsen functioneel te maken, zullen we hun waarde moeten koppelen aan het label in onze 'nummers'-functie. U kunt dit doen door eerst een variabele 'numberOnScreen' aan te maken en deze van het type double en gelijk aan 0 te maken: var numberOnScreen: Double = 0; En vergeet niet, als de code hier een beetje onduidelijk is, ik heb je de volledige code bij de laatste stap achtergelaten die je naar wens kunt gebruiken. Stel vervolgens een andere variabele 'performingMath' van het type bool in en maak deze false: var performingMath = false; Maak ook een andere variabele met de naam 'previousNumber' van het type double en stel deze in op 0: var previousNumber: Double = 0; De laatste variabele die je moet aanmaken is de 'operation' variabele. Stel het gelijk aan 0: var operatie = 0;

Stap 6: Cijferknoppen Functie

Nadat u de juiste variabelen hebt vastgesteld, kunt u doorgaan met het kopiëren en plakken van deze code in uw 'nummers'-functie:

if PerformingMath == true {

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

numberOnScreen = Dubbel(label.tekst!)!

presterenMath = false

}

anders {

label.tekst = label.tekst! + String (afzender.tag-1)

numberOnScreen = Dubbel(label.tekst!)!

}

In wezen geeft dit stukje code bepaalde nummers op het label weer wanneer op de juiste knop wordt gedrukt. We moeten echter nog steeds alle andere knoppen kunnen gebruiken en de rekenmachine functioneel maken. We zullen dit in de volgende paar stappen doen.

Stap 7: Bedieningsknoppen integreren

Open de attributeninspecteur en wijzig de tag voor alle diverse knoppen. De duidelijke knop moet een tag van 11 hebben, de deelknop moet een tag van 12 hebben, de vermenigvuldigingsknop moet een tag van 13 hebben, de aftrekknop moet een tag van 14 hebben, de optelknop moet een tag van 15 hebben, en de equal-knop moet een tag van 16 hebben. Druk vervolgens op control, klik op de clear-knop en sleep deze naar de view-controller. Er zou een pop-up op het scherm moeten verschijnen. Wijzig de verbinding in 'action', het type in 'UIButton', de gebeurtenis in 'Touch Up Inside', de argumenten in 'Sender' en de naam in 'buttons'. U kunt de naam wijzigen in wat u maar wilt, maar dat betekent dat u de naam opnieuw moet wijzigen wanneer u de functie later in het programma aanroept. Bedien, klik en sleep vervolgens elke diverse knop naar de functie die we zojuist hebben gemaakt.

Stap 8: Diverse knoppen Functie

Nadat u alle getagde diverse knoppen hebt verbonden met hun juiste functie, kunt u beginnen met het invoegen van de code in de functie 'knoppen':

previousNumber = Double(label.text!)!

if afzender.tag == 12 {//Verdelen

label.tekst = "/";

}

if afzender.tag == 13 {//Vermenigvuldigen

label.tekst = "x";

}

if afzender.tag == 14 {//Aftrekken

label.tekst = "-";

}

if afzender.tag == 15 { //Toevoegen

label.tekst = "+";

}

operatie = afzender.tag

presterenMath = waar;

}

anders als afzender.tag == 16 {

if operatie == 12 {//Delen

label.text = String (vorige nummer / nummer op scherm)

}

anders als bewerking == 13 {//Vermenigvuldigen

label.text = String (vorige nummer * nummer op scherm)

}

else if operatie == 14 {//Aftrekken

label.text = String (vorige nummer - nummer op scherm)

}

else if operatie == 15{ //Toevoegen

label.text = String (vorige nummer + nummer op scherm)

}

}

anders als afzender.tag == 11{

label.tekst = ""

vorig nummer = 0;

nummer op scherm = 0;

operatie = 0;

}

In wezen geeft dit stukje code een van de diverse knoppen weer wanneer erop wordt gedrukt en wordt het uiteindelijke antwoord berekend en weergegeven op het label.

Stap 9: Volledige code

Als je de rekenmachine niet stap voor stap met mij wilt doornemen en bouwen, dan kun je eenvoudig de elementen aan je storyboard toevoegen en de volledige code kopiëren en plakken in je viewcontroller. Hier is de code:

import UIKit

klasse ViewController: UIViewController {

var numberOnScreen: Dubbel = 0;

var previousNumber: Dubbel = 0;

var performingMath = false;

var bewerking = 0;

@IBAction functienummers(_ afzender: UIButton) {

if PerformingMath == true {

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

numberOnScreen = Dubbel(label.tekst!)!

presterenMath = false

}

anders {

label.tekst = label.tekst! + String (afzender.tag-1)

numberOnScreen = Dubbel(label.tekst!)!

}

}

@IBOutlet zwak var-label: UILabel!

@IBAction-functieknoppen (_ afzender: UIButton) {

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

previousNumber = Double(label.text!)!

if afzender.tag == 12 {//Verdelen

label.tekst = "/";

}

if afzender.tag == 13 {//Vermenigvuldigen

label.tekst = "x";

}

if afzender.tag == 14 {//Aftrekken

label.tekst = "-";

}

if afzender.tag == 15 { //Toevoegen

label.tekst = "+";

}

operatie = afzender.tag

presterenMath = waar;

}

anders als afzender.tag == 16 {

if operatie == 12 {//Delen

label.text = String (vorige nummer / nummer op scherm)

}

anders als bewerking == 13 {//Vermenigvuldigen

label.text = String (vorige nummer * nummer op scherm)

}

else if operatie == 14 {//Aftrekken

label.text = String (vorige nummer - nummer op scherm)

}

else if operatie == 15{ //Toevoegen

label.text = String (vorige nummer + nummer op scherm)

}

}

anders als afzender.tag == 11{

label.tekst = ""

vorig nummer = 0;

nummer op scherm = 0;

operatie = 0;

}

}

overschrijven func viewDidLoad() {

super.viewDidLoad()

// Voer aanvullende instellingen uit na het laden van de weergave, meestal vanaf een punt.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Gooi alle bronnen weg die opnieuw kunnen worden gemaakt.

}

}