Cuprins:

Cum se face un calculator în Xcode folosind Swift: 9 pași
Cum se face un calculator în Xcode folosind Swift: 9 pași

Video: Cum se face un calculator în Xcode folosind Swift: 9 pași

Video: Cum se face un calculator în Xcode folosind Swift: 9 pași
Video: watchOS :- Build first  watchOS App  in just 5 minutes Xcode, Swift 2024, Iunie
Anonim
Image
Image

În acest tutorial rapid, vă voi arăta cum să creați un calculator simplu folosind Swift în Xcode. Această aplicație este construită pentru a arăta aproape identică cu aplicația originală pentru calculator pentru iOS. Puteți să urmați instrucțiunile pas cu pas și să construiți calculatorul împreună cu mine, sau pur și simplu puteți merge la ultimul pas și puteți copia și lipi codul în controlerul de vizualizare. Cu toate acestea, dacă faceți acest lucru, asigurați-vă că vă conectați toate elementele de pe storyboard cu controlerul de vizualizare.

Pasul 1: Crearea proiectului

Aspect Storyboard
Aspect Storyboard

Primul pas în realizarea calculatorului nostru este să creăm de fapt proiectul în Xcode. Puteți face acest lucru făcând clic pe „Creați un nou proiect Xcode” și denumiți-l oricum doriți. Pe mine am numit-o „Calculator”. Următorul pas este să selectați „Aplicație cu vizualizare unică” pentru tipul de aplicație. Păstrați toate celelalte informații ca valoare implicită.

Pasul 2: Layout Storyboard

Pasul 2 al creării calculatorului nostru necesită proiectarea unui aspect de bază în storyboard. Înainte de a începe acest lucru, vă recomand să schimbați dispozitivul simulator pe iPhone 7 Plus. Începeți prin glisarea unui buton pe storyboard și schimbarea dimensiunilor acestuia la 89 x 89. Schimbați culoarea de fundal în mercur pe inspectorul de atribute și culoarea fontului în tungsten. Apoi, reglați fontul la Helvetica Light 30. Continuați să copiați și să inserați butonul până când aveți un total de 20. Reglați aspectul acestor butoane astfel încât să aveți cinci rânduri și patru coloane.

Pasul 3: Storyboard Design și estetică

Storyboard Design și estetică
Storyboard Design și estetică

Ștergeți al doilea buton din rândul de jos și extindeți primul buton pentru a prelua acest spațiu. Schimbați valoarea substituentului acestui buton la zero. Continuați să modificați valorile numerice și simbolurile fiecărui buton până când este practic identic cu imaginea de mai sus. În inspectorul de atribute, culoarea gri mai închisă este argintiu, culoarea portocalie este mandarina, iar culoarea fontului este schimbată în zăpadă pe butoanele portocalii. Apoi, faceți clic pe controlerul de vizualizare și schimbați culoarea de fundal în negru. Adăugați o etichetă deasupra butoanelor și reglați dimensiunea acesteia pentru a vă simți confortabil. Aliniați textul la dreapta și schimbați fontul etichetei la Helvetica light 70. Dacă doriți, puteți adăuga constrângeri la toate elementele pentru a face ca aplicația să arate la fel pentru toate dispozitivele.

Pasul 4: Conectarea și integrarea elementelor

Conectarea și integrarea elementelor
Conectarea și integrarea elementelor
Conectarea și integrarea elementelor
Conectarea și integrarea elementelor

Deschideți inspectorul de atribute și schimbați eticheta pentru fiecare buton de număr. Eticheta ar trebui să fie cu 1 mai mult decât valoarea numerică reală. De exemplu, butonul # 0 trebuie să aibă o valoare de etichetă 1, butonul # 1 să aibă o valoare de etichetă 2, butonul # 2 să aibă o valoare de etichetă 3 și așa mai departe. Apoi, apăsați control, faceți clic pe butonul # 0 și trageți-l pe controlerul de vizualizare. Pe ecran ar trebui să apară un popup. Schimbați conexiunea la „acțiune”, tipul la „UIButton”, evenimentul la „Touch Up Inside”, argumentele la „Expeditor” și numele său la „numere”. Puteți schimba numele în orice doriți, dar asta înseamnă că va trebui să schimbați din nou numele atunci când apelați funcția mai târziu în program. Apoi, controlați, faceți clic și trageți fiecare buton numeric în funcția pe care tocmai am creat-o. Acum, controlați, faceți clic și trageți eticheta în program, dar NU în funcție. Aceasta înseamnă că pur și simplu aduceți eticheta în funcție ca o variabilă separată. Amintiți-vă, dacă sunteți confuz vreodată cu privire la cod, am lăsat tot codul meu pe care să îl utilizați la ultimul pas al acestui instructabil.

Pasul 5: Stabilirea variabilelor

Stabilirea variabilelor
Stabilirea variabilelor

Pentru a face funcționale butoanele noastre numerice, va trebui să le conectăm valoarea la etichetă în funcția noastră „numere”. Puteți face acest lucru creând mai întâi o variabilă „numberOnScreen” și faceți-o de tip double și egal cu 0: var numberOnScreen: Double = 0; Și nu uitați, dacă codul de aici este puțin neclar, v-am lăsat codul complet pe ultimul pas pe care să îl utilizați după bunul plac. Apoi, stabiliți o altă variabilă „performingMath” de tip bool și faceți-o falsă: var performingMath = false; De asemenea, creați o altă variabilă numită „previousNumber” de tip double și setați-o egală cu 0: var previousNumber: Double = 0; Ultima variabilă pe care trebuie să o creați este variabila „operațiune”. Setați-l egal cu 0: operație var = 0;

