fbpx
 

Crea una SearchBar personalizada [Parte 2]

Crea una SearchBar personalizada [Parte 2]

1. Introducción

Si has estado siguiendo los últimos tutoriales de EfectoApple, habrás comprobado que desde hace algunas semanas estamos creando una aplicación enfocada en el deporte, desarrollando una SearchBar personalizada.

Hemos diseñado una interfaz sencilla que consta de una UITableView con celdas personalizadas. Además, para facilitar las búsquedas del usuario hemos añadido en la parte superior una SearchBar.

En el tutorial de la semana pasada, vimos como desarrollar una SearchBar personalizada.

No pudimos acabar el desarrollo completo en ese tutorial, por lo que lo dividimos en 2 partes.

Si quieres acceder a la primera parte de este tutorial, puedes hacerlo desde aquí.

Te recomiendo que no sigas sin haber echado un vistazo a la primera parte. Eso te permitirá comprender completamente la aplicación que vamos a desarrollar.

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

Como hemos comentado antes, al tratarse de la segunda parte de nuestro Tutorial sobre como crear una SearchBar personalizada, continuaremos justo donde lo dejamos la semana pasada.

Estos son los pasos que daremos para terminar nuestra aplicación:

  • Modificar la clase ViewController para poder mostrar nuestra SearchBar personalizada
  • Crear un protocolo de delegado
  • Implementar los métodos de dicho protocolo
  • Modificar los métodos propios del TableView para hacer que funcione la SearchBar

Cuando terminemos esta segunda parte del tutorial y domines el proceso de creación de una SearchBar personalizada, este es el aspecto que tendrá nuestra aplicación:

iphone7spacegrey_portrait-2-2

En la primera parte del tutorial desarrollamos el CustomSearchBar y el CustomSearchController.

Ahora continuaremos haciendo que se muestre nuestra CustomSearchBar en la interfaz de la aplicación.

Si no estás familiarizado con los conceptos de Protocolo y Delegado, es conveniente que les eches un vistazo:

3. Mostrando nuestra SearchBar personalizada

Como ya sabes, el controlador principal de nuestra app es ViewController.swift.

Ábrelo y añade en la parte superior, la siguiente propiedad:

Esta propiedad hace referencia al CustomSearchController que creamos en la primera parte del tutorial.

Ahora, crearemos un nuevo método que utilizaremos para personalizar este elemento.

Añade este método a tu clase ViewController.swift:

Lo primero que hacemos es crear el customSearchController a través del inicializador personalizado que habíamos creado.

En este inicializador especificamos el frame del searchBar, la fuente que vamos a utilizar y el color, tanto del texto como del tintado del searchBar.

Después, establecemos el texto que queremos que aparezca por defecto en nuestra SearchBar personalizada (placeholder).

Por último, añadimos la SearchBar personalizada a la cabecera de nuestra tabla. Esta última línea del método es la que hace que nuestra SearchBar aparezca en la parte superior de la tabla.

Una vez que hemos creado este método, ahora tendremos que llamarlo desde algún punto de nuestra aplicación.

Como queremos que nuestra SearchBar personalizada mantenga este diseño desde el principio, lo lógico es realizar la llamada desde el método viewDidLoad():

Ahora, ejecuta la aplicación y verás, como nuestra SearchBar personalizada se muestra en la parte superior de la TableView.

 

SearchBar personalizada added to interface

 

Sin embargo, si pruebas a realizar alguna búsqueda con ella, verás que no funciona.

Veremos como solucionar esto en el siguiente apartado.

4. Trabajando con el Protocolo de Delegado

Nuestro CustomSearchController va a ser el Delegado de nuestro CustomSearchBar.

Esto quiere decir que toda la funcionalidad de la búsqueda la controlaremos desde la clase CustomSearchController.swift.

Después, implementando un Protocolo personalizado y a través del patrón de Delegado, desarollaremos los métodos de dicho Protocolo desde la clase ViewController.swift.

Para esto, comienza abriendo el fichero CustomSearchController.swift y añade al final del método configureSearchBar() la siguiente linea:

Haciendo esto, especificamos que el delegado de nuestra SearchBar personalizada será CustomSearchController.

En el momento de añadir esta linea, Xcode te mostrará un error:

 

SearchBar personalizada error searchbar delegate

 

Para solucionarlo, simplemente ajusta la clase CustomSearchController al protocolo UISearchBarDelegate, añadiéndolo a la cabecera de la clase:

