UISearchBar & UITableView: Añadir una barra de búsqueda a una tabla.

Cuando una tabla tiene mucha información, hacer scroll por la ella buscando un elemento determinado puede llegar a ser frustante para el usuario. Una buena solución para mejorar esta situación es añadir un UISearchBar, que se integra con el UITableView y permite aplicar filtros y realizar búsquedas.

Vamos a ver un ejemplo sencillo de como crear una barra para hacer búsquedas y aplicar filtros sobre la información que muestra la tabla.

Crearemos un nuevo proyecto y en el storyboard añadiremos un table view controller embebido en un navigation controller. Colocaremos otro view controller y cablearemos desde la celda prototipo de la tabla hacia él para crear el segue, que será, por ejemplo, de tipo push. Hecho esto, tendremos que tener algo así:

Este último view controller será donde se muestra el detalle de lo seleccionado en la tabla. 

En esta UITableView vamos a mostrar deportes, así que vamos a definir la clase Sport, que será una subclase de NSObject y tendrá dos propiedades una con el nombre del deporte y otra con el tipo (motor, de pelota, acuático, etc.). Además definiremos un Class Method para crear deportes:

Sport.h: el interface por tanto quedará así:

#import <Foundation/Foundation.h>

@interface Sport : NSObject
@property (nonatomic, strong) NSString *type;
@property (nonatomic, strong) NSString *name;

+ (Sport *)newSport:(NSString *)name ofType:(NSString *)type;
@end

Sport.m: y su implementación será esta:

#import "Sport.h"

@implementation Sport
@synthesize name = _name;
@synthesize type = _type;

+ (Sport *)newSport:(NSString *)name ofType:(NSString *)type
{
    Sport *sport = [[self alloc] init];
    sport.name = name;
    sport.type = type;

    

    return sport;
}
@end

A continuación, vamos a añadir una subclase de UITableViewController que llamarermos SportTableViewController.

Esta nueva clase, será la Custom Class de nuestro Table View Controller, por tanto, en el storyboard seleccionaremos el UITableViewController creado inicialmente y en el Identity Inspector la elegiremos:

También vamos a asignar a la celda prototipo el identifier SportCell.

Y a dar un título a la tabla:

En SportTableViewController.h vamos a añadir la propiedad sports, que va a ser un NSArray. En este array meteremos posteriormente los deportes, va a ser el DataSource de la tabla:

#import <UIKit/UIKit.h>

@interface SportTableViewController : UITableViewController
@property (strong, nonatomic) NSArray *sports;
@end

Escribiremos su synthesize en SportTableViewController.m justo debajo de implementation y definiremos su get. También importaremos la clase Sport. Por ahora tendremos algo así:

#import "SportTableViewController.h"
#import "Sport.h"

@interface SportTableViewController ()
@end

@implementation SportTableViewController
@synthesize sports = _sports;



- (NSArray *)sports
{
    if (_sports == nil) {
        _sports = [NSArray arrayWithObjects:
                   [Sport newSport:@"Surf" ofType:@"Acuático"],
                   [Sport newSport:@"Fútbol" ofType:@"Pelota"],
                   [Sport newSport:@"Tenis" ofType:@"Pelota"],
                   [Sport newSport:@"Fórmula 1" ofType:@"Motor"],
                   [Sport newSport:@"kitesurf" ofType:@"Acuático"],
                   [Sport newSport:@"Motocicilismo" ofType:@"Motor"],
                   nil];
    }
    return _sports;
}

En una aplicación real, tendrías vuestros NSArray, NSDictinonary o lo que fuese para cargar en el UITableView, pero para simplificar el ejemplo hemos añadido algunos deportes en nuestro NSArray. 

Todos los métodos que están comentados y el numberOfSectionsInTableView: los podemos borrar ya que no los vamos a a utilizar.

El que si vamos a utilizar es tableView: numberOfRowsInSection:  que, por ahora, implementaremos así:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.sports count];
}

Con esto estamos indicando que la tabla va a tener tantas filas como elementos tiene nuestro NSArray de deportes.

En el método tableView:cellForRowAtIndexPath: configuramos la celda:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"SportCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if ( cell == nil ) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    

    Sport *sport = [self.sports objectAtIndex:indexPath.row];
    cell.textLabel.text = sport.name;

    

    return cell;
}

Es el momento de ejecutar el proyecto para ver que todo va bien. Deberéis conseguir esto:

Todo lo hecho hasta ahora ha sido para crear una tabla con datos de ejemplo. A continuación veremos como añadir la barra de búsqueda.

En el Storyboard, seleccionaremos y arrastraremos  un Search Bar and Search Display Controller a nuestro Table View Controller.

El Search Bar nos proporciona un text field en el que introducir el texto a buscar, un botón de búsqueda y otro de cancel y, el search display controller, proporciona  una barra de búsqueda y una tabla que muestra el resultado de la búsqueda de datos manejados por la otra tabla.

Debemos indicar que nuestro UITableViewController va a implementar dos delegates, el de Search Bar y el de Search Display. Luego modificaremos nuestro SportTableViewController, que ahora será asÍ: 

#import <UIKit/UIKit.h>

@interface SportTableViewController : UITableViewController <UISearchBarDelegate, UISearchDisplayDelegate>
@property (strong, nonatomic) NSArray *sports;
@end

También crearemos dos nuevas propiedades para SportTableViewController; una será un array mutable que contendrá los deportes resultantes de aplicar el filtro de búsqueda y la otra será un IBOutlet de la barra de búsqueda. Este segundo lo vamos a añadir cableando desde el storyboard:

Estas dos últimas propiedades las he creado locales, el SportTableViewController.m:

@interface SportTableViewController ()
@property (weak, nonatomic) IBOutlet UISearchBar *searchBar;
@property (strong, nonatomic) NSMutableArray *filteredSports;
@end

@implementation SportTableViewController
@synthesize sports = _sports;
@synthesize searchBar = _searchBar;
@synthesize filteredSports = _filteredSports;

Ahora añadiremos el siguiente método para realizar el filtro.


#pragma mark Filter
-(void)filterContentForSearchText:(NSString*)searchText scope:(NSString*)scope {
    [self.filteredSports removeAllObjects];

    NSPredicate *predicate = [NSPredicate predicateWithFormat:@"SELF.name contains[c] %@",searchText];
    self.filteredSports = [NSMutableArray arrayWithArray:[self.sports filteredArrayUsingPredicate:predicate]];
}

Básicamente primero reinicia el array de deportes filtrados, por si tuviera cargado algo anteriormente, y luego utiliza NSPredicate para ver que deportes de los que existen en el NSArray de deportes coinciden con el texto introducido. 

Implementamos un método de UISearchDisplayControllerDelegate que será el encargado de llamar al filtro anterior cada vez que el usuario introduce un  nuevo carácter en la barra.


#pragma mark - UISearchDisplayController Delegate
-(BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString {
    [self filterContentForSearchText:searchString scope:
     [[self.searchDisplayController.searchBar scopeButtonTitles] objectAtIndex:[self.searchDisplayController.searchBar selectedScopeButtonIndex]]];

    return YES;
}

Dentro de tableView:cellForRowAtIndexPath: habrá que hacer un cambio para comprobar si estamos mostrando la tabla de deportes o la tabla con los resultados del filtro. Cambiaremos la linea


Sport *sport = [self.sports objectAtIndex:indexPath.row];


por


Sport *sport;

    

if (tableView == self.searchDisplayController.searchResultsTableView) {
        sport = [self.filteredSports objectAtIndex:indexPath.row];
} else {
        sport = [self.sports objectAtIndex:indexPath.row];
}


Lo mismo en tableView:numberOfRowsInSection:, habrá que comprobar que tabla se está mostrando:


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    NSInteger result;

    if (tableView == self.searchDisplayController.searchResultsTableView) {
        result = [self.filteredSports count];
    } else {
        result = [self.sports count];
    }

    

    return result;
}

Y con esto ya lo tendríamos:

Si queremos que, inicialmente, la barra de búsqueda esté oculta, podemos añadir este código en el viewDidLoad:

CGRect newBounds = self.tableView.bounds;
newBounds.origin.y = newBounds.origin.y + self.searchBar.bounds.size.height;
self.tableView.bounds = newBounds;

Solo nos quedaría mandar los datos al viewcontroller que va a contener el detalle. Bastaría con implementar el tableView:didSelectRowAtIndexPath

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { 
 // Perform segue to sport detail 
 [self performSegueWithIdentifier:@"sportDetailSegue" sender:tableView]; }

Y luego en prepareForSegue: pasar la información necesaria al ViewController del detalle, pero eso ya os lo dejo a vosotros.

@Fin