fbpx
 

Añadiendo una UISearchBar a tu Aplicación iOS

Añadiendo una UISearchBar a tu Aplicación iOS

1. Introducción

En el tutorial de esta semana vamos a ver como añadir una UISearchBar a una aplicación iOS.

Hace casi un mes recibí un email de un lector de EfectoApple que me comentaba que estaba interesado en saber como implementar una aplicación que contara con una UITableView y además una UISearchBar que le permitiera realizar búsquedas en dicha tabla.

Se trata de algo muy común en cualquier aplicación iOS.

Muchas aplicaciones utilizan una TableView para mostrar un listado de datos y en la parte superior de la pantalla ofrecen una UISearchBar para que el usuario pueda realizar búsquedas dentro de ese listado.

Al tratarse de algo tan común, creo que puede ser muy útil para cualquiera que esté interesado en desarrollar una Aplicación iOS conocer la forma de añadir una UISearchBar a su app.

Por este motivo en el tutorial de esta semana veremos como llevar a cabo este desarrollo.

2. ¿Qué vamos a ver en este Tutorial?

En el tutorial de la semana pasada desarrollamos una aplicación deportiva en la que utilizábamos una UITableView con celdas personalizadas para mostrar un listado de ejercicios.

En el tutorial de hoy, vamos a partir de esa aplicación y vamos a añadir una UISearchBar en la parte superior de nuestra interfaz.

De esta manera, los usuarios podrán buscar un ejercicio concreto dentro del listado de rutinas.

Si no has seguido el tutorial de la semana pasada, puedes acceder desde aquí.

Estos serán algunos de los puntos más interesantes que veremos:

  1. Crearemos por código un UISearchController que gestione las búsquedas.
  2. Configuraremos las propiedades de una TableView a través de nuestro código.
  3. Crearemos también por código un TableViewController, con su TableView que muestre los resultados de las búsquedas.
  4. Veremos como agregar una UISearchBar a la cabecera de nuestra TableView.
  5. Trabajaremos con el protocolo UISearchResultsUpdating.
  6. Utilizaremos la función filter en Swift para devolver los resultados de las búsquedas.

3. La Aplicación que vamos a crear

Como ya hemos comentado en el punto anterior, vamos a utilizar la aplicación desarrollada la semana pasada y trabajaremos sobre ella, viendo el proceso completo que debemos seguir para añadir la UISearchBar.

Una vez que hayamos finalizado este tutorial, la aplicación que obtendremos tendrá este aspecto:

UISearchBar app finishedUna vez visto el resultado final, vamos a ver algo de teoría (muy breve, lo prometo) y después comenzaremos con el proyecto.

4. ¿Cómo funciona una UISearchBar?

La UISearchBar nos permite realizar búsquedas en listados mostrados en TableViews.

Una UISearchBar está gestionada por su UISearchController, es decir por su controlador.

Cuando un usuario realiza una búsqueda en una UISearchBar, se muestra una nueva TableView con los datos que concuerdan con esa búsqueda.

¿De donde se obtienen esos datos?

Se obtienen de una colección creada por nosotros mismos, normalmente un Array, donde almacenamos los resultados que concuerdan con esa búsqueda.

¿Y donde se rellena ese array con los datos que concuerdan con la búsqueda?

Ese array se rellena en el método updateSearchResults(), que se ejecutará cada vez que el usuario introduce un nuevo carácter en la UISearchBar.

Veámoslo con un ejemplo sencillo.

Imaginemos que tenemos un listado de 3 ciudades que mostramos en un TableView: Valencia, Valladolid, Vitoria.

Justo encima del TableView tenemos una UISearchBar donde el usuario puede hacer búsquedas.

El usuario pulsa en la UISearchBar y escribe una V.

Automáticamente se ejecuta el método updateSearchResults(), donde estará nuestro código que comprobará si hay algún elemento del listado que contiene una V.

Como en este caso, las 3 ciudades tienen una V, en el array de resultados (Que se rellena con los elementos del listado que concuerdan con la búsqueda) tendremos las 3 ciudades y por tanto en nuestra aplicación se mostrarán las 3 ciudades.

