Πώς να ρυθμίσετε ένα χρήσιμο αυτόματο συμπλήρωμα UITextField χρησιμοποιώντας CoreData στο Swift

Το μόνο που χρειάζεται να γνωρίζετε για να δημιουργήσετε τη γραμμή αναζήτησης αυτόματης συμπλήρωσης με UITableView και CoreData.

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

Θα δούμε:

  • Πώς να ρυθμίσετε μια απλή εφαρμογή με ένα UITextField αναζήτησης
  • Τρόπος ρύθμισης παραμέτρων του TableView για εμφάνιση των αποτελεσμάτων αναζήτησης
  • Πώς να κάνετε ερωτήματα σε πραγματικό χρόνο σε συλλογές CoreData

1. Εγκατάσταση του έργου

Απλώς δημιουργήστε μια εφαρμογή ενιαίας προβολής με τα ακόλουθα στοιχεία (ελέγξτε το CoreData κατά τη δημιουργία του έργου!). Για να είμαστε πιο συγκεκριμένοι, ας υποθέσουμε ότι πρόκειται για μια εφαρμογή ταξιδιωτικής πρότασης και ο χρήστης πρέπει να παρέχει ένα όνομα πόλης για να λαμβάνει όλες τις πληροφορίες του μέρους.

UILabel: Θα το ονομάσουμε topLabel. Δεν θα το χρειαζόμαστε.

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

UIButton: Είναι το κουμπί που θα πατηθεί όταν ο χρήστης θα βρει τη θέση που θέλει. Ας το ονομάσουμε searchButton .

Το tableView θα προστεθεί μέσω προγραμματισμού, ώστε να δείτε πώς να το ρυθμίσετε σε κάθε είδους κατάσταση.

Για να έχουμε μια όμορφη απόδοση, πρόσθεσα ένα UIImageView στο παρασκήνιο με μια υπέροχη εικόνα στην παραλία.

Για να συνδέσετε όλα αυτά τα στοιχεία στο View Controller, επιλέξτε καθένα από αυτά και σύρετε την αναφορά τους χρησιμοποιώντας ( Control (ή Ctrl) ⌃ + Click ) στο κύριο αρχείο ταχείας προβολής View.

2. Διαμορφώστε την κλάση CustomSearchTextField

Για να δημιουργήσουμε τη νέα μας τάξη, δημιουργούμε ένα νέο αρχείο που ονομάζεται CustomSearchTextField.swift. Σε αυτήν την τάξη, που κληρονομεί από το UITextField, θα ενσωματώσουμε όλες τις δυνατότητες που χρειαζόμαστε για να εφαρμόσουμε το πεδίο αναζήτησης αυτόματης συμπλήρωσης.

Δημιουργία του TableView με τα αποτελέσματα:

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

Για να γίνει αυτό, πρέπει να δημιουργήσουμε ένα αντικείμενο tableView και στη συνέχεια να το προσθέσουμε στην τρέχουσα προβολή. Για να χειριστούμε αυτό το νέο αντικείμενο, πρέπει να παρακάμψουμε συγκεκριμένες μεθόδους όπως φαίνεται παρακάτω. Όλος ο κωδικός που απαιτείται για τη δημιουργία του searchTableView θα χειριστεί με αυτήν τη μέθοδο: buildSearchTableView () .

Η εγκατάσταση του tableView είναι τόσο απλή όσο η δημιουργία ενός νέου αντικειμένου UITableView, αλλά για να αποκτήσουμε πρόσβαση σε όλες τις λειτουργίες αυτού του νέου αντικειμένου tableView, πρέπει να κληρονομήσουμε από τις μεθόδους TableViewDelegates και το TableViewDataSource. Είναι σημαντικό να δώσετε προσοχή σε δύο σημαντικές μεταβλητές:

  • Ο εκπρόσωπος tableView: Αυτή η μεταβλητή θα μας επιτρέψει να καθορίσουμε ποιο αντικείμενο της προβολής πρέπει να ενημερώνεται όταν συμβαίνουν κάποιες αλλαγές στο tableView (στην περίπτωσή μας, αυτό το αντικείμενο είναι το SearchTextField που είναι σε αυτό το πλαίσιο το ίδιο αντικείμενο)
  • The tableView DataSource: Αυτή η μεταβλητή θα μας επιτρέψει να καθορίσουμε πώς θα δημιουργηθούν όλα τα στοιχεία του tableView και από ποια δεδομένα. Εδώ πάλι, πρέπει να το ρυθμίσουμε στον εαυτό μας .

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

