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):
- (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:
// 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):
cell.selectionStyle = UITableViewCellSelectionStyleNone;
altrimenti le celle non saranno selezionabili.
Sempre nel file “RootViewController.m” inserite ora questo metodo:
// 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.
20 Responses to “T#040 – Usiamo le UITableView (parte 2): Modifichiamo le celle e intercettiamone il tocco”
11 Maggio 2010
Fedechiaro come sempre!
è che io arrivo a mettere in pratica e ci divento matto!!!
ahahhah
11 Maggio 2010
Andrea Busiahaha, purtroppo non è sempre facile!! ci vuole molto studio e tanta pazienza! 😉
11 Maggio 2010
Usiamo le UITableView: Implementiamo la barra di ricerca | devAPP[…] Pubblicazioni « T#040 – Usiamo le UITableView (parte 2): Modifichiamo le celle e intercettiamone il tocco […]
19 Maggio 2010
LeleBelle guide complimenti 🙂
rispetto a tutti i libri in inglese che si trovano in giro, queste guide sono molto piu’ puntuali e meno dispersive.
19 Maggio 2010
Andrea Busigrazie mille, è proprio quello che cerchiamo di fare: tutorial non troppo complessi e che diano un qualcosa di pratico e utile 😉
24 Maggio 2010
matteoCiao,
volevo provare a selezionare una cella da codice così che all’apertura mi selezioni direttamente la riga e che compaia l’alert della riga che ho deciso di selezionare da codice..ma non ci riesco proprio..un aiutino please!..:)
(..e mi associo con i complimenti…guide molto semplici e comprensibili che aiutano ad imparare..grazie!..)
24 Maggio 2010
Andrea Busigrazie dei complimenti..
scusa però non ho ben capito cosa tu voglia fare..
25 Maggio 2010
El JobsoSe invece io vorrei far comparire una UIView al posto che una UIAllertView quando schiaccio su un prodotto cosa devo fare? Grazie
27 Maggio 2010
Andrea Busiprova a guardare questo tutorial, che prossimamente porteremo su devAPP 😉
28 Maggio 2010
Riccardo DanzoGrazie Andrea! L’avevo gia visto comunque sono riuscito a fare tutto!
29 Ottobre 2010
GiovanniCiao, innanzitutto complimenti per il sito e per i tutorial.
Io avrei una domanda da farti: come faccio a editare una tableview come succede negli iPhone 4 e 3GS?
Mi spiego meglio: con questo tutorial, quando clicchiamo edit, compare affianco di ogni voce un pallino che selezionato cambia orientamento e compare un tasto per cancellare la voce. Io vorrei poter implementare la modifica delle tabelle come negli iphone 3GSe 4, cioè cliccando sul pulsante modifica, l’elenco si sposta a destra e sotto compare una barra con due pulsanti, modifica e cancella. Grazie mille per l’aiuto
11 Febbraio 2011
PieroCiao! complimenti ancora per il tutorial! è molto utile! vorrei sapere una cosa, una volta installata l’app sul mio iphone, quando vado ad eliminare una cella si cancella come dovrebbe, poi chiudo e riapro l’applicazione ma la cella ritorna, non salva, come è possibile salvare quando spingo il tasto home?
16 Febbraio 2011
Andrea Busidevi fare in modo che i dati che vengono visualizzati nella tua tabella non siano contenuti in una semplice variabile (che ovviamente è sempre “nuova” ad ogni avvio dell’applicazione). I dati dovranno essere salvati in maniera persistente, quindi in un db, in un file o utilizzando NSUserDefault 😉
4 Maggio 2011
AndreaCiao a tutti e complimenti per il tutorial, sono davvero davvero utili.
Stavo cercando di implementare nella mia tabella il codice per eliminare una cella. Questo è il mio codice:
– (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
NSLog(@”Elemento da togliere %i “,indexPath.row);
[elementi removeObjectAtIndex:indexPath.row];
[lista deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
}
Quando lo eseguo mi viene correttamente visualizzato il pulsante rosso allo scorrimento sulla cella, ma se lo clicco l’app va in crash. Come mai?
NSLog stampa correttamente l’indice ma dopo aver eseguito nslog l’app va in crash
Elementi è un NSMutableArray.. e funziona correttamente, xcode visualizza correttamente l’autocompletamento per tutte le righe che ho scritto… 🙁
5 Maggio 2011
Andrea Busiè sbagliata la seconda istruzione. Tu hai messo “lista deleteRows…”, invece il metodo va richiamato sulla “tableView” 😉
7 Giugno 2011
TavixCiao,e complimenti per lo splendido lavoro che fate….,io pur non avendo dimestichezza con la programmazione, avrei voluto implementare al tocco prolungato su una App, la possibilità oltre alla consueta x per eliminarla, di visualizzare un pop up che contenga una piccola anteprima delle funzioni della App selezionata…avevo in mente di farlo apparire nel pop up di conferma sostituendo il pulsante “annulla” con “informazioni” e al tocco di questo fare apparire il pop up con l’anteprima…non so se sono stato chiaro…e grazie comunque…
17 Giugno 2011
Andrea BusiCiao, a meno di ricorrere al jailbreak quello che vuoi fare tu non è possibile con l’SDK ufficiale di Apple 😉
7 Luglio 2011
longilineonel metodo “tableView: cellForRowAtIndexPath” non vi è traccia della riga:
cell.selectionStyle = UITableViewCellSelectionStyleNone;
Se non sono in editingmode funziona tutto quanto come da te descritto, ma se do una setEditing:YES non riesco a selezionare nessuna riga.
Perchè?
22 Luglio 2011
iStoppedAnche mettendo [self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade]; continua a crashare. Cosa può essere?
6 Aprile 2013
DevTutorial #10 – Come creare una tabella (Parte II) - Bubi Devs[…] Leggi il tutorial completo su devAPP […]