Creando el Protocolo de Delegado

Nuestro siguiente paso será crear el Protocolo de Delegado con 4 funciones personalizadas.

Añade las siguientes lineas a la clase CustomSearchController.swift, justo después de la linea import UIKit:

A través de estos 4 métodos, controlaremos las diferentes acciones que el usuario puede realizar en la SearchBar.

  • Si el usuario pulsa en la searchBar se ejecutará el primer método.
  • Si pulsa en el botón Buscar del teclado se ejecutará el segundo método.
  • Si toca el botón Cancelar se ejecutará el tercer método.
  • En cuanto se produzca cualquier cambio en el texto de búsqueda, se ejecutará el cuarto método.

En la parte superior de la clase CustomSearchController, justo encima de la propiedad CustomSearchBar tendrás que añadir la siguiente propiedad de delegado:

Nuestro siguiente paso será añadir las 4 funciones del protocolo UISearchBarDelegate que necesitaremos para que la SearchBar personalizada funcione correctamente.

Cada vez que se ejecute una de estas funciones, llamaremos a la función correspondiente de nuestro protocolo CustomSearchControllerDelegate.

Por tanto, justo después del método configureSearchBar() de la clase CustomSearchController.swift, comienza a añadir cada una de las siguientes funciones de UISearchBarDelegate:

Función que se llamará cuando el usuario pulse en la SearchBar:

Función que se llamará cuando el usuario pulse en el botón Buscar del teclado:

Función que se llamará cuando el usuario pulse en el botón Cancelar del teclado:

Función que se llamará cada vez que se modifique el texto de búsqueda:

Todas estas funciones informarán al ViewController, de cualquier acción del usuario en el SearchBar

Las Funciones del Protocolo de Delegado

Cuando se produzca alguna de estas acciones y se ejecute alguno de los 4 métodos anteriores, llamaremos a cada uno de los métodos de nuestro CustomSearchControllerDelegate.

Estos métodos se ejecutarán en ViewController.swift, por lo que nuestro siguiente paso será implementarlos.

Pero antes, tendremos que especificar que ViewController.swift es el delegado de nuestro CustomSearchController.

Abre ViewController.swift y añade la siguiente linea justo al final del método configureCustomSearchController():

Al momento, Xcode te mostrará el siguiente error:

 

SearchBar personalizada another xcode error

 

Para solucionarlo, ajusta la clase al protocolo CustomSearchControllerDelegate, añadiéndolo a su cabecera:

Al añadir el protocolo, Xcode nos avisará que no hemos implementado los métodos de este protocolo, con otro error:

 

SearchBar personalizada protocol error

 

Para solucionarlo implementaremos los métodos a continuación.

Pero antes, crearemos una nueva variable de tipo booleano en la clase ViewController.swift, que actuará como flag y nos permitirá controlar si tenemos que mostrar los resultados de la búsqueda o el listado completo de ejercicios. Añade la variable shouldShowSearchResults justo después de nuestro array filteredArray:

Ahora si. Al final de nuestra clase ViewController.swift implementaremos las funciones del protocolo CustomSearchControllerDelegate:

Comienza la búsqueda en el SearchBar:

Se pulsa el botón Buscar:

Se pulsa el botón Cancelar:

Se modifica el texto de búsqueda:

Probando nuestra Aplicación

Una vez que hemos implementado estos métodos, es momento de probar la aplicación.

Compila y ejecuta el proyecto y verás como se muestra la interfaz que hemos diseñado.

Lo siguiente que tienes que hacer es pulsar sobre la SearchBar personalizada y escribir algún texto de búsqueda. Como ves, hay un problema con la aplicación, ya que en la TableView no se muestran los ejercicios que coincidan con la búsqueda, sino que se muestran todos:

 

SearchBar personalizada not working

 

El problema es que los métodos propios de TableView:

  • numberOfRowsInSection()
  • cellForRowAt()

siempre devuelven el listado completo de ejercicios, cuando en realidad, si el usuario está realizando una búsqueda con el SearchBar, deberían devolver los datos almacenados en filteredArray.

Por tanto, vamos a modificar estos 2 métodos para que devuelvan los datos correctamente.

5. Modificando los métodos propios de TableView

Accede a la clase ViewController.swift y sustituye estos dos métodos por el siguiente código:

Método numberOfRowsInSection()