Pasul 6: Funcția Butoanelor numerice

Funcția Butoane numerice
Funcția Butoane numerice

După ce ați stabilit variabilele corespunzătoare, puteți continua să copiați și să inserați acest cod în funcția „numere”:

if performingMath == true {

label.text = Șir (sender.tag-1)

numberOnScreen = Dublu (label.text!)!

performingMath = false

}

altceva {

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

numberOnScreen = Dublu (label.text!)!

}

În esență, această bucată de cod afișează anumite numere pe etichetă atunci când este apăsat butonul corespunzător. Cu toate acestea, trebuie totuși să putem utiliza toate celelalte butoane și să facem calculatorul funcțional. Vom face acest lucru în următorii pași.

Pasul 7: Integrarea butoanelor de operare

Integrarea butoanelor de operare
Integrarea butoanelor de operare
Integrarea butoanelor de operare
Integrarea butoanelor de operare

Deschideți inspectorul de atribute și modificați eticheta pentru toate butoanele diverse. Butonul de ștergere ar trebui să aibă o etichetă de 11, butonul de divizare ar trebui să aibă o etichetă de 12, butonul de înmulțire să aibă o etichetă de 13, butonul de scădere să aibă o etichetă de 14, butonul de adunare să aibă o etichetă de 15, iar butonul egal ar trebui să aibă o etichetă de 16. Apoi, apăsați control, faceți clic pe butonul de ștergere și trageți-l pe controlerul de vizualizare. Pe ecran ar trebui să apară un popup. Schimbați conexiunea la „acțiune”, tipul la „UIButton”, evenimentul la „Touch Up Inside”, argumentele la „Expeditor” și numele acestuia la „butoane”. Puteți schimba numele în orice doriți, dar asta înseamnă că va trebui să schimbați din nou numele atunci când apelați funcția mai târziu în program. Apoi, controlați, faceți clic și trageți fiecare buton divers în funcția pe care tocmai am creat-o.

Pasul 8: Funcția de butoane diverse

Funcția de butoane diverse
Funcția de butoane diverse

După ce ați conectat toate butoanele diverse etichetate la funcția lor corespunzătoare, puteți începe să inserați codul în funcția „butoane”:

previousNumber = Dublu (label.text!)!

dacă expeditor.tag == 12 {// Împarte

label.text = "/";

}

dacă expeditor.tag == 13 {// Înmulțiți

label.text = "x";

}

if sender.tag == 14 {// Scădere

label.text = "-";

}

if sender.tag == 15 {// Adăugați

label.text = "+";

}

operațiune = expeditor.tag

performingMath = adevărat;

}

altfel dacă sender.tag == 16 {

dacă operație == 12 {// Împarte

label.text = String (previousNumber / numberOnScreen)

}

else if operație == 13 {// Înmulțiți

label.text = String (previousNumber * numberOnScreen)

}

else if operație == 14 {// Scădeți

label.text = String (previousNumber - numberOnScreen)

}

else if operație == 15 {// Adăugați

label.text = String (previousNumber + numberOnScreen)

}

}

altfel dacă sender.tag == 11 {

label.text = ""

Numărul precedent = 0;

numberOnScreen = 0;

operație = 0;

}

În esență, această bucată de cod afișează unul dintre butoanele diverse atunci când este apăsat și continuă să calculeze răspunsul final și îl afișează pe etichetă.

Pasul 9: Cod complet

Cod complet
Cod complet

Dacă nu ați vrut să parcurgeți și să construiți calculatorul pas cu pas cu mine, atunci puteți pur și simplu adăuga elemente în storyboard-ul dvs. și puteți copia și lipi codul complet în controlerul de vizualizare. Iată codul:

import UIKit

clasa ViewController: UIViewController {

var numberOnScreen: Double = 0;

var Număr anterior: Dublu = 0;

var performingMath = false;

operare var = 0;

@IBAction func numere (_ expeditor: UIButton) {

if performingMath == true {

label.text = Șir (sender.tag-1)

numberOnScreen = Dublu (label.text!)!

performingMath = false

}

altceva {

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

numberOnScreen = Dublu (label.text!)!

}

}

@IBOutlet etichetă var slab: UILabel!

Butoane funcționale @IBAction (_ expeditor: UIButton) {

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

previousNumber = Dublu (label.text!)!

dacă expeditor.tag == 12 {// Împarte

label.text = "/";

}

dacă expeditor.tag == 13 {// Înmulțiți

label.text = "x";

}

if sender.tag == 14 {// Scădere

label.text = "-";

}

if sender.tag == 15 {// Adăugați

label.text = "+";

}

operațiune = expeditor.tag

performingMath = adevărat;

}

altfel dacă sender.tag == 16 {

dacă operație == 12 {// Împarte

label.text = String (previousNumber / numberOnScreen)

}

else if operație == 13 {// Înmulțiți

label.text = String (previousNumber * numberOnScreen)

}

else if operație == 14 {// Scădeți

label.text = String (previousNumber - numberOnScreen)

}

else if operație == 15 {// Adăugați

label.text = String (previousNumber + numberOnScreen)

}

}

altfel dacă sender.tag == 11 {

label.text = ""

Numărul precedent = 0;

numberOnScreen = 0;

operație = 0;

}

}

suprascrie funcții viewDidLoad () {

super.viewDidLoad ()

// Efectuați orice configurare suplimentară după încărcarea vizualizării, de obicei dintr-un plumb.

}

suprascrie funcțiile didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Eliminați orice resurse care pot fi recreate.

}

}

Recomandat: