Përmbajtje:

Si të bëni një kalkulator në Xcode duke përdorur Swift: 9 hapa
Si të bëni një kalkulator në Xcode duke përdorur Swift: 9 hapa

Video: Si të bëni një kalkulator në Xcode duke përdorur Swift: 9 hapa

Video: Si të bëni një kalkulator në Xcode duke përdorur Swift: 9 hapa
Video: iOS App Development with Swift by Dan Armendariz 2024, Qershor
Anonim
Image
Image

Në këtë mësim të shpejtë, unë do t'ju tregoj se si të krijoni një kalkulator të thjeshtë duke përdorur Swift në Xcode. Ky aplikacion është ndërtuar që të duket pothuajse identik me aplikacionin kalkulator origjinal për iOS. Ju ose mund të ndiqni udhëzimet hap pas hapi dhe të ndërtoni kalkulatorin me mua, ose thjesht mund të shkoni në hapin e fundit dhe kopjoni dhe ngjisni kodin në kontrolluesin tuaj të shikimit. Sidoqoftë, nëse e bëni këtë, sigurohuni që të lidhni të gjithë elementët tuaj në storyboard me kontrolluesin tuaj të shikimit.

Hapi 1: Krijimi i projektit

Paraqitja e tabelës së tregimeve
Paraqitja e tabelës së tregimeve

Hapi i parë në krijimin e llogaritësit tonë është krijimi i projektit në Xcode. Ju mund ta bëni këtë duke klikuar "Krijo një projekt të ri Xcode" dhe duke e emëruar atë çfarëdo që dëshironi. Unë e quaj timen "Llogaritës". Hapi tjetër është të zgjidhni "Aplikacion me një pamje të vetme" për llojin e aplikacionit. Mbani të gjitha informacionet e tjera si vlerë të paracaktuar.

Hapi 2: Paraqitja e tabelës së tregimeve

Hapi 2 i krijimit të kalkulatorit tonë kërkon që ju të hartoni një paraqitje bazë në skenarin e tregimeve. Para se ta filloni këtë, ju rekomandoj të ndryshoni pajisjen tuaj imituese në iPhone 7 Plus. Filloni duke tërhequr një buton në tabelën e tregimit dhe duke ndryshuar dimensionet e tij në 89 x 89. Ndryshoni ngjyrën e sfondit në merkur në atributet inspektor dhe ngjyrën e shkronjave në tungsten. Tjetra, rregulloni fontin në Helvetica Light 30. Vazhdoni të kopjoni dhe ngjisni butonin derisa të keni gjithsej 20. Rregulloni paraqitjen e këtyre butonave në mënyrë që të keni pesë rreshta dhe katër kolona.

Hapi 3: Dizajni i Storyboard dhe Estetika

Dizajni i Storyboard dhe Estetika
Dizajni i Storyboard dhe Estetika

Fshini butonin e dytë në rreshtin e poshtëm dhe zgjeroni butonin e parë për të zënë këtë hapësirë. Ndryshoni vlerën e mbajtësit të këtij butoni në zero. Vazhdoni të ndryshoni vlerat e numrave dhe simbolet e secilit buton derisa të jetë praktikisht identik me figurën e treguar më sipër. Në inspektorin e atributeve, ngjyra gri më e errët është argjendi, portokalli është mandarinë, dhe ngjyra e shkronjave ndryshon në borë në butonat portokalli. Tjetra, klikoni në kontrolluesin e shikimit dhe ndryshoni ngjyrën e sfondit në të zezë. Shtoni një etiketë mbi butonat dhe rregulloni madhësinë e saj sipas asaj që ndiheni rehat. Rreshtoni tekstin në të djathtë dhe ndryshoni fontin e etiketës në dritën Helvetica 70. Nëse dëshironi, mund të shtoni kufizime në të gjithë elementët në mënyrë që aplikacioni të duket i njëjtë për të gjitha pajisjet.

Hapi 4: Lidhja dhe integrimi i elementeve

Lidhja dhe integrimi i elementeve
Lidhja dhe integrimi i elementeve
Lidhja dhe integrimi i elementeve
Lidhja dhe integrimi i elementeve

Hapni inspektorin e atributeve dhe ndryshoni etiketën për çdo buton të numrave. Etiketa duhet të jetë 1 më shumë se vlera numerike aktuale. Për shembull, butoni #0 duhet të ketë një vlerë etikete 1, butoni #1 duhet të ketë një vlerë etikete 2, butoni #2 duhet të ketë një vlerë etikete 3, dhe kështu me radhë. Tjetra, shtypni kontrollin, klikoni në butonin #0 dhe tërhiqeni atë mbi kontrolluesin e shikimit. Një dritare kërcyese duhet të shfaqet në ekran. Ndryshoni lidhjen në "veprim", llojin në "UIButton", ngjarjen në "Prek brenda", argumentet në "Dërgues" dhe emrin e saj në "numra". Ju mund ta ndryshoni emrin në çfarëdo që dëshironi, por kjo do të thotë që ju do të duhet ta ndryshoni përsëri emrin kur thërrisni funksionin më vonë në program. Tjetra, kontrolloni, klikoni dhe tërhiqni çdo buton të numrave në funksionin që sapo kemi krijuar. Tani, kontrolloni, klikoni dhe tërhiqni etiketën në program, por JO në funksion. Kjo do të thotë që ju thjesht e futni etiketën në funksion si një ndryshore të veçantë. Mos harroni, nëse jeni ngatërruar ndonjëherë me kodin, unë ju kam lënë të gjithë kodin tim që ta përdorni në hapin e fundit të këtij Udhëzuesi.

Hapi 5: Krijimi i Variablave

Krijimi i Variablave
Krijimi i Variablave

Në mënyrë që butonat tanë të numrave të jenë funksionalë, do të na duhet të lidhim vlerën e tyre me etiketën në funksionin tonë të "numrave". Ju mund ta bëni këtë duke krijuar së pari një ndryshore 'numberOnScreen' dhe e bëni atë të tipit të dyfishtë dhe të barabartë me 0: var numberOnScreen: Double = 0; Dhe mos harroni, nëse kodi këtu është pak i paqartë, unë ju kam lënë kodin e plotë në hapin e fundit që ju ta përdorni sipas dëshirës tuaj. Tjetra, vendosni një ndryshore tjetër 'performanceMath' të tipit bool dhe bëjeni të rremë: var kryerMath = false; Gjithashtu, krijoni një ndryshore tjetër të quajtur 'previousNumber' të tipit double dhe vendoseni atë të barabartë me 0: var previousNumber: Double = 0; Ndryshorja e fundit që duhet të krijoni është ndryshorja 'operacion'. Vendoseni atë të barabartë me 0: var operacion = 0;

Hapi 6: Funksioni i butonave të numrave

Funksioni i butonave të numrave
Funksioni i butonave të numrave

Pasi të keni krijuar ndryshoret e duhura, atëherë mund të vazhdoni të kopjoni dhe ngjisni këtë kod në funksionin tuaj të "numrave":

nëse performonMath == e vërtetë {

label.text = Vargu (dërguesi.tag-1)

numberOnScreen = Dyfish (etiketë. tekst!)!

kryerja e matematikës = false

}

tjeter {

label.text = label.text! + Varg (dërguesi.tag-1)

numberOnScreen = Dyfish (etiketë. tekst!)!

}

Në thelb, kjo pjesë e kodit shfaq numra të caktuar në etiketë kur shtypet butoni i duhur. Sidoqoftë, ne ende duhet të jemi në gjendje të përdorim të gjithë butonat e tjerë dhe ta bëjmë kalkulatorin funksional. Ne do ta bëjmë këtë në hapat e ardhshëm.

Hapi 7: Integrimi i butonave të operacionit

Integrimi i butonave të operacionit
Integrimi i butonave të operacionit
Integrimi i butonave të operacionit
Integrimi i butonave të operacionit

Hapni inspektorin e atributeve dhe ndryshoni etiketën për të gjithë butonat e ndryshëm. Butoni i qartë duhet të ketë një etiketë 11, butoni i ndarjes duhet të ketë një etiketë 12, butoni i shumëzimit duhet të ketë një etiketë 13, butoni i zbritjes duhet të ketë një etiketë 14, butoni i shtimit duhet të ketë një etiketë 15, dhe butoni i barabartë duhet të ketë një etiketë prej 16. Tjetra, shtypni kontrollin, klikoni në butonin e pastrimit dhe tërhiqeni atë mbi kontrolluesin e shikimit. Një dritare kërcyese duhet të shfaqet në ekran. Ndryshoni lidhjen në "veprim", llojin në "UIButton", ngjarjen në "Prek brenda", argumentet në "Dërgues" dhe emrin e tij në "butona". Ju mund ta ndryshoni emrin në çfarëdo që dëshironi, por kjo do të thotë që ju do të duhet ta ndryshoni përsëri emrin kur thërrisni funksionin më vonë në program. Tjetra, kontrolloni, klikoni dhe tërhiqni çdo buton të ndryshëm në funksionin që sapo kemi krijuar.

