Πίνακας περιεχομένων:

Πώς να φτιάξετε μια αριθμομηχανή σε Xcode χρησιμοποιώντας το Swift: 9 βήματα
Πώς να φτιάξετε μια αριθμομηχανή σε Xcode χρησιμοποιώντας το Swift: 9 βήματα

Βίντεο: Πώς να φτιάξετε μια αριθμομηχανή σε Xcode χρησιμοποιώντας το Swift: 9 βήματα

Βίντεο: Πώς να φτιάξετε μια αριθμομηχανή σε Xcode χρησιμοποιώντας το Swift: 9 βήματα
Βίντεο: Development Tutorial #1: iOS Application 2024, Ιούνιος
Anonim
Image
Image

Σε αυτό το γρήγορο σεμινάριο, θα σας δείξω πώς να δημιουργήσετε μια απλή αριθμομηχανή χρησιμοποιώντας το Swift στο Xcode. Αυτή η εφαρμογή έχει σχεδιαστεί για να μοιάζει σχεδόν πανομοιότυπη με την αρχική εφαρμογή αριθμομηχανής για iOS. Μπορείτε είτε να ακολουθήσετε τις οδηγίες βήμα προς βήμα και να δημιουργήσετε την αριθμομηχανή μαζί μου, είτε μπορείτε απλά να μεταβείτε στο τελευταίο βήμα και να αντιγράψετε και να επικολλήσετε τον κώδικα στο χειριστήριο προβολής. Ωστόσο, αν το κάνετε αυτό, βεβαιωθείτε ότι έχετε συνδέσει όλα τα στοιχεία σας στο storyboard με το χειριστήριο προβολής.

Βήμα 1: Δημιουργία του έργου

Διάταξη Storyboard
Διάταξη Storyboard

Το πρώτο βήμα για την κατασκευή της αριθμομηχανής μας είναι να δημιουργήσουμε πραγματικά το έργο σε Xcode. Μπορείτε να το κάνετε αυτό κάνοντας κλικ στο "Δημιουργία νέου έργου Xcode" και ονομάζοντάς το όπως θέλετε. Ονόμασα το δικό μου "Υπολογιστής". Το επόμενο βήμα είναι να επιλέξετε "Εφαρμογή μεμονωμένης προβολής" για τον τύπο της εφαρμογής. Κρατήστε όλες τις άλλες πληροφορίες ως προεπιλεγμένη τιμή.

Βήμα 2: Διάταξη Storyboard

Το βήμα 2 για τη δημιουργία της αριθμομηχανής μας απαιτεί να σχεδιάσετε μια βασική διάταξη στο storyboard. Πριν ξεκινήσετε αυτό, συνιστώ να αλλάξετε τη συσκευή προσομοιωτή σας στο iPhone 7 Plus. Ξεκινήστε σύροντας ένα κουμπί στο storyboard και αλλάζοντας τις διαστάσεις του σε 89 x 89. Αλλάξτε το χρώμα του φόντου σε υδράργυρο για τα χαρακτηριστικά του επιθεωρητή και το χρώμα της γραμματοσειράς του σε βολφράμιο. Στη συνέχεια, προσαρμόστε τη γραμματοσειρά στο Helvetica Light 30. Συνεχίστε να αντιγράφετε και επικολλάτε το κουμπί μέχρι να έχετε συνολικά 20. Προσαρμόστε τη διάταξη αυτών των κουμπιών έτσι ώστε να έχετε πέντε σειρές και τέσσερις στήλες.

Βήμα 3: Σχεδιασμός και αισθητική Storyboard

Σχεδιασμός και αισθητική Storyboard
Σχεδιασμός και αισθητική Storyboard

Διαγράψτε το δεύτερο κουμπί στην κάτω σειρά και επεκτείνετε το πρώτο κουμπί για να καταλάβετε αυτό το διάστημα. Αλλάξτε την τιμή κράτησης θέσης αυτού του κουμπιού στο μηδέν. Συνεχίστε να αλλάζετε τις αριθμητικές τιμές και τα σύμβολα κάθε κουμπιού μέχρι να είναι σχεδόν πανομοιότυπα με την παραπάνω εικόνα. Στον επιθεωρητή ιδιοτήτων, το πιο σκούρο γκρι χρώμα είναι ασημί, το πορτοκαλί χρώμα είναι μανταρίνι και το χρώμα της γραμματοσειράς αλλάζει σε χιόνι στα πορτοκαλί κουμπιά. Στη συνέχεια, κάντε κλικ στο ελεγκτή προβολής και αλλάξτε το χρώμα φόντου σε μαύρο. Προσθέστε μια ετικέτα πάνω από τα κουμπιά και προσαρμόστε το μέγεθός της ανάλογα με το πώς αισθάνεστε άνετα. Ευθυγραμμίστε το κείμενο προς τα δεξιά και αλλάξτε τη γραμματοσειρά της ετικέτας σε Helvetica light 70. Εάν θέλετε, μπορείτε να προσθέσετε περιορισμούς σε όλα τα στοιχεία για να κάνετε την εφαρμογή να φαίνεται ίδια για όλες τις συσκευές.

Βήμα 4: Σύνδεση και ενσωμάτωση στοιχείων

Σύνδεση και ενσωμάτωση στοιχείων
Σύνδεση και ενσωμάτωση στοιχείων
Σύνδεση και ενσωμάτωση στοιχείων
Σύνδεση και ενσωμάτωση στοιχείων

Ανοίξτε τον επιθεωρητή ιδιοτήτων και αλλάξτε την ετικέτα για κάθε κουμπί αριθμών. Η ετικέτα πρέπει να είναι 1 περισσότερο από την πραγματική αριθμητική τιμή. Για παράδειγμα, το κουμπί #0 πρέπει να έχει τιμή ετικέτας 1, το κουμπί #1 θα πρέπει να έχει τιμή ετικέτας 2, το κουμπί #2 θα πρέπει να έχει τιμή ετικέτας 3 και ούτω καθεξής. Στη συνέχεια, πατήστε το στοιχείο ελέγχου, κάντε κλικ στο κουμπί #0 και σύρετέ το στο χειριστήριο προβολής. Θα πρέπει να εμφανιστεί ένα αναδυόμενο παράθυρο στην οθόνη. Αλλάξτε τη σύνδεση σε "δράση", τον τύπο σε "UIButton", το συμβάν σε "Touch Up Inside", τα ορίσματα σε "Αποστολέας" και το όνομά του σε "αριθμούς". Μπορείτε να αλλάξετε το όνομα σε ό, τι θέλετε, αλλά αυτό σημαίνει ότι θα πρέπει να αλλάξετε ξανά το όνομα όταν καλείτε τη λειτουργία αργότερα στο πρόγραμμα. Στη συνέχεια, ελέγξτε, κάντε κλικ και σύρετε κάθε κουμπί αριθμών στη λειτουργία που μόλις δημιουργήσαμε. Τώρα, ελέγξτε, κάντε κλικ και σύρετε την ετικέτα στο πρόγραμμα, αλλά ΟΧΙ στη λειτουργία. Αυτό σημαίνει ότι απλά φέρνετε την ετικέτα στη συνάρτηση ως ξεχωριστή μεταβλητή. Θυμηθείτε, εάν έχετε μπερδευτεί ποτέ με τον κώδικα, σας έχω αφήσει όλο τον κώδικα για να τον χρησιμοποιήσετε στο τελευταίο βήμα αυτού του Instructable.

Βήμα 5: Δημιουργία μεταβλητών

Καθιέρωση Μεταβλητών
Καθιέρωση Μεταβλητών

