iSpazio Developer Program #10 – Come creare una tabella (Parte III)

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.

Prima di iniziare con il tutorial vero e proprio vorrei sapere la vostra opinione: vi è piaciuta questa nuova forma, ovvero trattare un argomento in più parti con maggiori dettagli? Oppure lo ritenete troppo dispersivo? Esprimete le vostre opinioni nei commenti!

TUTORIAL:

1. Inseriamo la barra di ricerca
2. Dichiariamo e colleghiamo i componenti necessari
3. Modifichiamo i metodi già esistenti
4. Implementiamo la ricerca

1. Inseriamo la barra di ricerca

Il primo step da effettuare è quello di inserire la barra per la ricerca. Facciamo doppio clic sul file “MainWindow.xib” e si aprirà Interface Builder. Nella nostra applicazione inseriamo un componente “Search Bar”, in modo da avere un layout 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 direttamenente nella Navigation Bar principale.

Dopo aver fatto ciò, dobbiamo inserire un collegamento molto importante. Senza selezionare nessun elemento della nostra applicazione entriamo in “Connections Inspector” e dovreste avere un pannello come questo:

Ora colleghiamo l’outlet “delegate” (che troviamo nell’ultima sezione in basso) alla barra di ricerca che abbiamo appena inserito. Se abbiamo eseguito tutto correttamente avremo il seguente risultato:

Salviamo tutto e chiudiamo l’IB, tornando così ad XCode.

2. Dichiariamo e colleghiamo i componenti necessari

Ora, come al solito, dobbiamo dichiarare in XCode il componente che abbiamo appena inserito (che poi dovremo anche collegare), e un array. Apriamo il file “MainView.h” e inseriamo il seguente codice:

Come potete notare anche dai commenti presenti nel codice, abbiamo dichiarato un componente di tipo UISearchBar, che andremo a collegare con la barra di ricerca, e una lista, che ci servirà nell’algoritmo di ricerca.

Ora apriamo il file “MainView.m” e andiamo nella riga dove è presente l’istruzione “@synthesize”, aggiungendo gli elementi appena dichiarati, ottenedo un’istruzione così composta:

Ora, salviamo entrambe i file e apriamo nuovamente il file “MainWindow.xib”. Dobbiamo collegare il componente che abbiamo dichiarato in XCode con quello che abbiamo inserito in Interface Builder. Entriamo sempre in “Connections Inspector” e colleghiamo “searchBar” alla barra presente nell’applicazione. Se abbiamo eseguito tutto correttamente avremo un pannello come questo:

Nota: se non visualizzate il componente “searchBar” è perchè non avete salvato il file in maniera corretta. Per essere più sicuri potete anche cliccare su “Build and Go!” prima di aprire Interface Builder, ovviamente ignorando eventuali errori.

Salviamo e chiudiamo nuovamente l’Interface Builder, per tornare ad XCode.

3. Modifichiamo i metodi già esistenti

È venuto il momento di inserire il codice vero e proprio. Faccio una piccola premessa: vi presenterò, come al solito, il vario codice da inserire, ma mi limiterò a spiegarlo solo dove strettamente necessario. Tutte le parti, comunque, saranno provviste di commenti, che spesso bastano a descrivere la funzione di alcune istruzioni.

Apriamo il file “MainView.m” e modifichiamo il metodo “awakeFromNib” nel seguente modo:

In questo metodo abbiamo inizializzato il nuovo array che avevamo dichiarato in precedenza, che, come già detto in precedenza, ci servirà nell’algoritmo di ricerca.

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 è 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. Ecco come deve essere modificato:

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

Abbiamo così eseguito tutte le modifiche necessarie! Ma cosa manca? La parte più importante, ovvero la ricerca vera e propria!

4. Implementiamo la ricerca

È arrivato il momento di inserire il codice che implementa la ricerca nella nostra applicazione. Prima di mostrarvi i passaggi necessari, devo premettere che il codice non è stato scritto da me, ma l’ho preso da un esempio realizzato da 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 tabella con ricerca.

Iniziamo con due metodi “accessori”, ovvero non legati direttamente all’algoritmo di ricerca. Ecco i due metodi da inserire nel file “MainView.m”:

Il codice è ben commentato, quindi non dovreste aver problemi a capire cosa viene eseguito. Altri due metodi non legati alla ricerca ma necessari sono i seguenti:

Anche in questo caso i commenti spiegano quasi tutte le istruzioni presenti. Ho aggiunto diverse istruzioni riguardanti il “buttonEdit”, in modo che non venga ablitato quando c’è una ricerca in corso. Si potrebbe attivare questa opzione, ma per semplicità ho preferito lasciarla disattivata, in modo da non creare errori inattesi.

Quello che manca ora è l’algoritmo di ricerca vero e proprio, che è il seguente:

Per quasto 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!

Con questa terza parte si conclude la mini-serie di tutorial dedicati alle UITableView. Speriamo di avervi fornito elementi sufficienti per sfruttare in maniera completa questi potenti elementi messi a disposizione da Apple.

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.