Jak zrobić kalkulator w Xcode za pomocą Swift: 9 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:32

W tym krótkim samouczku pokażę Ci, jak stworzyć prosty kalkulator za pomocą Swift w Xcode. Ta aplikacja została zbudowana tak, aby wyglądała prawie identycznie jak oryginalna aplikacja kalkulatora na iOS. Możesz albo postępować zgodnie ze wskazówkami krok po kroku i zbudować kalkulator ze mną, albo po prostu przejść do ostatniego kroku i skopiować i wkleić kod do kontrolera widoku. Jeśli jednak to zrobisz, pamiętaj, aby połączyć wszystkie elementy w scenorysie z kontrolerem widoku.

Krok 1: Tworzenie projektu

Pierwszym krokiem do stworzenia naszego kalkulatora jest stworzenie projektu w Xcode. Możesz to zrobić, klikając „Utwórz nowy projekt Xcode” i nadając mu dowolną nazwę. Nazwałem mój „Kalkulator”. Następnym krokiem jest wybranie „Aplikacji pojedynczego widoku” dla typu aplikacji. Zachowaj wszystkie inne informacje jako wartość domyślną.

Krok 2: Układ scenorysu

Krok 2 tworzenia naszego kalkulatora wymaga zaprojektowania podstawowego układu w scenorysie. Zanim zaczniesz, polecam zmienić urządzenie symulatora na iPhone 7 Plus. Zacznij od przeciągnięcia przycisku na scenorys i zmiany jego wymiarów na 89 x 89. Zmień kolor tła na rtęć w inspektorze atrybutów i kolor czcionki na wolfram. Następnie dostosuj czcionkę do Helvetica Light 30. Kontynuuj kopiowanie i wklejanie przycisku, aż będzie ich łącznie 20. Dostosuj układ tych przycisków, aby mieć pięć wierszy i cztery kolumny.

Krok 3: Projektowanie i estetyka scenorysu

Usuń drugi przycisk w dolnym rzędzie i rozwiń pierwszy przycisk, aby przejąć to miejsce. Zmień wartość symbolu zastępczego tego przycisku na zero. Kontynuuj zmienianie wartości liczbowych i symboli każdego przycisku, aż będzie praktycznie identyczny, jak na powyższym obrazku. W inspektorze atrybutów ciemniejszy szary kolor to srebrny, pomarańczowy to mandarynka, a kolor czcionki na pomarańczowych przyciskach jest zmieniany na śnieg. Następnie kliknij kontroler widoku i zmień jego kolor tła na czarny. Dodaj etykietę nad guzikami i dostosuj jej rozmiar, jak chcesz. Wyrównaj tekst do prawej i zmień czcionkę etykiety na Helvetica light 70. Jeśli chcesz, możesz dodać ograniczenia do wszystkich elementów, aby aplikacja wyglądała tak samo na wszystkich urządzeniach.

Krok 4: Łączenie i integracja elementów

Otwórz inspektora atrybutów i zmień tag dla każdego przycisku z cyfrą. Znacznik powinien być o 1 większy niż rzeczywista wartość liczbowa. Na przykład przycisk #0 powinien mieć wartość 1, przycisk #1 powinien mieć wartość 2, przycisk #2 powinien mieć wartość 3 i tak dalej. Następnie naciśnij Ctrl, kliknij przycisk #0 i przeciągnij go na kontroler widoku. Na ekranie powinno pojawić się wyskakujące okienko. Zmień połączenie na „akcja”, typ na „UIButton”, zdarzenie na „Touch Up Inside”, argumenty na „Nadawca”, a jego nazwę na „liczby”. Możesz zmienić nazwę na dowolną, ale oznacza to, że będziesz musiał zmienić nazwę ponownie podczas późniejszego wywoływania funkcji w programie. Następnie kontroluj, kliknij i przeciągnij każdy przycisk numeryczny do funkcji, którą właśnie utworzyliśmy. Teraz kontroluj, kliknij i przeciągnij etykietę do programu, ale NIE do funkcji. Oznacza to, że po prostu wprowadzasz etykietę do funkcji jako oddzielną zmienną. Pamiętaj, że jeśli kiedykolwiek będziesz zdezorientowany kodem, zostawiłem cały mój kod do użycia na ostatnim etapie tej instrukcji.

Krok 5: Ustalenie zmiennych

Aby nasze przyciski numeryczne działały, będziemy musieli powiązać ich wartość z etykietą w naszej funkcji „liczby”. Możesz to zrobić, tworząc najpierw zmienną 'numberOnScreen' i czyniąc ją typu double i równą 0: var numberOnScreen: Double = 0; I nie zapomnij, że jeśli kod tutaj jest trochę niejasny, zostawiłem ci pełny kod na ostatnim kroku, abyś mógł użyć według własnych upodobań. Następnie ustal kolejną zmienną „performingMath” typu bool i ustaw ją jako false: var PerformingMath = false; Utwórz także inną zmienną o nazwie 'previousNumber' typu double i ustaw ją na 0: var previousNumber: Double = 0; Ostatnią zmienną, którą musisz utworzyć, jest zmienna 'operacji'. Ustaw ją na 0: operacja var = 0;

Krok 6: Funkcje przycisków numerycznych

Po ustaleniu odpowiednich zmiennych możesz przystąpić do kopiowania i wklejania tego kodu do funkcji „liczby”:

if PerformingMath == true {

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

numberOnScreen = Double(etykieta.tekst!)!

wykonywanieMath = fałsz

}

