{"id":3346,"date":"2010-05-10T09:50:37","date_gmt":"2010-05-10T07:50:37","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3346"},"modified":"2010-05-11T14:25:41","modified_gmt":"2010-05-11T12:25:41","slug":"t040-usiamo-le-uitableview-parte-2-modifichiamo-le-celle-e-intercettiamone-il-tocco","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t040-usiamo-le-uitableview-parte-2-modifichiamo-le-celle-e-intercettiamone-il-tocco\/","title":{"rendered":"T#040 \u2013 Usiamo le UITableView (parte 2): Modifichiamo le celle e intercettiamone il tocco"},"content":{"rendered":"

Eccoci con il secondo tutorial dedicato alle UITableView. Nella prima parte\u00a0abbiamo visto come creare una tabella ed inserire dei dati. La nostra tabella, per\u00f2, 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\u00f9.<\/p>\n

1. Modificare la tabella: l’evento edit<\/h4>\n

La prima cosa da fare \u00e8 inserire un tasto che ci permetta di accedere alla modifica della tabella. Per fare ci\u00f2 ci basta “scommentare” una riga che dovreste gi\u00e0 trovare nel metodo viewDidLoad (riga 12):<\/p>\n

\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n\r\n\tself.title = @\"Prodotti Apple\";\r\n\r\n\t\/\/elementi da visualizzare nella tabella\r\n\tlista = [[NSMutableArray alloc] initWithObjects:@\"iPhone\", @\"iPod\",\r\n\t\t\t @\"iPod Touch\", @\"iMac\", @\"iBook\", @\"MacBook\", @\"MacBook Pro\", @\"Mac Pro\",\r\n\t\t\t @\"PowerBook\", nil]; \r\n\r\n    \/\/ Uncomment the following line to display an Edit button in the navigation bar for this view controller.\r\n    self.navigationItem.rightBarButtonItem = self.editButtonItem;\r\n}\r\n<\/pre>\n
Tutto molto semplice e veloce grazie alle API di Apple.<\/p>\n
Se provate ad eseguire l’applicazione noterete che cancellando una riga essa non viene rimossa dalla tabella. Questo succede perch\u00e8 non abbiamo ancora concluso di implementare questa funzionalit\u00e0. Inseriamo, quindi, il seguente metodo:<\/p>\n
\r\n\/\/ Elimina l'elemento dalla tabella e dalla lista\r\n- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { \r\n\r\n\t\/\/controlla se l'azione compiuta \u00e8 un'eliminazione\r\n\tif (editingStyle == UITableViewCellEditingStyleDelete) {\r\n\t\t\/\/elimina l'elemento dalla lista\r\n\t\t[lista removeObjectAtIndex:indexPath.row];\r\n\t\t\/\/elimina le'elemento dalla tabella\r\n\t\t[self.tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];\r\n\r\n\t}\r\n}\r\n<\/pre>\n
Come possiamo notare dalla struttura, anche se un po’ complicata, questo \u00e8 un metodo del protocollo UITableView, proprio come quello che abbiamo implementato nella prima parte.
\nIl costrutto if (riga 5) esegue un controllo che, come spiega il commento, controlla se l’azione eseguita sulla tabella \u00e8 di cancellazione di una riga. Direte voi: “Cosa posso fare d’altro?” Per ora niente, perch\u00e8 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. \u00c8 sempre questo metodo che si occupa di gestire tutte le azioni sulla tabella. Ecco spiegata la necessit\u00e0 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 \u00e8 davvero implementata.<\/p>\n
2. Rendiamo le celle selezionabili<\/h4>\n
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\u00e0, ma vi permetter\u00e0 di imparare come gestire le selezioni dell’utente e vedrete, inoltre, come creare un pop-up.<\/p>\n
Prima di implementare il metodo necessario, eliminate dal metodo
\n“tableView: cellForRowAtIndexPath:” la seguente istruzione (vi ho spiegato nella prima parte a cosa serviva):<\/p>\n
\r\ncell.selectionStyle = UITableViewCellSelectionStyleNone;\r\n<\/pre>\n
altrimenti le celle non saranno selezionabili.<\/p>\n
Sempre nel file “RootViewController.m” inserite ora questo metodo:<\/p>\n
\r\n\/\/ Se selezioniamo una riga appare un pop-up con l'elemento in questione\r\n- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {\r\n\tUIAlertView *popUp = [[UIAlertView alloc] initWithTitle:@\"Hai selezionato:\"\r\n\t\t\t\t\t\t\tmessage:[lista objectAtIndex:indexPath.row] delegate:self cancelButtonTitle:@\"OK\" otherButtonTitles:nil];\r\n\t[popUp show];\r\n\t[popUp release];\r\n}\r\n<\/pre>\n
Questo \u00e8 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\u00e0 un messaggio con il nome della cella selezionata. \u00c8 possibile creare pop-up con diversi bottoni o pi\u00f9 messaggi, vi baster\u00e0 guardare la documentazione per trovare tutte le varianti possibili.
\nAlla riga 6, infine, viene mostrato il pop-up appena definito.<\/p>\n
Clicchiamo su “Build and Go!” e gustiamoci la nostra applicazione con le nuove funzionalit\u00e0!<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Nella prossima parte di questo tutorial vedremo come implementare un box per la ricerca, proprio come avviene nell’applicazione nativa Contatti!<\/p>\n

\n\"Icona<\/a> Se avete problemi con il tutorial, questo \u00e8 il nostro file di progetto<\/a>.
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Eccoci con il secondo tutorial dedicato alle UITableView. Nella prima parte\u00a0abbiamo visto come creare una tabella ed…<\/p>\n","protected":false},"author":254,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[216,218,88,217,219,27],"class_list":["post-3346","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-andrea-busi","tag-modifica-uitable","tag-programmazione-iphone","tag-tabelle-iphone","tag-uitable-edit","tag-uitableview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/254"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3346"}],"version-history":[{"count":10,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3346\/revisions"}],"predecessor-version":[{"id":3388,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3346\/revisions\/3388"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}