Hapi 8: Funksionet e Butonave të Ndryshëm

Funksione të Butonave të Ndryshëm
Funksione të Butonave të Ndryshëm

Pasi të keni lidhur të gjithë butonat e ndryshëm të etiketuar me funksionin e tyre të përshtatshëm, mund të filloni të futni kodin në funksionin e "butonave":

previousNumber = Dyfish (etiketë.teksti!)!

nëse dërguesi.tag == 12 {// Ndaj

label.text = "/";

}

nëse dërguesi.tag == 13 {// Shumëzo

label.text = "x";

}

nëse dërguesi.tag == 14 {// Zbrit

label.text = "-";

}

nëse dërguesi.tag == 15 {// Shto

label.text = "+";

}

operacion = dërguesi.tag

kryerjaMath = e vërtetë;

}

tjetër nëse dërguesi.tag == 16 {

nëse operacioni == 12 {// Ndaj

label.text = String (previousNumber / numberOnScreen)

}

tjetër nëse operacioni == 13 {// Shumëzo

label.text = String (previousNumer * numberOnScreen)

}

tjetër nëse operacioni == 14 {// Zbrit

label.text = String (previousNumber - numberOnScreen)

}

tjetër nëse operacioni == 15 {// Shto

label.text = String (previousNumber + numberOnScreen)

}

}

tjetër nëse dërguesi.tag == 11 {

label.text = ""

numri i mëparshëm = 0;

numberOnScreen = 0;

operacion = 0;

}

Në thelb, kjo pjesë e kodit shfaq një nga butonat e ndryshëm kur shtypet dhe vazhdon të llogarisë përgjigjen përfundimtare dhe e shfaq atë në etiketë.

Hapi 9: Kodi i plotë

Kodi i plotë
Kodi i plotë

Nëse nuk doni të kaloni dhe ndërtoni llogaritësin hap pas hapi me mua, atëherë thjesht mund të shtoni elementët në skedarin tuaj të tregimit dhe të kopjoni dhe ngjisni kodin e plotë në kontrolluesin tuaj të shikimit. Këtu është kodi:

importo UIKit

klasa ViewController: UIViewController {

var numberOnScreen: Dyfish = 0;

var previousNumri: Dyfish = 0;

var kryerMath = false;

operacioni var = 0;

@IBAction numrat funk (dërguesi: UIButton) {

nëse performonMath == e vërtetë {

label.text = Vargu (dërguesi.tag-1)

numberOnScreen = Dyfish (etiketë. tekst!)!

kryerjaMath = false

}

tjeter {

label.text = label.text! + Varg (dërguesi.tag-1)

numberOnScreen = Dyfish (etiketë. tekst!)!

}

}

@IBOutlet etiketë e dobët var: UILabel!

Butonat e funksionit @IBAction (_ dërguesi: UIButton) {

nëse label.text! = "" && dërguesi.tag! = 11 && dërguesi.tag! = 16 {

previousNumber = Dyfish (etiketë.teksti!)!

nëse dërguesi.tag == 12 {// Ndaj

label.text = "/";

}

nëse dërguesi.tag == 13 {// Shumëzo

label.text = "x";

}

nëse dërguesi.tag == 14 {// Zbrit

label.text = "-";

}

nëse dërguesi.tag == 15 {// Shto

label.text = "+";

}

operacion = dërguesi.tag

kryerjaMath = e vërtetë;

}

tjetër nëse dërguesi.tag == 16 {

nëse operacioni == 12 {// Ndaj

label.text = String (previousNumber / numberOnScreen)

}

tjetër nëse operacioni == 13 {// Shumëzo

label.text = String (previousNumer * numberOnScreen)

}

tjetër nëse operacioni == 14 {// Zbrit

label.text = String (previousNumber - numberOnScreen)

}

tjetër nëse operacioni == 15 {// Shto

label.text = String (previousNumber + numberOnScreen)

}

}

tjetër nëse dërguesi.tag == 11 {

label.text = ""

numri i mëparshëm = 0;

numberOnScreen = 0;

operacion = 0;

}

}

anashkaloni funksionin viewDidLoad () {

super.viewDidLoad ()

// Bëni ndonjë konfigurim shtesë pas ngarkimit të pamjes, zakonisht nga një majë.

}

anashkaloj funksionin didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Hidhni çdo burim që mund të rikrijohet.

}

}

Recommended: