T#040 – Usiamo le UITableView (parte 2): Modifichiamo le celle e intercettiamone il tocco

Eccoci con il secondo tutorial dedicato alle UITableView. Nella prima parte 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 alcune 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ù.

1. Modificare la tabella: l’evento edit

La prima cosa da fare è inserire un tasto che ci permetta di accedere alla modifica della tabella. Per fare ciò ci basta “scommentare” una riga che dovreste già trovare nel metodo viewDidLoad (riga 12):

1
2
3
4
5
6
7
8
9
10
11
12
13

- (void)viewDidLoad {
    [super viewDidLoad];
 
	self.title = @"Prodotti Apple";
 
	//elementi da visualizzare nella tabella
	lista = [[NSMutableArray alloc] initWithObjects:@"iPhone", @"iPod",
			 @"iPod Touch", @"iMac", @"iBook", @"MacBook", @"MacBook Pro", @"Mac Pro",
			 @"PowerBook", nil]; 
 
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

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 succede perchè non abbiamo ancora concluso di implementare questa funzionalità. Inseriamo, quindi, il seguente metodo:

1
2
3
4
5
6
7
8
9
10
11
12

// Elimina l'elemento dalla tabella e dalla lista
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { 
 
	//controlla se l'azione compiuta è un'eliminazione
	if (editingStyle == UITableViewCellEditingStyleDelete) {
		//elimina l'elemento dalla lista
		[lista removeObjectAtIndex:indexPath.row];
		//elimina le'elemento dalla tabella
		[self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
 
	}
}

Come possiamo notare dalla struttura, anche se 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 di fatto 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 dal metodo
“tableView: cellForRowAtIndexPath:” la seguente istruzione (vi ho spiegato nella prima parte a cosa serviva):

1

cell.selectionStyle = UITableViewCellSelectionStyleNone;

altrimenti le celle non saranno selezionabili.

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

1
2
3
4
5
6
7

// Se selezioniamo una riga appare un pop-up con l'elemento in questione
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
	UIAlertView *popUp = [[UIAlertView alloc] initWithTitle:@"Hai selezionato:"
							message:[lista objectAtIndex:indexPath.row] delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
	[popUp show];
	[popUp release];
}

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 (UIAlertView), 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 con il tutorial, questo è il nostro file di progetto.