Cómo configurar un útil UITextField de autocompletar usando CoreData en Swift

Todo lo que necesita saber para crear su barra de búsqueda de autocompletado con UITableView y CoreData.

En este artículo, voy a presentar cómo construí un campo de búsqueda personalizado con una función de autocompletado para recuperar datos de CoreData. Es un componente que necesitaba en una de mis aplicaciones y que puede ser muy útil en muchos casos para mejorar la experiencia del usuario.

Veremos:

  • Cómo configurar una aplicación simple con una búsqueda UITextField
  • Cómo configurar un TableView para mostrar los resultados de la búsqueda
  • Cómo realizar consultas en tiempo real a colecciones de CoreData

1. Configuración del proyecto

Simplemente cree una aplicación de vista única con los siguientes componentes (consulte CoreData en la creación del proyecto). Para ser más concretos, imaginemos que se trata de una aplicación de recomendación de viajes y el usuario debe proporcionar un nombre de ciudad para obtener toda la información del lugar.

UILabel: Lo llamaremos topLabel. No lo necesitaremos.

UITextField: es el campo que personalizaremos para tener un campo de búsqueda de autocompletar, así que llamémoslo searchTextField.

UIButton: Es el botón que se presionará cuando el usuario encuentre el lugar que desea. Llamémoslo searchButton .

El tableView se agregará mediante programación para que vea cómo configurarlo en cualquier tipo de situación.

Para tener un hermoso render, agregué un UIImageView en el fondo con una maravillosa imagen de playa.

Para conectar todos esos componentes a nuestro controlador de vista, seleccione cada uno de ellos y arrastre su referencia usando ( Control (o Ctrl) ⌃ + clic ) a su archivo rápido principal del controlador de vista.

2. Configure nuestra clase CustomSearchTextField

Para crear nuestra nueva clase, creamos un nuevo archivo llamado CustomSearchTextField.swift. Es en esta clase, que hereda de UITextField, que integraremos todas las características que necesitamos para implementar nuestro campo de búsqueda de autocompletado.

Creando el TableView con los resultados:

Para poder mostrar los resultados de finalización, necesitamos crear una instancia de UITableView que mostrará los resultados más relevantes como se muestra a continuación:

Para hacerlo, necesitamos crear un objeto tableView y luego agregarlo a la vista actual. Para manejar este nuevo objeto, necesitamos anular métodos específicos como se muestra a continuación. Todo el código necesario para construir searchTableView será manejado por este método: buildSearchTableView () .

Crear una instancia de tableView es tan simple como crear un nuevo objeto UITableView, pero para acceder a todas las funcionalidades de este nuevo objeto tableView, necesitamos heredar de los métodos TableViewDelegates y TableViewDataSource. Es importante prestar atención a dos variables importantes:

  • El delegado de tableView: esta variable nos permitirá especificar qué objeto de la vista necesita ser informado cuando ocurren algunos cambios en el tableView (en nuestro caso, este objeto es nuestro SearchTextField que es en este contexto el objeto self )
  • TableView DataSource: esta variable nos permitirá especificar cómo se crearán todos los componentes de tableView y a partir de qué datos. Aquí nuevamente, tenemos que configurarlo para nosotros mismos .

Establecer esas dos variables nos permite manejar algunas acciones relacionadas con UITableView dentro de nuestra clase CustomSearchTextField.

Ahora que se creó la vista de tabla, debemos agregar datos en ella y, más concretamente, estos datos se almacenarán en celdas. Usamos métodos heredados de la clase TableViewDataSource para configurar nuestras celdas y agregarlas a tableView. Además de esto, el método TableViewDelegates nos permitirá disparar donde el usuario hace clic e imprimirá el contenido de la celda correspondiente en la consola.

Pero si intenta ejecutar el código anterior, no ocurrirá nada porque el marco tableView no está configurado y no hemos traído la vista al frente. Para solucionar esto, ahora necesitamos agregar un método updateTableView () :

¡Nuestro TableView está configurado y ahora se supone que funciona perfectamente! Pero en este momento tenemos que agregar datos en nuestra lista de datos si queremos mostrar algo. Para hacerlo simplemente por ahora, solo agregaremos datos ficticios a nuestra lista: el texto que ingresa el usuario en nuestra barra de búsqueda.

Pero el objetivo principal de todo esto es brindar a nuestros usuarios resultados de autocompletado mientras escriben en nuestra barra de búsqueda, por lo que debemos observar cuándo el usuario escribe una nueva letra y actualizar los datos de tableView de acuerdo con eso.