Τώρα που έχει δημιουργηθεί η προβολή πίνακα, πρέπει να προσθέσουμε δεδομένα σε αυτήν, και πιο συγκεκριμένα, αυτά τα δεδομένα θα αποθηκευτούν σε κελιά. Χρησιμοποιούμε μεθόδους που κληρονομούνται από την τάξη TableViewDataSource για να διαμορφώσουμε τα κελιά μας και να τα προσθέσουμε στο tableView. Εκτός από αυτό, η μέθοδος TableViewDelegates θα μας επιτρέψει να ενεργοποιήσουμε πού κάνει κλικ ο χρήστης και θα εκτυπώσει το περιεχόμενο του αντίστοιχου κελιού στην κονσόλα.

Αλλά αν προσπαθήσετε να εκτελέσετε τον παραπάνω κώδικα, δεν θα συμβεί τίποτα επειδή το πλαίσιο tableView δεν έχει ρυθμιστεί και δεν φέρουμε την προβολή μπροστά. Για να το διορθώσουμε, πρέπει τώρα να προσθέσουμε μια μέθοδο updateTableView () :

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

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

Όπως μπορείτε να δείτε παραπάνω, τροποποιήσαμε τη μέθοδο willMove () προκειμένου να ορίσουμε τον τρόπο χειρισμού κάθε αλληλεπίδρασης χρήστη με το πεδίο κειμένου. Αυτό που μας ενδιαφέρει είναι όταν αλλάζει το πεδίο κειμένου (όταν ο χρήστης πληκτρολογεί). Έτσι κάθε φορά που ενεργοποιείται αυτή η ενέργεια, προσθέτουμε δεδομένα στη λίστα μας και ενημερώνουμε το tableView.

Βελτίωση της εμπειρίας χρήστη:

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

Ήρθε η ώρα να δημιουργήσουμε τη μέθοδο φίλτρου μας. Αυτή η μέθοδος θα φιλτράρει τα σχετικά στοιχεία από τη λίστα δεδομένων (αυτά που αντιστοιχούν σε αυτό που ο χρήστης αρχίζει να πληκτρολογεί). Θα χρησιμοποιήσουμε την κλάση NSMutableAttabledString για να επισημάνουμε το τμήμα του κειμένου που ο χρήστης πληκτρολόγησε στο πεδίο κειμένου .

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

Τώρα πρέπει να αλλάξουμε την καθολική μεταβλητή μας και να προσθέσουμε μια νέα για να αποθηκεύσουμε τα φιλτραρισμένα στοιχεία μας:

Στη συνέχεια, ας δημιουργήσουμε τη μέθοδο φίλτρου μας:

Μετατρέποντας τη συμβολοσειρά μας σε NSString , μπορούμε να χρησιμοποιήσουμε το εύρος μεθόδου () που επιστρέφει το εύρος της πρώτης εμφάνισης μιας δεδομένης συμβολοσειράς μέσα στη συμβολοσειρά. Με τη χρήση αυτής της μεθόδου γνωρίζουμε και οι δύο εάν η συμβολοσειρά αντιστοιχεί σε αυτό που πληκτρολογεί ο χρήστης και τη θέση της αντίστοιχης συμβολοσειράς! Αυτό είναι το μόνο που χρειάζεται να επισημάνουμε αυτό το μέρος του αντικειμένου μας. Αυτό το κάνουμε χρησιμοποιώντας τις μεθόδους setAttributes και στη συνέχεια προσθέτουμε το αντικείμενο μας στη λίστα αποτελεσμάτων. Τέλος, επαναφορτώνουμε τα δεδομένα στο tableView.

Ας δημιουργήσουμε νέα δεδομένα δοκιμών για να δοκιμάσουμε την εφαρμογή μας:

Όλα πρέπει να λειτουργούν τέλεια, σχεδόν τελειώσαμε! ;

3. Κάντε ερωτήματα στο CoreData

Είναι ωραίο να έχουμε μια όμορφη γραμμή αναζήτησης με προσαρμοσμένη προβολή πίνακα για να εμφανίσουμε τα φιλτραρισμένα αποτελέσματα της αυτόματης συμπλήρωσης, αλλά χωρίς δεδομένα, δεν είναι πολύ χρήσιμο;

Ας συνδέσουμε το πεδίο κειμένου αναζήτησης με τον χώρο αποθήκευσης CoreData.

Δημιουργία βάσης δεδομένων CoreData:

Για να αποθηκεύσουμε τα μόνιμα δεδομένα μας, θα δημιουργήσουμε μια νέα οντότητα (πίνακας) στη βάση δεδομένων μας με δύο χαρακτηριστικά (σειρές). Για να το κάνουμε, κάνουμε κλικ στο αρχείο .xcdatamodeld στην εξερεύνηση αρχείων και δημιουργούμε μια νέα οντότητα με το όνομα Πόλεις, προσθέτουμε τα δύο χαρακτηριστικά που χρειαζόμαστε: cityName και countryName.

Στη συνέχεια, θα τροποποιήσει τον τύπο του DataList μας CustomSearchField.swift να είναι μια λίστα των πόλεων αντί για μια λίστα των SearchItems:

var dataList : [Cities] = [Cities]()

Κάντε ερωτήσεις στη δημιουργημένη βάση δεδομένων:

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

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

Το τελευταίο πράγμα που πρέπει να προσθέσετε είναι μια νέα μέθοδο addData () για τη συμπλήρωση της βάσης δεδομένων μας. Να είστε προσεκτικοί, αυτή η λειτουργία πρέπει να καλείται μόνο μία φορά, καθώς τα δεδομένα που αποθηκεύονται θα γίνουν επίμονα, οπότε σχολιάστε την αντίστοιχη γραμμή στον κώδικά σας (λίγο πριν από τη δημιουργία του tableView στο buildSearchTableView () ) μετά την πρώτη κλήση! Ακόμα και αν γίνει επανεκκίνηση της εφαρμογής, τα δεδομένα θα εξακολουθούν να είναι διαθέσιμα στην εσωτερική μνήμη της συσκευής.

Αυτό είναι ! Τελειώσαμε ! ;

Άρχισα να βουτάω στον προγραμματισμό Swift πριν από λίγες εβδομάδες με ένα ενδιαφέρον MOOC που βρήκα στο Udemy. Αφού απέκτησα τα βασικά της ανάπτυξης Swift και Xcode, άρχισα να δουλεύω στα δικά μου έργα με όλα τα χρήσιμα έγγραφα που βρήκα στον Ιστό. Αυτό το πρώτο σεμινάριο είναι μια ευκαιρία για μένα να μοιραστώ όλες αυτές τις γνώσεις που απέκτησα, οπότε ελπίζω να σας βοήθησε!

Εάν έχετε μια ερώτηση μην διστάσετε να μου πείτε στα σχόλια! Και μην ξεχάσετε να μου δώσετε ένα χειροκρότημα αν σας άρεσε το άρθρο ???

Όλος ο κωδικός του τελικού έργου είναι διαθέσιμος εδώ:

sinitame / customSearchField-μέσο

Πηγαίος κώδικας για το άρθρο Medium: Πώς να δημιουργήσετε μια αυτόματη συμπλήρωση UITextField χρησιμοποιώντας CoreData στο Swift… github.com