¿Qué pasa si el usuario sigue escribiendo y después de la V escribe una A?

Se volverá a ejecutar el método updateSearchResults() y en este caso, en el array de resultados se almacenarán 2 ciudades: Valencia y Valladolid y por tanto en nuestra aplicación se mostrarán únicamente 2 ciudades.

El usuario podría seguir escribiendo caracteres y nuestro método updateSearchResults() iría almacenando en el array los resultados que concuerden con la búsqueda.

Aclaración antes de comenzar con el desarrollo

Una de las partes más importantes del funcionamiento del UISearchBar es dejar muy claro que trabajamos con 2 Arrays y con 2 TableViews.

Usaremos un array para almacenar el listado completo de elementos que mostraremos en nuestra TableView y el otro array para almacenar únicamente la información que concuerde con las búsquedas que vaya realizando el usuario en el UISearchBar.

Usaremos una TableView para mostrar el listado completo de elementos y otra TableView para mostrar únicamente la información que coincida con las búsquedas del usuario.

Una vez explicado esto, ¡comenzamos!

5. Descarga del Proyecto de Inicio

Para comenzar el Tutorial, lo primero que debes hacer es bajarte la app que desarrollamos la semana pasada.

Puedes descargarla desde aquí.

Una vez que la tengas en tu ordenador, descomprímela y ábrela con Xcode.

Los siguientes pasos serán compilar y ejecutar la aplicación, para comprobar que funciona correctamente y muestra el listado de ejercicios.

6. Echando un vistazo a nuestro Proyecto

Como puedes ver, además del AppDelegate.swift, contamos con 2 clases en nuestra aplicación:

  • ViewController.swift
  • ExerciseTableViewCell.swift

ViewController.swift es el controlador encargado de gestionar la única pantalla que forma nuestra app.

ExerciseTableViewCell.swift es la clase encargada de nuestras celdas personalizadas.

Además de esto, por supuesto, tenemos el fichero Main.storyboard, donde puedes ver la interfaz de la aplicación.

 

UISearchBar app template

Para añadir la UISearchBar al proyecto, únicamente tendremos que trabajar en la clase ViewController.swift. Ahí es donde crearemos todo el código que necesitaremos.

7. La clase ViewController.swift

El aspecto actual de nuestra clase es el siguiente:

Simplemente tenemos el modelo de nuestra aplicación: exercisesList y los dos métodos fundamentales para poder mostrar este modelo en nuestra TableView:

  • numberOfRowsInSection()
  • cellForRowAt()

A partir de aquí, iremos añadiendo todo el código que necesitemos en esta clase.

8. Creando el array que almacenará los resultados de las búsquedas

Hemos comentado que trabajaremos con 2 Arrays y con 2 TableViews.

Uno de los arrays ya lo tenemos, se llama exercisesList y contiene todos los ejercicios que mostramos en nuestra TableView.

Necesitamos otro array que almacene los ejercicios que coincidan con las búsquedas del usuario.

Así que justo después de nuestro array exercisesList creamos el otro array filteredExercises:

Date cuenta que este array es una variable, en lugar de una constante. Debe ser así puesto que su contenido va a ir modificándose en función de lo que busque el usuario.

9. Creando el Outlet para nuestra TableView

Necesitaremos hacer referencia a la TableView que hemos creado en la interfaz de nuestra aplicación, por lo que debemos crear un Outlet, para poder acceder a ella desde nuestro código.

Por tanto, justo en la primera linea de nuestra clase deberás añadir lo siguiente:

10. Creando nuestro SearchBar

Para poder crear nuestro SearchBar necesitaremos 2 cosas:

  1. Un UITableViewController que será el encargado de gestionar la TableView en la que mostraremos los resultados de las búsquedas
  2. Un UISearchController que será quien gestione el funcionamiento de la UISearchBar

Por tanto, añadimos ambos elementos a nuestra clase ViewController.swift:

Nuestro siguiente paso será crear una función que se encargue de crear el UISearchBar:

En el punto //1 lo que hacemos es crear un nuevo UISearchController a partir de nuestro UITableViewController. Es obligatorio que le asignemos un UITableViewController, porque sino nuestro UISearchBar no sabrá en que TableView tiene que mostrar los resultados de la búsqueda.

