Δημιουργία της πρώτης σας εφαρμογής iOS.

Αυτό το άρθρο θα σας διδάξει πώς μπορείτε να δημιουργήσετε το δικό σας iOS Tap Counter App. Πρόκειται για μια πραγματικά απλή εφαρμογή που μετρά πολύ λίγο τους χρόνους που πατάτε το κουμπί επιλογής και όταν επαναφέρετε, αρχίζει να μετρά από μηδέν πάλι. Εδώ είναι μια απλή προεπισκόπηση του τι θα δημιουργήσετε.

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

Η ρύθμιση

  1. Πρώτα πρέπει να βεβαιωθείτε ότι έχετε κατεβάσει το Xcode. Βεβαιωθείτε ότι έχετε και το τελευταίο XCode. Ελέγξτε με το App Store και βεβαιωθείτε ότι δεν απαιτείται ενημέρωση.
  2. Χρησιμοποιώ το Xcode 8.3.2 με το Swift 3 τη στιγμή που αυτό το σεμινάριο είναι επάνω. Εάν από τη στιγμή που βλέπετε αυτό το άρθρο κάτι άλλαξε ή δεν λειτουργεί, ενημερώστε με για να μπορώ να αλλάξω το άρθρο ανάλογα.
  3. Δημιουργήστε το πρώτο σας έργο. Εκτελέστε Xcode και θα πρέπει να είστε σε μια οθόνη υποδοχής.
  4. Κάντε κλικ στο Δημιουργία νέου έργου Xcode.
  5. Κάντε κλικ στην εφαρμογή ενιαίας προβολής, καθώς πρόκειται για μια πολύ απλή εφαρμογή και χρησιμοποιούμε την προβολή. Υπάρχουν και άλλες επιλογές όπως τα Παιχνίδια - καλά μπορείτε να δημιουργήσετε παιχνίδια, εφαρμογή iMessage - Δημιουργήστε μια εφαρμογή για το iMessage Αυτό μπορεί να είναι ένα πληκτρολόγιο και το παιχνίδι στο πληκτρολόγιο και μια εφαρμογή βάσει σελίδας - παρόμοια με iBooks, καθώς υπάρχουν πολλά ταλάντευση και λιγότερο αλληλεπίδραση απόψεων.
  6. Στη συνέχεια, κάντε κλικ στο κουμπί Επόμενο και δώστε στην εφαρμογή ένα όνομα στο όνομα προϊόντος. Επιλέξτε Όνομα ομάδας και οργανισμού, Αναγνωριστικό οργανισμού. Βεβαιωθείτε ότι η γλώσσα είναι γρήγορη. Για συσκευές, μπορείτε να επιλέξετε αυτό που σας αρέσει. Θα χρησιμοποιώ Universal-μπορεί να χρησιμοποιηθεί τόσο για το iPad όσο και για το iPhone. Αλλά μπορείτε να χρησιμοποιήσετε iPad μόνο για iPad ή iPhone μόνο για το iPhone.
  7. Από εκεί, το Xcode θα σας ζητήσει να επιλέξετε μια τοποθεσία για να αποθηκεύσετε αυτό το έργο. Μπορείτε να επιλέξετε να το αποθηκεύσετε όπου θέλετε.
  8. Αφού τελειώσετε, θα πρέπει να έχετε ένα αρκετά άδειο έργο. Αλλά θα το διορθώσουμε σύντομα.
  9. Κάντε κλικ στην επιλογή Main.storyboard
  10. Αυτός είναι ο Διασύνδεσμος Builder. Αυτό είναι όπου κάνετε το μεγαλύτερο μέρος της εργασίας στο εμπρός μέρος. Κάνετε το σχέδιο και κοιτάτε εδώ.
  11. Στην κάτω δεξιά γωνία, μπορείτε να επιλέξετε στοιχεία και ελεγκτές, όπως TableViewController, κουμπιά, ετικέτες και προβολές κειμένου.
  12. Υπάρχει επίσης μια γραμμή αναζήτησης που μπορείτε να χρησιμοποιήσετε για να αναζητήσετε ό, τι χρειάζεστε.