Για να κάνουμε τα αριθμητικά κουμπιά λειτουργικά, θα πρέπει να συνδέσουμε την τιμή τους με την ετικέτα στη συνάρτηση "αριθμοί". Μπορείτε να το κάνετε αυτό δημιουργώντας πρώτα μια μεταβλητή 'numberOnScreen' και την κάνετε διπλού και ίση με 0: var numberOnScreen: Double = 0; Και μην ξεχνάτε, εάν ο κωδικός εδώ είναι λίγο ασαφής, σας έχω αφήσει τον πλήρη κωδικό στο τελευταίο βήμα για να τον χρησιμοποιήσετε σύμφωνα με τις προτιμήσεις σας. Στη συνέχεια, καθορίστε μια άλλη μεταβλητή 'performMath' τύπου bool και κάντε την ψευδή: var performMath = false; Επίσης, δημιουργήστε μια άλλη μεταβλητή που ονομάζεται 'previousNumber' τύπου διπλού και ορίστε την ίση με 0: var previousNumber: Double = 0; Η τελευταία μεταβλητή που πρέπει να δημιουργήσετε είναι η μεταβλητή "λειτουργία". Ορίστε το ίσο με 0: var λειτουργία = 0;

Βήμα 6: Λειτουργία πλήκτρων αριθμού

Λειτουργία πλήκτρων αριθμών
Λειτουργία πλήκτρων αριθμών

Αφού καθορίσετε τις κατάλληλες μεταβλητές, μπορείτε να προχωρήσετε στην αντιγραφή και επικόλληση αυτού του κώδικα στη συνάρτηση "αριθμοί":

εάν εκτελείτε Μαθηματικά == αληθές {

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

numberOnScreen = Διπλό (label.text!)!

performMath = false

}

αλλιώς {

label.text = label.text! + String (αποστολέας.tag-1)

numberOnScreen = Διπλό (label.text!)!

}

Ουσιαστικά, αυτό το κομμάτι κώδικα εμφανίζει ορισμένους αριθμούς στην ετικέτα όταν πατήσετε το κατάλληλο κουμπί. Ωστόσο, πρέπει ακόμα να μπορούμε να χρησιμοποιούμε όλα τα άλλα κουμπιά και να κάνουμε τη αριθμομηχανή λειτουργική. Αυτό θα το κάνουμε στα επόμενα δύο βήματα.

Βήμα 7: Ενσωμάτωση κουμπιών λειτουργίας

Ενσωμάτωση κουμπιών λειτουργίας
Ενσωμάτωση κουμπιών λειτουργίας
Ενσωμάτωση κουμπιών λειτουργίας
Ενσωμάτωση κουμπιών λειτουργίας

Ανοίξτε τον επιθεωρητή ιδιοτήτων και αλλάξτε την ετικέτα για όλα τα διάφορα κουμπιά. Το κουμπί διαγραφής πρέπει να έχει μια ετικέτα 11, το κουμπί διαίρεσης πρέπει να έχει μια ετικέτα 12, το κουμπί πολλαπλασιασμού πρέπει να έχει μια ετικέτα 13, το κουμπί αφαίρεσης πρέπει να έχει μια ετικέτα 14, το κουμπί προσθήκης πρέπει να έχει μια ετικέτα 15, και το κουμπί ίσο πρέπει να έχει μια ετικέτα 16. Στη συνέχεια, πατήστε το κουμπί ελέγχου, κάντε κλικ στο κουμπί διαγραφής και σύρετέ το στον ελεγκτή προβολής. Θα πρέπει να εμφανιστεί ένα αναδυόμενο παράθυρο στην οθόνη. Αλλάξτε τη σύνδεση σε "δράση", τον τύπο σε "UIButton", το συμβάν σε "Touch Up Inside", τα ορίσματα σε "Αποστολέας" και το όνομά του σε "κουμπιά". Μπορείτε να αλλάξετε το όνομα σε ό, τι θέλετε, αλλά αυτό σημαίνει ότι θα πρέπει να αλλάξετε ξανά το όνομα όταν καλείτε τη λειτουργία αργότερα στο πρόγραμμα. Στη συνέχεια, ελέγξτε, κάντε κλικ και σύρετε κάθε διαφορετικό κουμπί στη λειτουργία που μόλις δημιουργήσαμε.

Βήμα 8: Διάφορα Λειτουργία Κουμπιών

Διάφορα Λειτουργία Κουμπιών
Διάφορα Λειτουργία Κουμπιών

Αφού συνδέσετε όλα τα ετικετοποιημένα διάφορα κουμπιά στην κατάλληλη λειτουργία τους, μπορείτε να αρχίσετε να εισάγετε τον κώδικα στη λειτουργία «κουμπιών»:

