fbpx
 

Crea una SearchBar personalizada [Parte 1]

Crea una SearchBar personalizada [Parte 1]

1. Introducción

Si has seguido los últimos tutoriales de EfectoApple, habrás visto que en las semanas anteriores hemos desarrollado una aplicación orientada al deporte. Esta aplicación constaba de una UITableView con celdas personalizadas, a la que añadimos una SearchBar para poder realizar búsquedas en el listado de ejercicios.

Esta es la aplicación que hemos desarrollado en los dos últimos tutoriales:

UISearchBar app finished

 

En el último tutorial añadimos la SearchBar que ves en la parte superior de la interfaz.

Se trata de una SearchBar estándar que cumple su función, sin embargo, su diseño por defecto, no encaja como debería en nuestra aplicación.

Esto es algo que sucede muchas veces cuando desarrollas un proyecto. Utilizas los componentes que ofrece Apple para crear tu aplicación, pero en ocasiones te gustaría poder modificar el aspecto de esos componentes, para que encajen mejor en el diseño de tu app.

En esto consistirá el tutorial de esta semana.

Vamos a modificar totalmente el aspecto de nuestra SearchBar. Cambiaremos su diseño y lo adaptaremos exactamente a lo que buscamos para nuestra aplicación.

Puede parecer algo trivial para un tutorial completo, sin embargo, nos permitirá trabajar con dos de los conceptos más importantes en Desarrollo iOS: Protocolos y Delegados.

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

Como hemos comentado antes, continuaremos desarrollando nuestra aplicación deportiva.

Si no has echado un vistazo a los dos Tutoriales en los que la hemos ido desarrollando, ahora sería un buen momento para revisarlos:

Utilizando Celdas Personalizadas en una TableView

Añadiendo una UISearchBar a tu Aplicación

Incluso si nunca antes has trabajado con TableViews en iOS, sería interesante que revisaras nuestro Tutorial de Introducción a UITableView.

Estos serán algunos de los puntos más interesantes que veremos en el Tutorial de esta semana:

  1. Crearemos un CustomSearchBar
  2. Veremos como modificar todas las propiedades de este SearchBar
  3. Crearemos un CustomSearchController
  4. Modificaremos las propiedades de dicho CustomSearchController
  5. Crearemos un Protocolo personalizado con funciones de Delegado
  6. Veremos como comunicar nuestro SearchBar y el ViewController principal a través de las funciones de Delegado
  7. Utilizaremos la función filter para filtrar las búsquedas del usuario

Si crees que alguno de estos apartados puede ser interesante para ti, sigue leyendo.

3. La Aplicación que vamos a crear

Al terminar este tutorial, nuestra app deportiva con SearchBar personalizada tendrá el siguiente aspecto:

iphone7spacegrey_portrait-2-2

Como puedes ver en la imagen, hemos personalizado totalmente nuestra SearchBar y ahora su diseño encaja perfectamente con la interfaz de nuestra aplicación.

Antes de comenzar con el desarrollo, vamos a ver un pequeñísimo apartado de teoría.

4. Anatomía de una SearchBar

Una SearchBar no es un control independiente sino que engloba dentro de ella, varios elementos. La subvista principal contenida dentro de una SearchBar es una UIView, que a su vez tiene dos subvistas más:

  • Un Search Field (Que se trata de una subclase de UITextField)
  • Una UIView que actúa como vista de fondo de este Search Field

Por tanto, cuando queramos customizar una SearchBar, tenemos que tener en cuenta los elementos que la forman.

Ahora si, pasamos a la parte práctica.

5. Nuestro Proyecto de Inicio

Para el desarrollo de este Tutorial, he creado un Proyecto de Inicio, que te permitirá centrarte en las partes importantes de la aplicación.

Descárgalo desde aquí, descomprime el .zip y ábrelo con Xcode.

Vamos a echarle un vistazo antes de comenzar con el desarrollo.

Abre el fichero Main.storyboard y verás que cuenta con una única pantalla, formada por una TableView creada a partir de una celda personalizada.

 

SearchBar main.storyboard

 

Esta celda personalizada se gestiona desde la clase ExerciseTableViewCell.swift, que dispone de una imageCell y una labelCell para mostrar la imagen y el texto de dicha celda.

Por último, si abres la clase principal de la aplicación, el fichero ViewController.swift, verás que dispones del modelo de nuestra aplicación:

Simplemente es un array que muestra el listado de ejercicios.

Además, tenemos otro array que almacena los datos que coincidan con las búsquedas del usuario a través del SearchBar:

Y por último en esta clase tenemos los métodos típicos de gestión de una TableView que nos permitirán mostrar la información en nuestra aplicación:

  • numberOfSections()
  • numberOfRowsInSection()
  • heightForRowAt()
  • cellForRowAt()

Esto es todo en nuestro Proyecto de Inicio.

Si ejecutas la aplicación, verás como muestra perfectamente el listado de ejercicios en la TableView, pero como puedes observar no hay ni rastro de nuestra SearchBar.

En los siguientes apartados seguiremos los pasos necesarios para añadir una SearchBar personalizada a nuestra aplicación.

6. Nuestra Hoja de Ruta

Los pasos que vamos a dar para llevar a cabo el tutorial, son los siguientes:

  1. Crear la SearchBar personalizada
  2. Crear el SearchController personalizado
  3. Añadir el Protocolo que hará que nuestra SearchBar funcione
  4. Modificar ViewController.swift para integrar correctamente la SearchBar

Con nuestro Proyecto de Inicio tenemos todo lo necesario para empezar y sabemos los pasos que tenemos que dar, así que como decían en Humor Amarillo…

 

 

¡Al turrón!

7. Creando nuestra SearchBar personalizada

Desarrollar una SearchBar personalizada no es algo complicado, simplemente tienes que trabajar con subclases tanto de UISearchBar como de UISearchController

Por tanto, comenzamos creando un nuevo archivo en Xcode.

Para ello, desde Xcode accede al menú File>New>File…, elige el tipo de fichero Cocoa Touch Class.

En el siguiente paso, a la clase que estamos creando le daremos el nombre de CustomSearchBar y haremos que herede de UISearchBar:

 

SearchBar new class

 

Pulsa en Next, guarda la clase con el resto de ficheros y haz click en Create.

Creando nuestros Inicializadores

Ahora abre el fichero que acabamos de crear, CustoSearchBar.swift y lo primero que vamos a añadir es un Inicializador Personalizado.

Este inicializador nos permitirá especificar el frame, fuente y color del texto del SearchBar y del Search Field.

Como siempre, antes de crear un inicializador personalizado, tendremos que crear las propiedades que vayamos a utilizar. Añade estas dos variables justo al comienzo de tu clase CustomSearchBar.swift:

A continuación, añade nuestro inicializador personalizado:

Como ves, hemos establecido el parámetro frame como frame del SearchBar y hemos almacenado font y textColor en sus respectivas variables.

Además, hemos cambiado el estilo que trae por defecto la SearchBar, eligiendo el estilo Prominent. Este estilo, especifica un fondo translúcido y un Search Field opaco. Sin embargo, nosotros buscamos que tanto el SearchBar como el Search Field sean opacos, por lo que tenemos que añadir una nueva linea al final, para que nuestra SearchBar no sea translúcida.

Con esto, habríamos terminado nuestro inicializador personalizado.

Al añadirlo a nuestra clase CustomSearchBar.swift, nos encontramos con que Xcode nos muestra un error:

 

SearchBar Xcode Error Initializer

 

Esto se debe a que si creas un inicializador personalizado, Xcode te obliga a implementar también a su inicializador designado.

Por tanto, tendremos que añadirlo a nuestra clase, a continuación del nuestro:

Desarrollando una Función Auxiliar

Si recuerdas, la explicación teórica que vimos en el punto 4, recordarás que una SearchBar está formada por varios elementos.

