Xcode: Ajouter une barre de recherche dans une TableView

vendredi 28 juin 2013

Dans mon cas, j’ai utilisé le composant UISearchDisplayController pour gérer l’affichage des résultats de recherche.
Il faut savoir qu’il a sa propre tableview qui passe au dessus de la tableview par défaut qui affiche toute votre liste.
cette table view est accessible depuis:

searchDisplayController.searchResultsTableView

POur sa mise en place:
dans le .h

@interface UCHShopsTableViewController : UITableViewController <UISearchBarDelegate,UISearchDisplayDelegate>{
    UISearchBar *searchBar;
    UISearchDisplayController *searchDisplayController;
    BOOL searching;
}
@property (nonatomic,retain) NSArray *shops;
@property (nonatomic,retain) NSMutableArray *searchData;

On aura besoin des fonctions de délégation pour l’affichage de la barre de recherche et la gestion de la barre de recherche.

La variable bool searching permettra de gérer le cas si on est en mode recherche ou non. Très importante car on devra dans les fonctions par défaut d’affichage de la tableview allez chercher les résultats de recherche et non la liste complète (didSelectRowAtIndexPath et cellForRowAtIndexPath).

em>dans le .m maintenant

- (void)viewDidLoad
{
    [super viewDidLoad];
    // AJOUT DE LA BARRE DE RECHERCHE DANS LA TABLEVIEW
    searching = FALSE;
    searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    // ACCES AU FONCTION DELEGATE DE UISEARCHBAR
    searchBar.delegate =self;
    searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
    // ACCES AU FONCTION DELEGATE DE SEARCHDISPLAYCONTROLLER
    searchDisplayController.delegate = self;
    searchDisplayController.searchResultsDataSource = self;
     // ACCES AU FONCTION DELEGATE DE SEARCHRESULTS == TABLEVIEW SUPER EST APPELE TRES IMPORTANT
    searchDisplayController.searchResultsDelegate = self;
    self.tableView.tableHeaderView = searchBar; //this line add the searchBar
    searchData = [[NSMutableArray alloc] init];
}

Bien sûr si un design est appliqué à la table view, il faut aussi l’appliquer à la tableview de recherche!

Première fonction delegate importante:

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString

Fonction appelée chaque fois qu’un utilisateur tape dans le champs recherche. On y trouvera le traitement des valeurs à afficher suivant la recherche tapée (searchString).
On y spécifiera aussi qu’on est en mode recherche (bool searching).
Attention: pour ma part j’ai eu un soucis en mettant le code suivant dans cette fonction:

[self.tableView reloadData]

Pour le code qui design la tableview de recherche, on peut placer le code dans la fonction suivante:

- (void)searchDisplayController:(UISearchDisplayController *)controller didShowSearchResultsTableView:(UITableView *)tableView {
    // DESIGN TABLEVIEW DU SEARCHBAR
    [tableView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"background_detail.png"]]];
    [tableView  setSeparatorStyle:UITableViewCellSeparatorStyleNone];
    tableView.rowHeight = 50;
}

La fonction suivante permet de gérer le cas où l’utilisateur clique sur le bouton annuler:

- (void)searchBarCancelButtonClicked:(UISearchBar *)aSearchBar
{
    [aSearchBar resignFirstResponder];
    searching = FALSE;
    [self.tableView reloadData];
    // RESOUD LE PROBLEME DE SCROLL APRES CLIQUER SUR LE BOUTON ANNULER
    [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:1] atScrollPosition:UITableViewScrollPositionTop animated:YES];
}
Voici des articles ou je me suis inspirés: http://iosmadesimple.blogspot.be/2012/12/table-search-display-tutorial.html
http://www.appcoda.com/how-to-add-search-bar-uitableview/
http://www.raywenderlich.com/16873/how-to-add-search-into-a-table-view

Tags: UISearchBa , UISearchDisplayController , UITableView