Κεντρική σανίδα

  1. Αναζητήστε τον ελεγκτή πλοήγησης και σύρετέ τον στην οθόνη.
  2. Από εκεί, αφαιρέστε το rootViewController. Κοιτάξτε το δεξί παράθυρο, επιλέξτε rootViewController. Πατήστε το πλήκτρο "διαγραφή". Τώρα κάντε έλεγχο και σύρετε τον ελεγκτή πλοήγησης στον ελεγκτή προβολής και ορίστε τον ως ρυθμιστή προβολής ρίζας.

Στη συνέχεια, κάντε κλικ στον ελεγκτή πλοήγησης και στη δεξιά πλευρά υπάρχει ένα κενό πλαίσιο ελέγχου που δηλώνει τον ελεγκτή αρχικής προβολής. Βεβαιωθείτε ότι κάνετε κλικ σε αυτό

Αυτό που κάνει είναι να λέει βασικά στο Xcode να ξεκινάει με τον ελεγκτή πλοήγησης και όχι μόνο με την προβολή. Αυτό είναι έτσι η γραμμή πλοήγησης που έχουμε τώρα θα λειτουργήσει. Η γραμμή πλοήγησης είναι σχεδόν η μπάρα που είδατε στο βίντεο στο επάνω μέρος με τον τίτλο «Μετρητής» και ένα κουμπί «Επαναφορά».

  1. Από εκεί, θα αναζητήσετε μια ετικέτα είναι η «Βιβλιοθήκη» και σύρετε την προς τον ελεγκτή προβολής.
  2. Τώρα αναζητήστε το κουμπί και κάντε το ίδιο πράγμα, αλλά δύο φορές.
  3. Από εκεί, ευθυγραμμίστε τις ετικέτες και τα κουμπιά με τον τρόπο που τους αρέσει, σύροντάς τους γύρω. Οι γραμμές που βλέπετε καθώς μετακινείτε αυτά τα στοιχεία είναι ευθυγραμμίσεις που σας ενημερώνουν ότι την ευθυγραμμίζετε κάπου. Αφού τελειώσετε, μπορείτε να απενεργοποιήσετε το κουμπί επαναφοράς στη γραμμή πλοήγησης αν θέλετε, το οποίο έκανα ή απλά χρησιμοποιήσατε τη δική σας τοποθέτηση. Μην ανησυχείτε, δεν θα επηρεάσει τη λειτουργικότητα.
  4. Τώρα, θέλουμε να μάθουμε τι θα δουν. Έτσι, με την Ετικέτα, κάντε κλικ σε αυτό δύο φορές, μπορείτε να την αλλάξετε από την Ετικέτα σε αυτό που θέλετε. Δεδομένου ότι πρόκειται για μετρητή, επιλέξτε έναν αριθμό. Τώρα στα δεξιά υπάρχει ένα χαρακτηριστικό γραμματοσειράς. Από προεπιλογή είναι το Σύστημα γραμματοσειράς 17. Κάντε το μεγαλύτερο ή μικρότερο, κάντε το σύμφωνα με τις προτιμήσεις σας. Χρησιμοποίησα 60. Μπορείτε να κάνετε ό, τι σας αρέσει.
  5. Για τα κουμπιά, υπάρχει επαναφορά και βρύση. Έτσι φροντίστε να τις ονομάσετε αναλόγως. Κάπως κάνετε το ίδιο πράγμα με το Label. Αλλά δεν χρειάζεται να αλλάξετε τη γραμματοσειρά. Μπορείτε, αν θέλετε.
  6. Τέλος, θέλουμε να έχουμε έναν τίτλο για αυτήν την εφαρμογή. Έτσι, στη γραμμή πλοήγησης, κάντε κλικ πάνω της μέχρι να επισημανθεί η γραμμή. Θα παρατηρήσετε ότι το δεξιό τμήμα του παραθύρου εμφανίζει τώρα το Τίτλος, το Ειδοπ. Και το Πίσω κουμπί. αλλάξτε τίτλο σε έναν τίτλο που σας αρέσει.

Τώρα θα πρέπει να έχετε κάτι πιο κοντά σε αυτό.

Το τμήμα διασκέδασης

Τώρα θέλουμε να μπει στο τμήμα κωδικοποίησης αυτής της εφαρμογής. Στην κορυφή του Xcode υπάρχει ένα βοηθητικό κουμπί επεξεργασίας. Μοιάζει με διάγραμμα Venn.

Τώρα θα πρέπει να δείτε δύο πράγματα, το Interface Builder και τον κώδικα για τον ελεγκτή προβολής. Αυτό που θα κάνουμε τώρα είναι ο έλεγχος του πληκτρολογίου στο πληκτρολόγιό σας, κρατήστε το σε αυτό και σύρετε την ετικέτα σας στον κώδικα στην κορυφή. Δώστε στην ετικέτα ένα όνομα όπως το 'counterLabel'.

Τώρα που έχετε ετικέτα, πρέπει να κάνετε το ίδιο για τα δύο κουμπιά. Αλλά εδώ τα πράγματα αλλάζουν λίγο. Σε σύνδεση, κάντε κλικ στο αναπτυσσόμενο μενού και επιλέξτε Ενέργεια - Αυτό μας επιτρέπει να κάνουμε την εφαρμογή να κάνει κάτι όταν ο χρήστης κουμπώνει στο κουμπί. Κάνετε το ίδιο και για τους δύο και τους δώστε ένα νόημα όπως το 'tapButtonTapped'.

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

Εντάξει, πρώτα θα πληκτρολογήσουμε αυτόν τον κώδικα σε: var counter: Int = 0 (Αυτή είναι μια μεταβλητή που επιτρέπει να είναι τύπου Integer και το θέτουμε στο μηδέν.) Υπάρχει ένα var και αφήστε αλλά θα πάμε σε αυτό με ένα διαφορετικό άρθρο. Αλλά βασικά var μπορεί να αλλάξει, ας μην μπορεί.

Τώρα που έχουμε ένα μετρητή, πρέπει να δείξουμε αυτόν τον αριθμό. Στη συνάρτηση viewDidLoad, πληκτρολογήστε αυτό σε counterLabel.text = String (counter) (έτσι μετατρέψτε το conterLabel σε ό, τι ονομάσατε την ετικέτα σας.) Το .text ουσιαστικά μας επιτρέπει να αλλάξουμε το κείμενο στην ετικέτα. η αντίθετη μεταβλητή μας είναι τύπου int.

Εντάξει τώρα έχουμε βασικά το app δείχνουν ο αριθμός θέλει να ανοίξει. Πρέπει τώρα να προσθέσουμε λειτουργίες για να επαναφέρουμε και να πατήσουμε. Θα ξεκινήσουμε με βρύση.

Μέσα στο IBAction για το κουμπί βρύσης θέλουμε να προσθέσουμε 1 κάθε φορά που ο χρήστης βάζει 1. Έτσι τι κάνουμε είναι να προσθέσουμε ένα στον αριθμό. Στη συνέχεια, αντικαταστήστε το κείμενο στην ετικέτα με τον αριθμό. Το κάνουμε κάνοντας τα εξής:

Τώρα αφού το κάνετε αυτό, θέλετε να βεβαιωθείτε ότι το κάνατε σωστά. Εκτελέστε την εφαρμογή! Χρησιμοποιήστε CMD + R ή πατήστε το κουμπί αναπαραγωγής στην κορυφή.

