Съдържание:

Как да направите калкулатор в Xcode с помощта на Swift: 9 стъпки
Как да направите калкулатор в Xcode с помощта на Swift: 9 стъпки

Видео: Как да направите калкулатор в Xcode с помощта на Swift: 9 стъпки

Видео: Как да направите калкулатор в Xcode с помощта на Swift: 9 стъпки
Видео: iOS App Development with Swift by Dan Armendariz 2024, Ноември
Anonim
Image
Image

В този бърз урок ще ви покажа как да създадете прост калкулатор, използвайки Swift в Xcode. Това приложение е създадено да изглежда почти идентично с оригиналното приложение за калкулатор за iOS. Можете или да следвате инструкциите стъпка по стъпка и да изградите калкулатора с мен, или просто да преминете към последната стъпка и да копирате и поставите кода във вашия контролер за изглед. Ако обаче направите това, уверете се, че сте свързали всичките си елементи на сториборда с контролера за изглед.

Стъпка 1: Създаване на проекта

Оформление на Storyboard
Оформление на Storyboard

Първата стъпка в създаването на нашия калкулатор е всъщност да създадете проекта в Xcode. Можете да направите това, като щракнете върху „Създаване на нов проект за Xcode“и го наречете с каквото искате. Нарекох моя „Калкулатор“. Следващата стъпка е да изберете „Single View Application“за типа на приложението. Запазете цялата друга информация като стойност по подразбиране.

Стъпка 2: Оформление на Storyboard

Стъпка 2 от създаването на нашия калкулатор изисква от вас да проектирате основно оформление в сториборда. Преди да започнете това, препоръчвам да смените вашето симулиращо устройство на iPhone 7 Plus. Започнете, като плъзнете бутон върху сториборда и промените размерите му на 89 x 89. Променете цвета на фона му на живак в инспектора на атрибутите и цвета на шрифта му на волфрам. След това настройте шрифта на Helvetica Light 30. Продължете да копирате и поставяте бутона, докато не получите общо 20. Настройте оформлението на тези бутони така, че да имате пет реда и четири колони.

Стъпка 3: Дизайн и естетика на Storyboard

Storyboard Design и естетика
Storyboard Design и естетика

Изтрийте втория бутон в долния ред и разгънете първия бутон, за да заемете това пространство. Променете стойността на заместителя на този бутон на нула. Продължете да променяте стойностите на цифрите и символите на всеки бутон, докато практически стане идентичен с картината, показана по -горе. На инспектора на атрибутите по -тъмният сив цвят е сребрист, оранжевият цвят е мандарина, а цветът на шрифта е променен на сняг върху оранжевите бутони. След това щракнете върху контролера за изглед и променете цвета на фона му на черен. Добавете етикет над бутоните и регулирайте неговия размер така, че да се чувствате комфортно. Подравнете текста вдясно и променете шрифта на етикета на Helvetica light 70. Ако искате, можете да добавите ограничения към всички елементи, за да накарате приложението да изглежда еднакво за всички устройства.

Стъпка 4: Свързване и интегриране на елементи

Свързващи и интегриращи елементи
Свързващи и интегриращи елементи
Свързващи и интегриращи елементи
Свързващи и интегриращи елементи

Отворете инспектора на атрибутите и променете маркера за всеки бутон с число. Етикетът трябва да е с 1 повече от действителната цифрова стойност. Например бутонът #0 трябва да има стойност на етикет 1, бутон #1 трябва да има стойност на маркер 2, бутон #2 трябва да има стойност на маркер 3 и т.н. След това натиснете control, щракнете върху бутона #0 и го плъзнете върху контролера за изглед. На екрана трябва да се появи изскачащ прозорец. Променете връзката на „действие“, типа на „UIButton“, на събитието на „Докосване вътре“, аргументите на „Изпращач“и името му на „номера“. Можете да промените името на каквото искате, но това означава, че ще трябва да промените името отново, когато извиквате функцията по -късно в програмата. След това контролирайте, щракнете и плъзнете всеки цифров бутон във функцията, която току -що създадохме. Сега контролирайте, щракнете и плъзнете етикета в програмата, но НЕ във функцията. Това означава, че просто въвеждате етикета във функцията като отделна променлива. Не забравяйте, че ако някога сте объркани относно кода, оставих целия си код, за да го използвате в последната стъпка на тази инструкция.

Стъпка 5: Установяване на променливи

Установяване на променливи
Установяване на променливи

За да направим нашите цифрови бутони функционални, ще трябва да свържем тяхната стойност с етикета в нашата функция „номера“. Можете да направите това, като първо създадете променлива 'numberOnScreen' и я направите от тип double и равна на 0: var numberOnScreen: Double = 0; И не забравяйте, че ако кодът тук е малко неясен, оставих ви пълния код на последната стъпка, който можете да използвате по ваш вкус. След това установете друга променлива 'performansMath' от тип bool и я направете невярна: var performanseMath = false; Също така създайте друга променлива, наречена „previousNumber“от тип double и я задайте равна на 0: var previousNumber: Double = 0; Последната променлива, която трябва да създадете, е променливата 'operation'. Задайте го равно на 0: var operation = 0;

