Comment configurer un UITextField auto-complet utile à l'aide de CoreData dans Swift

Tout ce que vous devez savoir pour créer votre barre de recherche de saisie semi-automatique avec un UITableView et CoreData.

Dans cet article, je vais vous présenter comment j'ai créé un champ de recherche personnalisé avec une fonctionnalité de saisie semi-automatique pour récupérer les données de CoreData. C'est un composant dont j'avais besoin dans l'une de mes applications et qui peut être très utile dans de nombreux cas pour améliorer l'expérience de l'utilisateur.

Nous verrons:

  • Comment configurer une application simple avec une recherche UITextField
  • Comment configurer un TableView pour afficher les résultats de la recherche
  • Comment effectuer des requêtes en temps réel sur les collections CoreData

1. Mise en place du projet

Créez simplement une application à vue unique avec les composants suivants (vérifiez CoreData lors de la création du projet!). Pour être plus concret, imaginons que ce soit pour une application de recommandation de voyage et que l'utilisateur ait besoin de fournir un nom de ville pour obtenir toutes les informations du lieu.

UILabel: Nous l'appellerons topLabel. Nous n'en aurons pas besoin.

UITextField: C'est le champ que nous allons personnaliser pour avoir un champ de recherche à saisie semi-automatique, alors appelons-le searchTextField.

UIButton: C'est le bouton qui sera pressé lorsque l'utilisateur trouvera l'endroit qu'il veut. Appelons-le searchButton .

Le tableView sera ajouté par programme afin que vous voyiez comment le configurer dans n'importe quel type de situation.

Pour avoir un beau rendu, j'ai ajouté une UIImageView en arrière-plan avec une magnifique image de plage.

Pour connecter tous ces composants à notre contrôleur de vue, sélectionnez chacun d'eux et faites glisser leur référence à l'aide de ( Ctrl (ou Ctrl) ⌃ + clic ) vers votre fichier swift principal de contrôleur de vue.

2. Configurez notre classe CustomSearchTextField

Pour créer notre nouvelle classe, nous créons un nouveau fichier appelé CustomSearchTextField.swift. C'est dans cette classe, qui hérite de UITextField, que nous intégrerons toutes les fonctionnalités dont nous avons besoin pour implémenter notre champ de recherche de saisie semi-automatique.

Création de la TableView avec les résultats:

Pour pouvoir afficher les résultats d'achèvement, nous devons instancier un UITableView qui affichera les résultats les plus pertinents comme ci-dessous:

Pour ce faire, nous devons créer un objet tableView, puis l'ajouter à la vue actuelle. Afin de gérer ce nouvel objet, nous devons remplacer des méthodes spécifiques comme indiqué ci-dessous. Tout le code nécessaire pour créer le searchTableView sera géré par cette méthode: buildSearchTableView () .

L'instanciation de tableView est aussi simple que de créer un nouvel objet UITableView, mais pour accéder à toutes les fonctionnalités de ce nouvel objet tableView, nous devons hériter des méthodes TableViewDelegates et TableViewDataSource. Il est important de prêter attention à deux variables importantes:

  • Le délégué tableView: Cette variable nous permettra de spécifier quel objet de la vue doit être informé lorsque des changements se produisent dans le tableView (dans notre cas, cet objet est notre SearchTextField qui est dans ce contexte l' objet self )
  • La source de données tableView: Cette variable nous permettra de spécifier comment tous les composants de tableView seront créés et à partir de quelles données. Là encore, nous devons le définir sur soi .

La définition de ces deux variables nous permet de gérer certaines actions liées à UITableView dans notre classe CustomSearchTextField.

Maintenant que la vue de table est créée, nous devons y ajouter des données, et plus concrètement, ces données seront stockées dans des cellules. Nous utilisons des méthodes héritées de la classe TableViewDataSource pour configurer nos cellules et les ajouter à la tableView. En plus de cela, la méthode TableViewDelegates nous permettra de déclencher là où l'utilisateur clique et d'imprimer le contenu de la cellule correspondante dans la console.

Mais si vous essayez d'exécuter le code ci-dessus, rien ne se passera car le cadre tableView n'est pas défini et nous n'avons pas amené la vue au premier plan. Pour résoudre ce problème, nous devons maintenant ajouter une méthode updateTableView () :

Notre TableView est configuré et est maintenant censé fonctionner parfaitement! Mais pour le moment, nous devons ajouter des données dans notre dataList si nous voulons afficher quelque chose. Pour le faire simplement pour l'instant, nous allons simplement ajouter des données factices à notre liste: le texte que l'utilisateur entre dans notre barre de recherche.

Mais l'objectif principal de tout cela est de donner à nos utilisateurs des résultats d'auto-complétion pendant qu'ils tapent dans notre barre de recherche, nous devons donc observer quand l'utilisateur tape une nouvelle lettre et mettre à jour les données du tableau en fonction de cela.

Comme vous pouvez le voir ci-dessus, nous avons modifié la méthode willMove () afin de définir comment gérer chacune des interactions de l'utilisateur avec le textField. Celui qui nous intéresse est lorsque le champ de texte change (lorsque l'utilisateur tape). Ainsi à chaque fois que cette action est activée, nous ajoutons des données à notre liste et nous mettons à jour notre tableView.