Método cellForRowAt()

Como puedes ver, lo único que hacemos en estos métodos es utilizar el flag shouldShowSearchResults para comprobar si debemos devolver los datos que coincidan con la búsqueda del usuario o si por el contrario tenemos que devolver el listado completo de ejercicios.

Con estas pequeñas modificaciones, nuestra aplicación devolverá los datos correctos en todo momento.

Ahora, puedes probar a ejecutar la app desde Xcode y realizar una búsqueda de prueba, por ejemplo, tecleando “Push” y verás que funciona perfectamente.

 

SearchBar personalizada working

6. Explicación Completa

Este Tutorial engloba algunos conceptos como Protocolos y Delegados que son básicos en el Desarrollo iOS.

Por este motivo me gustaría hacer una explicación final del funcionamiento de la Aplicación.

Si has comprendido al 100% el tutorial, no es necesario que repases este apartado.

Si por el contrario, te has quedado con alguna duda respecto al orden de ejecución de los métodos de nuestras clases, voy a intentar solucionar eso con esta pequeña explicación final.

Ciclo de Vida de nuestra Aplicación

El comienzo de la ejecución de nuestra app, al igual que la mayoría, se produce en el método viewDidLoad(). Concretamente en el método viewDidLoad() de la clase ViewController.swift.

En ese método, entre otras cosas, llamamos a configureCustomSearchController(), que es quien configura nuestro SearchController personalizado y nuestra SearchBar personalizada.

Para realizar esta configuración, este método llama al inicializador de nuestra clase CustomSearchController.swift, que a su vez llama al método configureSearchBar(), donde si te das cuenta, en la última linea, especificamos que CustomSearchController será el delegado de CustomSearchBar.

Además de eso, en la última linea del método configureCustomSearchController() especificamos que nuestro ViewController será el delegado nuestro CustomSearchController. Esta linea de código es fundamental.

Por tanto hemos establecido las siguientes relaciones de Delegados:

  • CustomSearchController es delegado de CustomSearchBar
  • ViewController es delegado de CustomSearchController

A partir de aquí, nuestra aplicación ejecuta otros métodos, que no voy a comentar para no alargar la explicación y al terminar, queda en estado de espera.

Ha finalizado la ejecución de nuestro código y ahora es el usuario quien debe actuar.

Cuando el usuario pulse en nuestra SearchBar personalizada para realizar una búsqueda, como CustomSearchController es el delegado de CustomSearchBar, automáticamente se ejecutará el método searchBarTextDidBeginEditing() de CustomSearchController.swift. Este método llamará a su vez al método didTapOnSearchButton() de su Delegado.

Como su delegado es nuestro ViewController, se ejecutará el método didTapOnSearchButton() de esta clase.

A partir de aquí, cualquier acción del usuario, como pulsar en el botón Buscar, pulsar en el botón Cancelar o modificar el texto de la búsqueda ejecutará de forma automática el método correspondiente de CustomSearchController.swift, que a su vez llamará a otro método en ViewController.swift.

Así es como funcionan los Protocolos de Delegado, nos permite comunicar diferentes clases de nuestra aplicación y delegar funciones de unas a otras.

7. Resumen Final

Aquí tienes la revisión de los puntos importantes que hemos ido viendo en este Tutorial:

  • Creación de una SearchBar personalizada mediante código
  • Desarrollo de un Protocolo de Delegado
  • Implementación de métodos de nuestro Protocolo personalizado
  • Comunicación entre clases a través del patrón de Delegado
  • Filtrado de datos a través de la función asociada al SearchBar

Además, si quieres echar un vistazo al código completo, puedes descargar el proyecto terminado desde aquí .

8. 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 = “Asiento con Trampa…” num=”1″]

[/ejercicio]

9. ¿Donde ir ahora?

Cada lunes publico un nuevo tutorial sobre Desarrollo iOS, así que dentro de justo 7 días podrás disfrutar de contenido nuevo.

Además puedes acceder a la sección de 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:
,
1Comentario
  • Pep
    Publicado a las 09:10h, 11 septiembre Responder

    Muchas gracias por los tutoriales, son estupendos!
    Tengo una duda: en la linea 13 des ViewController hay un @IBOutlet de los resultados de la búsqueda que no está enlazado con ningún elemento de la Storyboard. ¿Puedes explicarnos un poco más sobre este detalle?
    Un saludo

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.