Стъпка 6: Функция с цифрови бутони

Функция бутони с цифри
Функция бутони с цифри

След като установите подходящите променливи, можете да продължите да копирате и поставите този код във вашата функция „номера“:

ако изпълнитеMath == true {

label.text = Низ (sender.tag-1)

numberOnScreen = Двойно (label.text!)!

performanceMath = невярно

}

иначе {

label.text = label.text! + Низ (sender.tag-1)

numberOnScreen = Double (label.text!)!

}

По същество това парче код показва определени числа на етикета, когато се натисне съответния бутон. Все пак трябва да можем да използваме всички останали бутони и да направим калкулатора функционален. Ще направим това в следващите няколко стъпки.

Стъпка 7: Интегриране на бутоните за работа

Интегриране на бутони за работа
Интегриране на бутони за работа
Интегриране на бутони за работа
Интегриране на бутони за работа

Отворете инспектора на атрибутите и променете маркера за всички други бутони. Бутонът за изчистване трябва да има маркер 11, бутонът за разделяне трябва да има маркер 12, бутонът за умножение трябва да има маркер 13, бутонът за изваждане трябва да има маркер 14, бутонът за добавяне трябва да има маркер 15, и бутонът за равенство трябва да има маркер 16. След това натиснете control, щракнете върху бутона за изчистване и го плъзнете върху контролера за изглед. На екрана трябва да се появи изскачащ прозорец. Променете връзката на „действие“, типа на „UIButton“, събитието на „Докоснете се вътре“, аргументите на „Изпращач“и името му на „бутони“. Можете да промените името на каквото искате, но това означава, че ще трябва да промените името отново, когато извиквате функцията по -късно в програмата. След това контролирайте, щракнете и плъзнете всеки различен бутон във функцията, която току -що създадохме.

Стъпка 8: Функция на различни бутони

Различни функции на бутоните
Различни функции на бутоните

След като свържете всички маркирани различни бутони към съответната им функция, можете да започнете да вмъквате кода във функцията „бутони“:

previousNumber = Double (label.text!)!

ако sender.tag == 12 {// Разделяне

label.text = "/";

}

ако sender.tag == 13 {// Умножете

label.text = "x";

}

ако sender.tag == 14 {// Изваждане

label.text = "-";

}

ако sender.tag == 15 {// Добавяне

label.text = "+";

}

операция = изпращач.таг

performanceMath = вярно;

}

иначе, ако sender.tag == 16 {

ако операция == 12 {// Разделяне

label.text = Низ (предишенNumber / numberOnScreen)

}

else if operation == 13 {// Умножаване

label.text = Низ (предишен номер * номер на екрана)

}

else if operation == 14 {// Изваждане

label.text = Низ (предишен номер - номер на екрана)

}

else if operation == 15 {// Добавяне

label.text = Низ (предишен номер + номер на екрана)

}

}

иначе, ако sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

операция = 0;

}

По същество тази част от кода показва един от различните бутони, когато е натиснат и продължава да изчислява крайния отговор и го показва на етикета.

Стъпка 9: Пълен код

Пълен код
Пълен код

Ако не сте искали да преминете и да изградите калкулатора стъпка по стъпка с мен, тогава можете просто да добавите елементите към вашата сториборд и да копирате и поставите пълния код във вашия контролер за изглед. Ето кода:

импортиране на UIKit

клас ViewController: UIViewController {

var numberOnScreen: Double = 0;

var previousNumber: Double = 0;

var performanceMath = false;

var операция = 0;

@IBAction функционални номера (_ подател: UIButton) {

ако изпълнитеMath == true {

label.text = Низ (sender.tag-1)

numberOnScreen = Double (label.text!)!

performanceMath = невярно

}

иначе {

label.text = label.text! + Низ (sender.tag-1)

numberOnScreen = Double (label.text!)!

}

}

@IBOutlet слаб вар етикет: UILabel!

@IBAction функционални бутони (_ подател: UIButton) {

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

previousNumber = Double (label.text!)!

ако sender.tag == 12 {// Разделяне

label.text = "/";

}

ако sender.tag == 13 {// Умножете

label.text = "x";

}

ако sender.tag == 14 {// Изваждане

label.text = "-";

}

ако sender.tag == 15 {// Добавяне

label.text = "+";

}

операция = изпращач.таг

performanceMath = вярно;

}

иначе, ако sender.tag == 16 {

ако операция == 12 {// Разделяне

label.text = Низ (предишенNumber / numberOnScreen)

}

else if operation == 13 {// Умножаване

label.text = Низ (предишен номер * номер на екрана)

}

else if operation == 14 {// Изваждане

label.text = Низ (предишен номер - номер на екрана)

}

else if operation == 15 {// Добавяне

label.text = Низ (предишен номер + номер на екрана)

}

}

иначе, ако sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

операция = 0;

}

}

заменя функцията viewDidLoad () {

super.viewDidLoad ()

// Направете допълнителна настройка след зареждане на изгледа, обикновено от перо.

}

замени func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Изхвърлете всички ресурси, които могат да бъдат пресъздадени.

}

}

Препоръчано: