Siamo giunti al terzo e ultimo appuntamento riguardante le UITableView, ovvero le tabelle presenti nell’SDK per iPhone. Negli scorsi tutorial abbiamo visto come dichiarare e crare una tabella (Parte I) e come aggiungere delle funzionalità (Parte II). In questa ultima parte vedremo, invece, come aggiungere una funzionalità molto importante: la ricerca.

1. Inseriamo la barra di ricerca

Prima di lavorare con Interface Builder, apriamo il file “RootViewController.h” e dichiariamo il seguente elemento:

Salviamo il file e facciamo doppio clic su “RootViewController.xib” per aprire IB, in cui inseriremo l’elemento grafico necessario: una “UISearchBar”, ottenendo un risultato come questo:

Ovviamente questa è la soluzione più semplice, volendo potreste inserire un bottone che, quando premuto, fa apparire la barra, oppure integrare il box di ricerca direttamente nella UINavigationBar principale.
Ora dobbiamo definire questo elemento e le sue proprietà. Dal pannello dei documenti selezioniamo il “File’s Owner”  e apriamo “Connections Inspector”. Nella sezione “Outlets” colleghiamo l’elemento “barraRicerca” con la UISearchBar che abbiamo appena inserito. Se avrete eseguito tutto correttamente avrete un risultato come questo:

Dobbiamo, infine, eseguire un ultimo collegamento. Clicchiamo sulla barra di ricerca e apriamo poi il “Connections Inspector”. Colleghiamo l’elemento “delegate” con il “File’s Owner”. Ecco come deve apparire il pannelo dopo tale collegamento:

Salviamo tutto e chiudiamo Interface Builder.

2. Modifichiamo i metodi già esistenti

Prima di implementare la ricerca vera e propria, dobbiamo fare delle piccole modifiche ai metodi già presenti nel nostro progetto.
Iniziamo aprendo il file “RootViewController.h” e completiamo così la definizione della classe:

Alla riga 5 c’è la definizione della barra di ricerca che abbiamo inserito all’inizio di questo terzo tutorial. Alla riga 3, invece, abbiamo dichiarato una nuova lista, che conterrà gli elementi “filtrati”, ovvero quelli che corrispondono al criterio di ricerca.

Ora dobbiamo modificare i metodi che si occupano dell’inizializzazione della tabella. Iniziamo dal metodo “viewDidLoad” e dalla funzione @synthetize:

Nel codice appena inserito abbiamo inizializzato il nuovo array, che ci servirà nell’algoritmo di ricerca. Inizialmente questa lista coinciderà con quella degli elementi iniziali, mentre poi verrà modificata mentre l’utente inserisce la stringa di ricerca.
Nelle ultime istruzioni, invece,  abbiamo definito dei comportamenti per il nostro box di ricerca, come potete capire dai commenti.
Il secondo metodo da modificare è “numberOfRowsInSection”. Ecco il nuovo codice:

Questa modifica va eseguita in quanto la tabella ora non è più composta dagli elementi della lista originale, ma da quelli della lista filtrata, ovvero di quegli elementi selezionati mediante la ricerca. Ovviamente se l’utente non esegue nessuna ricerca, gli elementi della lista filtrata corrisponderanno agli elementi della lista originale.
Se vi è chiaro questo ragionamento, è facile intuire quali saranno i prossimi due metodi da modificare: il primo è “cellForRowAtIndexPath:”, ovvero il metodo che si occupa di inserire i valori nelle celle. Modificate l’ultima istruzione al suo interno nella seguente maniera:

Modifichiamo, poi, il metodo “commitEditingStyle” modificando la seguente istruzione:

L’ultimo metodo da modificare, infine, è “didSelectRowAtIndexPath:” e anche in questo caso l’unica modifica riguarda proprio la lista di riferimento.

Abbiamo così eseguito tutte le modifiche necessarie!

3. Implementiamo la ricerca

È arrivato il momento di implementare la ricerca vera e propria. Prima di mostrarvi i passaggi necessari, devo premettere che il codice non è stato scritto da me, ma l’ho preso da un esempio realizzato dalla stessa Apple. I commenti, quindi, saranno davvero pochi, anche perché non è fondamentale capire come funziona tale algoritmo, in quanto lo stesso codice si può utilizzare in qualsiasi altra applicazione che necessiti di una ricerca.
Iniziamo con due metodi “accessori”, ovvero non legati direttamente all’algoritmo di ricerca. Ecco i due metodi da inserire nel file “RootViewController.m”:

Il primo metodo viene richiamato quando l’utente inizia ad inserire la chiave di ricerca: mostriamo il bottone per annullare la ricerca e disattiviamo il bottone per modificare le celle (questo per non creare strani comportamenti). Il secondo metodo, invece, viene richiamato quando la ricerca è terminata.
Eccovi altri due metodi da aggiungere:

Il primo metodo viene richiamato alla pressione del tasto “Cancel” che appare quando l’utente inizia ad inserire la sua chiave di ricerca. Questo metodo dovrà ripristinare la tabella al suo stato originale, ovvero con gli elementi della lista di partenza, e settando in maniera corretta tutte le caratteristiche desiderate.
Discorso simile vale per il secondo metodo, che viene richiamato quando si preme “Done” sulla tastiera virtuale.
I commenti presenti nei due metodi dovrebbero rendere tutte le istruzioni comprensibili.
Quello che manca ora è l’algoritmo di ricerca vero e proprio, che è il seguente:

Per questo algoritmo non voglio spendere parole, in quanto, come detto in precedenza, è stato scritto da Apple, quindi non posso permettermi di fare modifiche!

Cliccate ora su “Build and Go!”, se avete eseguito tutto correttamente si aprirà la vostra applicazione!

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata creata da Andrea Busi per “iSpazio.net” e “Bubi Devs”. I meriti, quindi, sono del legittimo autore.

957 visite