Eccoci con il secondo tutorial dedicato alle UITableView. Nella scorsa “puntata” abbiamo visto come creare una tabella, ed inserire dei dati. La nostra tabella, però, non permetteva nessuna interazione con l’utente. Oggi vedremo proprio come aggiungere delle funzioni indispensabili per un’applicazione che sfrutti le tabelle: vedremo come gestire la selezione di una cella, e implementeremo una barra da cui potremo eliminare le celle che non ci interessano più. Ma ora basta parole e buon tutorial!
TUTORIAL:
- Aggiungiamo la barra all’applicazione
- Modificare la tabella: l’evento edit
- Modificare la tabella: eliminare l’elemento dalla lista
- Implementiamo la selezione di una cella
1. Aggiungiamo la barra all’applicazione
Apriamo il nostro progetto creato con la prima parte di questo tutorial ed apriamo il file “MainWindow.xib”. Prendiamo un componente “Navigation Bar” e inseriamolo nella nostra applicazione (o in cima o alla fine, come preferite voi!). Inseriamo, anche, un “Bar Button Item”, che ci servirà per avviare la modifica della nostra tabella. Impostiamo i nomi che preferiamo, ed avremo un risultato come questo:
Salviamo, usciamo da Interface Builder e torniamo in XCode. Apriamo il file “MainView.h”, dovremo dichiarare il bottone presente nella barra che abbiamo appena inserito graficamente. Inseriamo, quindi, il seguente codice:
Abbiamo dichiarato un elemento UIBarButtonItem, che è il nostro bottone “Edit”, e un’azione “-(IBAction)edit”, che è l’azione collegata al bottone in questione (ovvero è il metodo che verrà richiamato quando si clicca sul bottone). Ora salviamo il file (“File” -> “Save”) e riapriamo il file “MainWindow.xib” (mi raccomando, non lasciatelo aperto in precedemza altrimenti non vedrete i nuovi componenti).
Dobbiamo collegare l’oggetto e l’azione. Andiamo in “Tools” -> “Connections Inspector”. Avremo un pannello come questo:
Per prima cosa colleghiamo “buttonEdit” al bottone che abbiamo inserito in precedenza (trascinando come al solito il pallino sull’oggetto grafico). Fatto ciò, spostiamoci un pochino in basso e facciamo lo stesso con l’azione “edit”, trascinandola anch’essa sul bottone. Se avete fatto tutto correttamente avrete un pannello come questo:
Salviamo tutto e torniamo al nostro XCode.
2. Modificare la tabella: l’evento edit
Ora che abbiamo impostato i componenti grafici, dobbiamo gestire la modifica della tabella. Iniziamo importando anche il nuovo componente “buttonEdit” tramite l’istruzione “@synthesize”, così:
Fatto questo, andiamo a fare subito un’altra piccola modifica. Se avete letto con attenzione lo scorso tutorial, vi ricorderete che nel metodo “cellForRowAtIndexPath:” c’era un’istruzione che determinava la selezione delle celle, e nel nostro caso impediva tale selezione. Eliminiamo tale riga, avremo quindi il metodo così composto:
Se provate ad eseguire l’applicazione vedrete che ora sarà possibile selezionare una riga qualsiasi.
Occupiamoci ora della modifica vera e propria. In precedenza abbiamo scritto l’intestazione per il metodo edit, è giunto il momento di scrivere tale metodo. Ecco il codice da inserire:
Analizziamo bene questo codice, che non è difficile. Abbiamo una selezione if – else, che controlla la proprietà “editing” di “myTable”: in pratica, se la tabella non è modalità di modifica (ovvero editing vale FALSE) attiviamo tale modalità, semplicemente eseguendo l’istruzione “[myTable setEditing:TRUE animated:TRUE];”. Lo stesso facciamo nell’else, ovvero se tale modalità è già attiva.
Possiamo notare, inoltre, che variamo il titolo del bottone: questa è una piccola chicca, infatti quando la viene attivata la modalità di modifica cambiamo il testo del bottone in “Fine”, in maniera da rendere più intuitiva l’applicazione!
Salviamo e clicchiamo su “Build and Go!”, la nostra applicazione sarà già funzionante. Se, però, provate ad eliminare un elemento ottenete uno strano effetto:
Perchè? Semplice, l’elemento non viene rimosso dalla lista, e quindi continua a comparire nella nostra tabella! Vediamo come risolvere tale problema.
3. Modificare la tabella: eliminare l’elemento dalla lista
Restiamo sempre nel file “MainView.m” e inseriamo il seguente metodo:
Come possiamo notare dalla struttura complicata, questo è un metodo del protocollo UITableView, un po’ come quelli che abbiamo implementato nello scorso tutorial. Cerchiamo di analizzare il codice. Il costrutto if esegue un controllo che, come spiega il commento, controlla se l’azione eseguita sulla tabella è di cancellazione di una riga. Direte voi: “Cosa posso fare di altro?” Per ora niente, perchè la nostra tabella supporta solo l’eliminazione di una riga, ma volento si potrebbe implementare anche l’inserimento di una nuova riga, oppure altre azioni. Ecco perchè questo controllo, in quando questo metodo controlla tutte le azioni che avvengono all’interno della tabella. Tornando al codice, all’interno dell’if possiamo notare due istruzioni, che eliminano l’elemento sia dalla lista che dalla tabella. Proprio la prima istruzione ci porta ad eseguire una piccola modifica: dobbiamo modificare il tipo dell’elemento “lista”, portandolo da NSArray a NSMutableArray. Dunque, il codice presente in “MainView.h” deve diventare così:
Questa modifica è necessaria, in quando il tipo NSArray non è modificabile, quindi non ci permetterebbe di eliminare elementi dopo la sua dichiarazione. Dobbiamo anche modificare l’istruzione presente nel metodo “awakeFromNib”, che diventerà così:
Salviamo e clicchiamo su “Build and Go!”, la nostra applicazione ora funzionerà correttamente!
4. Implementiamo la selezione di una cella
Ora apportiamo un’ultima modifica, che ci servirà più che altro per comprendere come interagire con la scelta effettuata dall’utente. Vogliamo fare in modo che, quando l’utente seleziona una determinata cella, appaia un pop-up contenente l’elemento che ha selezionato. Aggiungiamo, quindi, il seguente metodo:
Non facciamo altro che dichiarare e istanziare un pop-up (un AlertView), in cui il messaggio sarà “[lista objectAtIndex:indexPath.row]”, ovvero appunto l’elemento selezionato dall’utente.
Clicchiamo su “Build and Go!” e gustiamoci la nostra applicazione con le nuove funzionalità!
Nella prossima parte di questo tutorial vedremo come implementare un box per la ricerca, proprio come avviene nell’applicazione nativa Contatti!
Se Avete Problemi, questo è il nostro file di progetto.
La guida è stata creata da Andrea Busi per “iSpazio.net” e “The Bubi Devs”. I meriti, quindi, sono del legittimo autore.
Leggi o Aggiungi Commenti