previousNumber = Διπλό (label.text!)!

αν αποστολέας.tag == 12 {// Διαίρεση

label.text = "/";

}

εάν αποστολέας.tag == 13 {// Πολλαπλασιάστε

label.text = "x";

}

αν αποστολέας.tag == 14 {// Αφαίρεση

label.text = "-";

}

εάν αποστολέας.tag == 15 {// Προσθήκη

label.text = "+";

}

λειτουργία = αποστολέας.ετικέτα

PerformMath = true;

}

else if sender.tag == 16 {

εάν λειτουργία == 12 {// Διαίρεση

label.text = String (previousNumber / numberOnScreen)

}

else if λειτουργία == 13 {// Πολλαπλασιάστε

label.text = String (previousNumber * numberOnScreen)

}

else if λειτουργία == 14 {// Αφαίρεση

label.text = String (previousNumber - numberOnScreen)

}

else if λειτουργία == 15 {// Προσθήκη

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

προηγούμενοςΑριθμός = 0;

numberOnScreen = 0;

λειτουργία = 0;

}

Ουσιαστικά, αυτό το κομμάτι κώδικα εμφανίζει ένα από τα διάφορα κουμπιά όταν πατηθεί και προχωρά στον υπολογισμό της τελικής απάντησης και εμφανίζεται στην ετικέτα.

Βήμα 9: Πλήρης κώδικας

Πλήρης κωδικός
Πλήρης κωδικός

Εάν δεν θέλετε να παρακολουθήσετε και να δημιουργήσετε την αριθμομηχανή βήμα προς βήμα μαζί μου, τότε μπορείτε απλά να προσθέσετε τα στοιχεία στο storyboard σας και να αντιγράψετε και να επικολλήσετε τον πλήρη κώδικα στο χειριστήριο προβολής. Εδώ είναι ο κωδικός:

εισαγωγή UIKit

class ViewController: UIViewController {

var numberOnScreen: Διπλό = 0;

var previousNumber: Διπλό = 0;

var performanceMath = false;

var λειτουργία = 0;

@IBAction αριθμοί λειτουργίας (_ αποστολέας: UIButton) {

εάν εκτελείτε Μαθηματικά == αληθές {

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

numberOnScreen = Διπλό (label.text!)!

performMath = false

}

αλλιώς {

label.text = label.text! + String (αποστολέας.tag-1)

numberOnScreen = Διπλό (label.text!)!

}

}

@IBOutlet ασθενής ετικέτα var: UILabel!

@IBAction λειτουργικά κουμπιά (_ αποστολέας: UIButton) {

εάν label.text! = "" && sender.tag! = 11 && sender.tag! = 16 {

previousNumber = Διπλό (label.text!)!

αν αποστολέας.tag == 12 {// Διαίρεση

label.text = "/";

}

εάν αποστολέας.tag == 13 {// Πολλαπλασιάστε

label.text = "x";

}

αν αποστολέας.tag == 14 {// Αφαίρεση

label.text = "-";

}

εάν αποστολέας.tag == 15 {// Προσθήκη

label.text = "+";

}

λειτουργία = αποστολέας.ετικέτα

PerformMath = true;

}

else if sender.tag == 16 {

εάν λειτουργία == 12 {// Διαίρεση

label.text = String (previousNumber / numberOnScreen)

}

else if λειτουργία == 13 {// Πολλαπλασιάστε

label.text = String (previousNumber * numberOnScreen)

}

else if λειτουργία == 14 {// Αφαίρεση

label.text = String (previousNumber - numberOnScreen)

}

else if λειτουργία == 15 {// Προσθήκη

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

προηγούμενοςΑριθμός = 0;

numberOnScreen = 0;

λειτουργία = 0;

}

}

παράκαμψη func viewDidLoad () {

super.viewDidLoad ()

// Κάντε οποιαδήποτε πρόσθετη ρύθμιση μετά τη φόρτωση της προβολής, συνήθως από μια μύτη.

}

παράκαμψη func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Απορρίψτε τυχόν πόρους που μπορούν να αναδημιουργηθούν.

}

}

Συνιστάται: