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!

1. Modificare la tabella: l’evento edit

La prima cosa da fare è inserire il bottone che permette di accedere alla modifica della tabella. Per fare ciò ci basta decommentare una riga che dovreste già trovare nel metodo viewDidLoad:

Tutto molto semplice e veloce grazie alle API di Apple.

Se provate ad eseguire l’applicazione noterete che cancellando una riga essa non viene rimossa dalla tabella. Questo avviene perché non abbiamo ancora concluso di implementare questa funzionalità. Inseriamo, quindi, il seguente metodo:

Come possiamo notare dalla struttura un po’ complicata, questo è un metodo del protocollo UITableView, proprio come quello che abbiamo implementato nella prima parte.
Il costrutto if (riga 5) 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 d’altro?” Per ora niente, perché la nostra tabella supporta solo l’eliminazione di una riga, ma volendo si potrebbe implementare anche l’inserimento di una nuova riga, oppure altre azioni. È sempre questo metodo che si occupa di gestire tutte le azioni sulla tabella. Ecco spiegata la necessità di questo controllo. Tornando al codice, all’interno dell’if possiamo notare due istruzioni, che eliminano l’elemento sia dalla lista (riga 7) che dalla tabella (riga 9). In questo modo la cancellazione di una riga è davvero implementata.

2. Rendiamo le celle selezionabili

Vediamo ora di implementare un’altra funzione. Vogliamo che quando l’utente seleziona una cella appaia un pop-up che contenga il nome dell’elemento selezionato. Ovviamente questa azione non ha una grande utilità, ma vi permetterà di imparare come gestire le selezioni dell’utente e vedrete, inoltre, come creare un pop-up.
Prima di implementare il metodo necessario, eliminate la seguente istruzione da questo metodo (vi ho spiegato nella prima parte a cosa serviva):

altrimenti le celle non saranno selezionabili.

Sempre nel file “RootViewController.m” inserite ora questo metodo:

Questo è il metodo che si occupa di eseguire una certa azione quando l’utente seleziona una cella. Alla riga 3 possiamo notare la definizione del pop-up, che conterrà un messaggio con il nome della cella selezionata. È possibile creare pop-up con diversi bottoni o più messaggi, vi basterà guardare la documentazione per trovare tutte le varianti possibili.
Alla riga 6, infine, viene mostrato il pop-up appena definito.

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 “Bubi Devs”. I meriti, quindi, sono del legittimo autore.

1.094 visite