Para realizar las modificaciones que queremos hacer, necesitamos acceder al Search Field de la SearchBar. Para esto, lo mejor es crearnos una función que recorra todas las subviews del SearchBar y nos devuelva el índice del Search Field.

De esta forma podremos acceder facilmente al Search Field.

Por tanto, añadimos la función indexOfSearchFieldInSubviews() al final de nuestra clase:

La explicación de este método ya la hemos comentado antes.

El Método Draw()

Gracias al método anterior, recuperaremos el Search Field de nuestro SearchBar y a través del método draw() lo personalizaremos tal y como queremos:

  • Modificaremos su frame y lo haremos algo más pequeño que el que viene por defecto
  • Cambiaremos su fuente
  • Utilizaremos otro color para el texto
  • También cambiaremos su color de fondo
  • Añadiremos una linea de color blanco a la parte inferior de la SearchBar

Todos estos cambios que queremos realizar, los puedes ver reflejados en el siguiente método:

Ahora, nuestra SearchBar personalizada está terminada. No podemos comprobar que funciona hasta que no creemos nuestro Search Controller personalizado.

Pero no te preocupes porque esto lo vamos a ver en el siguiente apartado.

8. Desarrollando nuestro Search Controller personalizado

Nuestro siguiente paso será crear el search controller personalizado.

Al igual que cuando creamos nuestra SearchBar, crearemos un nuevo archivo en Xcode.

Accede al menú File>New>File…, elige el tipo de fichero Cocoa Touch Class.

En el siguiente paso, a la clase que estamos creando le daremos el nombre de CustomSearchController y haremos que herede de UISearchController:

 

SearchBar new customSearchController

 

Pulsa en Next, guarda la clase con el resto de ficheros y haz click en Create.

Una vez que lo hemos creado, ábrelo y en la parte superior de la clase, añade la siguiente propiedad:

Ahora crearemos un inicializador personalizado, que constará de 5 parámetros:

  • El ViewController que gestionará los resultados de la búsqueda
  • El frame del SearchBar
  • La fuente del Search Field
  • El color del texto del Search Field
  • El color de tintado de la SearchBar

Tu inicializador personalizado deberá tener el siguiente aspecto:

Dese este inicializador llamamos a la función configureSearchBar() que todavía no hemos implementado, por lo que es totalmente normal que Xcode ahora mismo te de un error justo en esa linea. Esta función, como su nombre indica, se encargará de configurar nuestra SearchBar personalizada.

Antes de ir con ella, debemos añadir dos inicializadores obligatorios:

El Método configureSearchBar()

Y ahora sí, implementamos el método configureSearchBar():

Como puedes ver, en la primera linea utilizamos el inicializador personalizado que creamos en la clase CustomSearchBar.swift. En el resto de código, lo que hacemos es especificar el tintColor tanto de la SearchBar como de sus elementos, además elegimos no mostrar el botón de marcadores y mostrar el botón de cancelar la búsqueda.

Con esto, a excepción de los métodos de delegado, habríamos terminado nuestra clase CustomSearchController.swift.

9. ¿Qué nos falta para terminar el Tutorial?

Después de crear nuestro CustomSearchBar y nuestro CustomSearchController, los siguientes pasos serían:

  • Realizar algunas modificaciones en ViewController para mostrar nuestra SearchBar en pantalla
  • Crear nuestro protocolo de delegado
  • Implementar los métodos de dicho protocolo
  • Modificar los métodos propios del TableView para hacer que funcione nuestra SearchBar

La parte del Protocolo de Delegado es muy importante, ya que se trata de uno de los conceptos fundamentales en Desarrollo iOS.

Todo esto lo veremos en la segunda parte de nuestro Tutorial. Puedes acceder a la segunda parte a través del Apartado 11.

10. 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 = “¿¿¡¡Friends!!??” num=”1″]

[/ejercicio]

11. ¿Donde ir ahora?

Si te interesa terminar esta aplicación, aquí tienes el acceso a la segunda parte del tutorial.

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:
,
Sin comentarios

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.