En //2 añadimos al Header de nuestra TableView el UISearchBar. Esta línea de código es la que hace que la UISearchBar aparezca en la parte superior de nuestra aplicación.

Por último en //3 decimos que nuestra clase ViewController será quien adopte el protocolo UISearchResultsUpdating.

Este protocolo, nos permite implementar el método updateSearchResults() que veremos más adelante.

11. Configurando la TableView que muestra los resultados

En el punto 7 hemos creado un UITableViewController que se encargará de gestionar la TableView que mostrará los resultados de las búsquedas.

Es decir, hemos creado un UITableViewController mediante código y trae consigo una UITableView.

A esta UITableView, como hemos hecho siempre que hemos trabajado con TableViews, tendremos que decirle quien es su delegate y su dataSource.

Cuando la creación de las TableViews la realizamos desde el Storyboard, para especificar esto utilizamos las conexiones del propio Storyboard.

En este caso, como la TableView la hemos creado mediante código no podemos hacerlo así.

Por tanto, crearemos un método llamado tableSettings() que se encargará de esto:

Estas dos funciones que hemos creado en los puntos 7 y 8 : creatingSearchBar() y tableSettings(), tendremos que llamarlas desde algún sitio. Como queremos que se ejecuten nada más arrancar la aplicación, añadiremos las llamadas a nuestro método viewDidLoad(). Por tanto, añade estas lineas a ese método:

12. Trabajando con el Protocolo UISearchResultsUpdating

Hemos comentado anteriormente, que para que nuestro UISearchBar funcione deberá implementar el método updateSearchResults(). Este método está definido en el protocolo UISearchResultsUpdating.

Por tanto, tendremos que hacer que nuestra clase se ajuste a este protocolo y posteriormente implementar dicho método.

Para hacer que nuestra clase se ajuste a UISearchResultsUpdating, simplemente tendremos que añadirlo en su cabecera:

En el momento que hagamos esto, obtendremos un error de Xcode.

 

UISearchBar error protocol

 

Es totalmente normal. Nos está avisando que si queremos que nuestra clase se ajuste a dicho protocolo tendrá que implementar el método updateSearchResults().

Eso es justo lo que vamos a hacer, añade el siguiente método a la clase ViewController.swift:

En el método updateSearchResults(), lo que hacemos es utilizar la función filter() para localizar las coincidencias de la búsqueda en el listado de ejercicios.

Recorremos el array exercisesList y vamos almacenando en nuestro array filteredExercises las coincidencias que se vayan produciendo.

Además utilizamos la función lowercased() para asegurarnos que las búsquedas no distinguen entre mayúsculas y minúsculas.

Por último, hacemos un reloadData() para que la TableView que muestra los resultados, actualice su contenido.

Con esto, tendríamos el método que comprueba los resultados de las búsquedas y los muestra en la TableView funcionando.

13. Modificando los métodos del TableView

En nuestra clase ViewController.swift tenemos 2 métodos que son los que hacen que nuestra TableView muestre el listado de ejercicios: numberOfRowsInSection()cellForRowAt().

Al haber implementado una UISearchBar, ahora tendremos que utilizar estos 2 métodos para mostrar el listado de ejercicios completo en nuestra TableView principal y también para mostrar el listado de ejercicios que vayan coincidiendo con las búsquedas en la otra TableView.

Por tanto, después de modificar ambos métodos, deberían tener este aspecto:

Simplemente, lo que hacemos, es que si la TableView que realiza la llamada a este método es nuestra tabla principal, devolvemos el número de elementos de nuestro array exercisesList (Que contiene todos los ejercicios).

En cambio, si la TableView que llama a este método es la tabla de resultados, devolvemos el número de elementos de nuestro array filteredExercises (Que contiene únicamente los ejercicios que coincidan con la búsqueda)

El segundo método será así:

Seguimos el mismo razonamiento que en el método anterior.

Si la TableView que llama a este método es nuestra tabla principal, trabajaremos con el array exercisesList, mientras que si la TableView es la tabla de resultados, trabajaremos con el array filteredExercises.

14. Ejecutando nuestra Aplicación

Una vez realizados todos los cambios que necesitábamos, puedes probar a ejecutar la aplicación.

Al lanzar nuestra app, obtendrás un error como este:

 

UISearchBar error nil

 

Si te fijas en la consola, verás el mensaje del error:

 

UISearchBar error description

 

Con estas 2 imágenes está claro cual es el problema.

Por algún motivo, self.tableView es nil.

La causa de este error, es que hemos olvidado enlazar el Outlet de nuestra TableView en nuestro Storyboard.

Así que para solucionarlo, vamos a enlazarlo.

Estando en el Main.storyboard, deja pulsada la tecla ctrl y arrastra desde el View Controller hasta el Table View. Después elige tableView:

 

UISearchBar connecting outlet

 

Ahora si, vuelve a ejecutar la aplicación y comprueba que se ejecuta correctamente.

15. Testeando nuestra App

Si lanzas la aplicación verás como se muestra la TableView con el listado de ejercicios y justo encima aparece nuestra UISearchBar. Hasta ahí todo perfecto.

 

UISearchBar app working

 

De hecho, si realizas alguna búsqueda desde la UISearchBar, verás como la app muestra los ejercicios que coincidan con las palabras de búsqueda.

 

7 UISearchBar search results

 

El problema, como puedes apreciar, es que la TableView que muestra los resultados no tiene el alto de las celdas correctamente especificado y además la tabla muestra los separadores de celdas, algo que no queremos.

Como la TableView que gestiona los resultados la hemos creado por código, tendremos que modificar estas propiedades también por código.

Para eso, simplemente tendrás que añadir 2 lineas al método tableSettings(), que ahora deberá tener este aspecto:

Lo que hacemos simplemente, es especificar el alto de las celdas a 204 y establecer que no queremos utilizar ningún tipo de separador entre las celdas.

Si ahora vuelves a ejecutar la aplicación y realizas una búsqueda de nuevo, verás como nuestra TableView muestra los resultados correctamente.

UISearchBar app workingEnhorabuena, has conseguido implementar una UISearchBar que funciona perfectamente en nuestra aplicación.

16. Resumen Final

Estos son algunos de los puntos más importantes que hemos visto en este Tutorial:

  1. Comprender el funcionamiento de UISearchBar.
  2. Crear por código un UISearchController que gestione las búsquedas.
  3. Desarrollar mediante código un TableViewController, con su TableView que muestre los resultados de las búsquedas.
  4. Configurar las propiedades de una TableView a través de código.
  5. Añadir una UISearchBar a la cabecera de nuestra TableView.
  6. Trabajar con el protocolo UISearchResultsUpdating.
  7. Utilizar la función filter en Swift para devolver los resultados de las búsquedas.
  8. Solucionar un error muy común cuando trabajamos con TableViews.

Si te interesa tener el proyecto terminado, puedes descargarlo desde aquí.

17. Has terminado el Tutorial

Has acabado el tutorial de esta semana en EfectoApple. Como siempre, aquí tienes tu recompensa. El video chorra de esta semana:

[ejercicio titulo = “¿Dormimos juntos?” num=”1″]

[/ejercicio]

18. ¿Donde ir ahora?

Puedes acceder a más tutoriales disponibles en EfectoApple aquí.

Si este artículo te ha parecido útil, me harías un gran favor compartiéndolo en tus redes sociales.

Como siempre, para cualquier duda, tienes los comentarios a tu disposición.

Etiquetas:
,
2 Comentarios
  • Pep
    Publicado a las 11:35h, 05 septiembre Responder

    Felicidades por el blog, es estupendo.
    Esta app me genera un error al probarla en el simulador.
    Thread 1: signal SIGABRT
    Me da el error tanto en mi app como con la app que he descargado al final del tutorial.
    Saludos

  • Angel
    Publicado a las 00:48h, 20 octubre Responder

    Genial los tuturiales¡¡
    Me funciona perfectamente(con tu array), la única duda que tengo es con mi array es de tipo diccionario y no consigo hacerlo filtrar…. :(((

    ¿alguna pista?

    Gracias¡¡¡¡

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.