w przeciwnym razie {

etykieta.tekst = etykieta.tekst! + Ciąg(nadawca.znacznik-1)

numberOnScreen = Double(etykieta.tekst!)!

}

Zasadniczo ten fragment kodu wyświetla określone liczby na etykiecie po naciśnięciu odpowiedniego przycisku. Jednak nadal musimy być w stanie użyć wszystkich pozostałych przycisków i sprawić, by kalkulator działał. Będziemy to robić w kilku następnych krokach.

Krok 7: Integracja przycisków operacyjnych

Otwórz inspektora atrybutów i zmień tag dla wszystkich innych przycisków. Przycisk czyszczenia powinien mieć znacznik 11, przycisk dzielenia powinien mieć znacznik 12, przycisk mnożenia powinien mieć znacznik 13, przycisk odejmowania powinien mieć znacznik 14, przycisk dodawania powinien mieć znacznik 15, a przycisk równości powinien mieć znacznik 16. Następnie naciśnij Ctrl, kliknij przycisk Wyczyść i przeciągnij go na kontroler widoku. Na ekranie powinno pojawić się wyskakujące okienko. Zmień połączenie na „akcja”, typ na „UIButton”, zdarzenie na „Touch Up Inside”, argumenty na „Nadawca”, a jego nazwę na „przyciski”. Możesz zmienić nazwę na dowolną, ale oznacza to, że będziesz musiał zmienić nazwę ponownie podczas późniejszego wywoływania funkcji w programie. Następnie kontroluj, kliknij i przeciągnij każdy inny przycisk do funkcji, którą właśnie utworzyliśmy.

Krok 8: Różne funkcje przycisków

Po podłączeniu wszystkich oznaczonych różnych przycisków do ich odpowiedniej funkcji, możesz zacząć wstawiać kod do funkcji „przyciski”:

poprzedniNumer = Podwójny(etykieta.tekst!)!

if sender.tag == 12 { //Podziel

etykieta.tekst = "/";

}

if sender.tag == 13 { //Mnożenie

etykieta.tekst = "x";

}

if sender.tag == 14 { //Odejmij

etykieta.tekst = "-";

}

if sender.tag == 15 { //Dodaj

etykieta.tekst = "+";

}

operacja = sender.tag

wykonywanieMath = prawda;

}

inaczej if sender.tag == 16 {

jeśli operacja == 12{ //Podziel

label.text = String(poprzedni numer / numer na ekranie)

}

inaczej, jeśli operacja == 13{ //Mnożenie

label.text = String(previousNumber * numberOnScreen)

}

inaczej, jeśli operacja == 14{ //Odejmowanie

label.text = String(previousNumber - numberOnScreen)

}

inaczej, jeśli operacja == 15{ //Dodaj

label.text = String(poprzedni numer + numer na ekranie)

}

}

inaczej, jeśli sender.tag == 11{

label.text = ""

poprzedni numer = 0;

liczbaNaEkranie = 0;

operacja = 0;

}

Zasadniczo ten fragment kodu wyświetla jeden z różnych przycisków po naciśnięciu i przystępuje do obliczenia ostatecznej odpowiedzi i wyświetla ją na etykiecie.

Krok 9: Pełny kod

Jeśli nie chcesz przechodzić i budować kalkulatora krok po kroku ze mną, możesz po prostu dodać elementy do swojego scenorysu, a następnie skopiować i wkleić pełny kod do kontrolera widoku. Oto kod:

importuj UIKit

class ViewController: UIViewController {

var numberOnScreen: Double = 0;

var poprzedni numer: Double = 0;

var wykonanieMath = fałsz;

var operacja = 0;

@IBAction numery funkcji (_ sender: UIButton) {

if performMath == true {

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

numberOnScreen = Double(etykieta.tekst!)!

wykonywanieMath = fałsz

}

w przeciwnym razie {

etykieta.tekst = etykieta.tekst! + Ciąg(nadawca.znacznik-1)

numberOnScreen = Double(etykieta.tekst!)!

}

}

@IBOutlet słaba etykieta var: UILabel!

@Przyciski funkcyjne IBAction (_ sender: UIButton) {

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

poprzedniNumer = Podwójny(etykieta.tekst!)!

if sender.tag == 12 { //Podziel

etykieta.tekst = "/";

}

if sender.tag == 13 { //Mnożenie

etykieta.tekst = "x";

}

if sender.tag == 14 { //Odejmij

etykieta.tekst = "-";

}

if sender.tag == 15 { //Dodaj

etykieta.tekst = "+";

}

operacja = sender.tag

wykonywanieMath = prawda;

}

inaczej if sender.tag == 16 {

jeśli operacja == 12{ //Podziel

label.text = String(poprzedni numer / numer na ekranie)

}

inaczej, jeśli operacja == 13{ //Mnożenie

label.text = String(previousNumber * numberOnScreen)

}

inaczej, jeśli operacja == 14{ //Odejmowanie

label.text = String(previousNumber - numberOnScreen)

}

inaczej, jeśli operacja == 15{ //Dodaj

label.text = String(poprzedni numer + numer na ekranie)

}

}

inaczej, jeśli sender.tag == 11{

label.text = ""

poprzedni numer = 0;

liczbaNaEkranie = 0;

operacja = 0;

}

}

override func viewDidLoad() {

super.widokDidLoad()

// Wykonaj dodatkowe ustawienia po załadowaniu widoku, zwykle z końcówki.

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Usuń wszelkie zasoby, które można odtworzyć.

}

}