Como puede ver arriba, modificamos el método willMove () para establecer cómo manejar cada una de las interacciones del usuario con el campo de texto. El que nos interesa es cuando cambia el campo de texto (cuando el usuario está escribiendo). Entonces, cada vez que se activa esta acción, agregamos datos a nuestra lista y actualizamos nuestro tableView.

Mejorando la experiencia del usuario:

Incluso si nuestro searchField no busca en absoluto, debe haber visto que cuando escribimos y los resultados comienzan a aparecer, todos los resultados están en texto sin formato. Esto no se parece mucho a una barra de búsqueda de autocompletado. Para ser más fácil de usar, sería bueno resaltar la parte del texto que ya escribimos en el campo de texto y también filtrar los resultados para que correspondan con lo que realmente estamos escribiendo. Vamos a hacer esto ?

Es hora de crear nuestro método de filtro. Este método filtrará los elementos relevantes de la lista de datos (los correspondientes a lo que el usuario comienza a escribir). Vamos a utilizar la clase NSMutableAttributedString para poder resaltar la parte del texto que el usuario escribe en el campo de texto .

Primero, creamos una clase SearchItem que representará cada uno de nuestros resultados filtrados. Mientras creamos nuestra maravillosa aplicación de recomendación de viajes, consideraremos que esos elementos son nombres de ciudades. Aquí está la clase SearchItem :

Ahora necesitamos cambiar nuestra variable global y agregar una nueva para almacenar nuestros elementos filtrados:

Entonces creemos nuestro método de filtro:

Al convertir nuestra cadena en un NSString , podemos usar el método range () que devuelve el rango de la primera aparición de una cadena dada dentro de la cadena. Al usar este método, ambos sabemos si la cadena corresponde a lo que el usuario está escribiendo y la posición de la cadena correspondiente. Eso es todo lo que necesitamos para resaltar esta parte de nuestro artículo. Hacemos esto usando métodos setAttributes y luego agregamos nuestro elemento a la resultsList. Finalmente, recargamos los datos en nuestro tableView.

Creemos nuevos datos de prueba para probar nuestra implementación:

Todo debería funcionar perfectamente, ¡ya casi terminamos! ?

3.Haz consultas a CoreData

Es bueno tener una hermosa barra de búsqueda con una vista de tabla personalizada para mostrar nuestros resultados filtrados de autocompletado, pero sin datos, ¿no es muy útil?

Conectemos nuestro campo de texto de búsqueda al almacenamiento de CoreData.

Cree una base de datos CoreData:

Para almacenar nuestros datos persistentes, crearemos una nueva entidad (tabla) en nuestra base de datos con dos atributos (filas). Para ello hacemos clic en el archivo .xcdatamodeld en el explorador de archivos y creamos una nueva entidad llamada Ciudades, agregamos los dos atributos que necesitamos: cityName y countryName.

Luego modificaremos el tipo de nuestro dataList en CustomSearchField.swift para que sea una lista de Ciudades en lugar de una lista de SearchItems:

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

Realice consultas a la base de datos creada:

Ahora necesitamos crear algunos métodos para manejar el almacenamiento y la obtención de nuevos datos en la base de datos. Para hacerlo, necesitamos crear un contexto. El contexto es una zona específica donde almacenaremos todos nuestros cambios antes de enviarlos a la base de datos. Si usa git, esto es como la zona de preparación. Primero agrega su archivo al área de preparación, y cuando esté listo con sus cambios, los confíe en su git.

Cambiamos el comienzo de nuestro método filter () para consultar los datos que corresponden a la entrada del usuario en lugar de obtener todos los datos de la base de datos:

Lo último que debemos agregar es un nuevo método addData () para poblar nuestra base de datos. Tenga cuidado, esta función debe llamarse solo una vez ya que los datos almacenados se volverán persistentes, así que comente la línea correspondiente en su código (justo antes de la creación de tableView en buildSearchTableView () ) después de la primera llamada. Incluso si se reinicia la aplicación, los datos seguirán estando disponibles en la memoria interna del dispositivo.

Eso es ! ¡Terminamos! ?

Empecé a sumergirme en la programación de Swift hace unas semanas con un MOOC interesante que encontré en Udemy. Después de haber adquirido los conceptos básicos del desarrollo de Swift y Xcode, comencé a trabajar en mis propios proyectos con toda la documentación útil que encontré en la web. Este primer tutorial es una oportunidad para mí de compartir todo ese conocimiento que adquirí, ¡así que espero que te haya ayudado!

Si tienes alguna pregunta, ¡no dudes en decírmelo en los comentarios! Y no olvides darme una palmada si te gustó el artículo ???

Todo el código final del proyecto está disponible aquí:

sinitame / customSearchField-medium

Código fuente para el artículo de Medium: Cómo crear un UITextField de autocompletado usando CoreData en Swift… github.com