Améliorer l'expérience utilisateur:

Même si notre searchField ne recherche pas du tout, vous devez avoir vu que lorsque nous tapons et que les résultats commencent à apparaître, tous les résultats sont en texte brut. Cela ne ressemble pas tellement à une barre de recherche de saisie semi-automatique. Pour être plus convivial, il serait bien de mettre en évidence la partie du texte que nous avons déjà tapée dans le champ de texte et également de filtrer les résultats afin qu'ils correspondent à ce que nous sommes en train de saisir. Faisons ça ?

Il est temps de créer notre méthode de filtrage. Cette méthode filtrera les éléments pertinents de la dataList (ceux correspondant à ce que l'utilisateur commence à taper). Nous utiliserons la classe NSMutableAttributedString pour pouvoir mettre en évidence la partie du texte que l'utilisateur a tapée dans le champ de texte .

Tout d'abord, nous créons une classe SearchItem qui représentera chacun de nos résultats filtrés. Pendant que nous construisons notre merveilleuse application de recommandation de voyage, nous considérerons que ces éléments sont des noms de villes. Voici la classe SearchItem :

Nous devons maintenant changer notre variable globale et en ajouter une nouvelle pour stocker nos éléments filtrés:

Alors créons notre méthode de filtrage:

En convertissant notre chaîne en NSString , nous pouvons utiliser la méthode range () qui renvoie la plage de la première occurrence d'une chaîne donnée dans la chaîne. En utilisant cette méthode, nous savons tous les deux si la chaîne correspond à ce que l'utilisateur tape et à la position de la chaîne correspondante! C'est tout ce dont nous avons besoin pour mettre en évidence cette partie de notre article. Nous faisons cela en utilisant les méthodes setAttributes et nous ajoutons ensuite notre élément à resultsList. Enfin, nous rechargeons les données dans notre tableView.

Créons de nouvelles données de test pour essayer notre implémentation:

Tout devrait fonctionner parfaitement, nous avons presque terminé! ?

3. Faites des requêtes à CoreData

C'est bien d'avoir une belle barre de recherche avec une vue tabulaire personnalisée pour afficher nos résultats filtrés par autocomplétion, mais sans données, ce n'est pas très utile?.

Connectons notre champ de texte de recherche au stockage CoreData.

Créez une base de données CoreData:

Afin de stocker nos données persistantes, nous allons créer une nouvelle entité (table) dans notre base de données avec deux attributs (lignes). Pour ce faire, nous cliquons sur le fichier .xcdatamodeld dans l'explorateur de fichiers et créons une nouvelle entité nommée Cities, ajoutons les deux attributs dont nous avons besoin: cityName et countryName.

Ensuite, nous modifierons le type de notre dataList dans CustomSearchField.swift pour être une liste de villes au lieu d'une liste d'objets de recherche:

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

Faites des requêtes dans la base de données créée:

Nous devons maintenant créer des méthodes pour gérer l'enregistrement et la récupération de nouvelles données dans la base de données. Pour ce faire, nous devons créer un contexte. Le contexte est une zone spécifique où nous stockerons tous nos changements avant de les valider dans la base de données. Si vous utilisez git, c'est comme la zone de préparation. Vous ajoutez d'abord votre fichier à la zone de préparation, et lorsque vous êtes prêt avec vos modifications, vous les validez dans votre git.

Nous changeons le début de notre méthode filter () afin d'interroger les données qui correspondent à l'entrée utilisateur au lieu de récupérer toutes les données de la base de données:

La dernière chose à ajouter est une nouvelle méthode addData () pour peupler notre base de données. Attention, cette fonction n'a besoin d'être appelée qu'une seule fois car les données stockées deviendront persistantes, alors commentez la ligne correspondante dans votre code (juste avant la création de la tableView dans buildSearchTableView () ) après le premier appel! Même si l'application est redémarrée, les données seront toujours disponibles dans la mémoire interne de l'appareil.

C'est ça ! Avaient fini ! ?

J'ai commencé à me plonger dans la programmation Swift il y a quelques semaines avec un MOOC intéressant que j'ai trouvé sur Udemy. Après avoir acquis les bases du développement Swift et Xcode, j'ai commencé à travailler sur mes propres projets avec toute la documentation utile que j'ai trouvée sur le web. Ce premier tutoriel est l'occasion pour moi de partager toutes ces connaissances que j'ai acquises, j'espère donc que cela vous a aidé!

Si vous avez une question, n'hésitez pas à me le dire dans les commentaires! Et n'oubliez pas de me donner un applaudissement si vous avez apprécié l'article ???

Tout le code final du projet est disponible ici:

sinitame / customSearchField-medium

Code source pour l'article Medium: Comment créer un UITextField de saisie semi-automatique à l'aide de CoreData dans Swift… github.com