Εάν έχετε παρατηρήσει, κάτι μπορεί να είναι λάθος, τα κουμπιά μπορεί να είναι όλα πέρα ​​από τη θέση. Αλλά όταν πατήσετε το πάτημα, προσθέτει στον προηγούμενο αριθμό. Εάν δεν βλέπετε το πάτημα του κουμπιού ή οι ετικέτες και τα κουμπιά είναι όλα πέρα ​​από τη θέση. Πηγαίνετε πίσω στο Main.storyboard. Αυτό που θα κάνουμε τώρα είναι να τα θέσουμε στον τόπο που θέλουμε να είναι. Επειδή πρόκειται για ένα απλό σεμινάριο. Δεν θα πάρω σε βάθος με περιορισμούς. Θα χρησιμοποιήσουμε τα προτεινόμενα εμπόδια της Apple. Έτσι, στο Main.storyboard βεβαιωθείτε ότι βρίσκεστε στον ελεγκτή προβολής. Επιβεβαιώστε ότι βρίσκεστε κάνοντας κλικ στο στοιχείο ViewController όπως στο φόντο αλλά όχι στα στοιχεία της προβολής. Αν κοιτάξετε το Interface Builder υπάρχει ένα κουμπί που βλέπετε στην παρακάτω εικόνα, όταν κάνετε κλικ πάνω του, θα δείτε κάποιες επιλογές, κάντε κλικ στο Reset to Suggested Restrinders. Τώρα εκτελέστε ξανά, και τα πράγματα πρέπει να φαίνονται λίγο οικεία.

Το κουμπί που πατάςΤο μενού που θα δείτε.

Τώρα πίσω στις IBActions

Στο εσωτερικό του άλλου IBAction το έχουμε για το κουμπί επαναφοράς. Θέλουμε να ορίσουμε τον αριθμό πίσω στο 0. Έτσι θα το κάνουμε αυτό: αριθμός = 0. Αυτό είναι, ο αριθμός είναι τώρα 0. Αλλά δεν εμφανίζεται στην εφαρμογή όταν το αγγίξετε. Συνεχίστε και δοκιμάστε το. Εκτελέστε ξανά την εφαρμογή.

Για να διορθώσουμε αυτό, το ζήτημα είναι ότι δεν έχουμε ενημερώσει το counterLabel, γι 'αυτό πρέπει να το κάνουμε. Προσπαθήστε να το καταλάβετε. Εάν εξακολουθείτε να έχετε κολλήσει, η απάντηση βρίσκεται στο κάτω μέρος της σελίδας.

Τώρα έχετε σχεδόν προσθέσει τις βασικές αρχές κάτω. Η εφαρμογή λειτουργεί πολύ. Πατάτε κτυπήστε και θα προσθέσετε ένα στο μετρητή. Πάσατε την επαναφορά και ο μετρητής επιστρέφει στο 0.

Έξτρα, επιπλέον!

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

Ας απευθυνθούμε πρώτα στον ελέφαντα στο δωμάτιο, ΤΙ ΕΙΝΑΙ ΤΟ ΕΓΓΡΑΦΟ ΤΟΥ; κάνοντας εκεί;

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

Τώρα που εξετάζεται, αφήνει τον κώδικα ομιλίας.

Η πρώτη γραμμή είναι λίγο πολύ ρύθμιση και άδεια εικόνα φόντου. Εάν χρησιμοποιείτε το UIImage (), είναι σχεδόν άδειο και παρακάμπτει την ανάγκη να χρησιμοποιήσετε μια εικόνα οποιουδήποτε είδους. Αυτό είναι έτσι ώστε να μην υπάρχει εικόνα φόντου.

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

Τώρα που έχει γίνει αυτό, έχετε ένα ακριβές αντίγραφο της εφαρμογής που εμφανίζεται στην αρχή!

Απάντηση: counterLabel.text = Σειρά (αριθμός)

Άντι Γουόνγκ

Ο Andy είναι Junior στο πανεπιστήμιο St. John's. Έχει πάθος για την κατασκευή προϊόντων, που εργάζονται στην τεχνολογική βιομηχανία, δοκιμάζουν νέα πράγματα και γενικά προσπαθούν να μάθουν κάτι καινούριο καθημερινά. Αυτή τη στιγμή αναζητά έναν internship λογισμικού μηχανικού / προγραμματιστή στη Νέα Υόρκη ή το Σαν Φρανσίσκο (Προτιμώ ~ έπεσε στην αγάπη με την πόλη). Το μόνο πάθος που έχω περισσότερο από την οικοδόμηση, είναι να χτίζω κάτι χρήσιμο. Κάτι που βοηθά τους ανθρώπους με τρόπους που ποτέ δεν ήταν δυνατό πριν.

Ας συνδεθούμε! (Twitter) (Ιστοσελίδα) (Linkedin)