{"id":6283,"date":"2011-03-21T15:25:55","date_gmt":"2011-03-21T14:25:55","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=6283"},"modified":"2011-03-21T15:25:55","modified_gmt":"2011-03-21T14:25:55","slug":"t090-implementiamo-il-pull-down-to-refresh-nelle-nostre-tabelle","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t090-implementiamo-il-pull-down-to-refresh-nelle-nostre-tabelle\/","title":{"rendered":"T#090 – Implementiamo il “Pull down to refresh” nelle nostre tabelle!"},"content":{"rendered":"

Una delle caratteristiche pi\u00f9 in voga delle applicazioni per iPhone che fanno uso di tabelle \u00e8 sicuramente il famoso “Pull down to refresh”. Questa funzione permette di ricaricare i dati semplicemente trascinando verso il basso la tabella stessa. Essa \u00e8 utilizzata in moltissime applicazioni di successo, come Twitter, Facebook e nientepopodimeno che “Orologi di Classe PLUS<\/a>” (piccola pubblicit\u00e0 occulta :P):<\/p>\n

Implementare questa funzionalit\u00e0 non \u00e8 cos\u00ec difficile come pu\u00f2 sembrare, esiste infatti un’ottima libreria che mette a disposizione il codice gi\u00e0 bello che pronto: si tratta di EGOTableViewPullrefresh<\/a>, e noi lo utilizzeremo in questo tutorial.<\/p>\n


\n\"\"<\/a> \"\"<\/a>
\n<\/center><\/p>\n

1. Creiamo un progetto con una tabella<\/h4>\n

Per prima cosa iniziamo creando un nuovo progetto del tipo “Navigation-based Application”, che ci fornisce gi\u00e0 la struttura a tabella che ci serve:<\/p>\n


\n\"\"<\/a>
\n<\/center><\/p>\n

Definiamo quindi gli elementi che saranno visualizzati all’interno della nostra tabella: essi saranno contenuti in una semplice lista (NSMutableArray). Nel file “RootViewController.h” inseriamo la seguente definizione:<\/p>\n

\r\n#import \r\n\r\n@interface RootViewController : UITableViewController {\r\n    NSMutableArray *listaElementi;\r\n}\r\n\r\n@end\r\n<\/pre>\n
Spostiamoci nel file di implementazione “RootViewController.m” e nel metodo “viewDidLoad” inizializziamo la nostra lista:<\/p>\n
\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n    self.title = @\"Lista nomi\";\r\n    listaElementi = [[NSMutableArray alloc] initWithObjects:@\"Andrea\",@\"Marco\",@\"Luigi\", nil];\r\n}\r\n<\/pre>\n
Fatto ci\u00f2 non ci resta che far visualizzare dalla tabella questi elementi. Modifichiamo, quindi, questi ultimi due metodi (riga 2 e riga 15):<\/p>\n
\r\n- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {\r\n    return [listaElementi count];\r\n}\r\n\r\n\/\/ Customize the appearance of table view cells.\r\n- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {\r\n    static NSString *CellIdentifier = @\"Cell\";\r\n    \r\n    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];\r\n    if (cell == nil) {\r\n        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];\r\n    }\r\n\r\n    cell.textLabel.text = [listaElementi objectAtIndex:indexPath.row];\r\n    \r\n    \/\/ Configure the cell.\r\n    return cell;\r\n}\r\n<\/pre>\n
Penso che questi passaggi siano ormai chiari per la maggior parte di voi, quindi non mi soffermo sulle singole istruzioni modificate. Se avete dei dubbi a riguardo leggete i tutorial dedicati alle UITableView<\/a>.<\/p>\n
Se compiliamo ed eseguiamo l’applicazione in questo momento, tutto dovrebbe funzionare senza problemi:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
2. Inseriamo la libreria EGOTableViewPullRefresh<\/h4>\n
Dobbiamo ora inserire la libreria che ci permetter\u00e0 di aggiungere il “Pull down to refresh” alla nostra applicazione. Potete scaricare la libreria con un esempio dimostrativo alla pagina di Github del progetto<\/a>, oppure, se preferite, solo la classe da questo link<\/a> che vi mettiamo a disposizione.<\/p>\n
Inseriamo nel nostro progetto le classi “PullToRefreshTableViewController” e “EGORefreshTableHeaderView”, che ci forniranno le funzionalit\u00e0 desiderate:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Inseriamo anche l’immagine della freccia che trovaviamo nel pacchetto appena scaricato (se \u00e8 diversa da quella di default “blueArrow.png” dovremo modificare il file “EGORefreshTableHeaderView” altrimenti non verr\u00e0 visualizzata):<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Prima di passare al codice vero e proprio, \u00e8 necessario inserire un framework all’interno del progetto: “QuartzCore.framework”. Se utilizzate gi\u00e0, come me, XCode 4, per inserie un framework dovrete andare nel progetto, quindi nel pannello “Build Phases”, in cui troverete “Link Binary With Binaries”, da cui potrete inserire il framework QuartzCore:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
3. Modifichiamo il codice necessario<\/h4>\n
\u00c8 venuto il momento di implementare il codice necessario per far funzionare il nostro “Pull down to refresh”.
\nIniziamo dal file “RootViewController.h”. Dobbiamo, prima di tutto, cambiare la superclasse della classe in questione (scusate il giro di parole). Modifichiamo il codice in questo modo:<\/p>\n
\r\n#import \r\n#import \"PullToRefreshTableViewController.h\"\r\n\r\n@interface RootViewController : PullToRefreshTableViewController {\r\n    NSMutableArray *listaElementi;\r\n}\r\n@end\r\n<\/pre>\n
Alla riga 2 abbiamo importato la classe “PullToRefreshTableViewController” necessaria, mentre alla riga 4 abbiamo cambiato la superclasse di RootViewController, che in precedenza era UITableViewController<\/em>. Questa modifica ci permetter\u00e0 di riutilizzare il codice presente nella classe “PullToRefreshTableViewController”, grazie all’ereditariet\u00e0, un paradigma fondamentale della programmazione ad oggetti.
\nPassiamo al file “RootViewController.m”, in cui ci saranno pi\u00f9 modifiche da fare. La prima \u00e8 semplice ed \u00e8 da inserire nel metodo “viewDidLoad” (riga 7):<\/p>\n
\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n    self.title = @\"Lista nomi\";\r\n    \/\/ definiamo la lista degli oggetti\r\n    listaElementi = [[NSMutableArray alloc] initWithObjects:@\"Andrea\",@\"Marco\",@\"Luigi\", nil];\r\n    \/\/ settiamo la data dell'ultimo refresh (in questo caso \u00e8 nil, non ci sono date precedenti)\r\n    [self.refreshHeaderView setLastRefreshDate:nil];\r\n}\r\n<\/pre>\n
Semplicemente abbiamo settato la data dell’ultimo refresh, che appare mentre la tabella ricarica i dati. Ovviamente si pu\u00f2 fare in modo di memorizzare l’ultimo refresh (ad esempio tramite le NSUserDefault) e di visualizzare all’avvio dell’applicazione.<\/p>\n
Non ci resta che inserire due semplicissimi metodi, che si occupano di ricaricare il “dataSource” della nostra tabella, ovviamente quando l’utente ha attivato il ri-caricamento dei dati. I due metodi da inserire (sempre in “RootViewController.m”) sono i seguenti:<\/p>\n
\r\n- (void)reloadTableViewDataSource{\r\n\t\/\/  qui possiamo richiamare metodi specifici per ricaricare i dati\r\n    [listaElementi addObject:@\"Fabrizio\"];\r\n    [listaElementi addObject:@\"Kevin\"];\r\n\t[super performSelector:@selector(dataSourceDidFinishLoadingNewData) withObject:nil afterDelay:3.0];\r\n\t\r\n}\r\n- (void)dataSourceDidFinishLoadingNewData{\r\n\t\/\/ settiamo la data corrente come ultimo refresh\r\n    [refreshHeaderView setCurrentDate];\t\r\n\t[super dataSourceDidFinishLoadingNewData];\r\n    [self.tableView reloadData];\r\n}\r\n<\/pre>\n
Nel primo metodo possiamo richiamare dei metodi specifici per aggiornare il nostro dataSource (ad esempio scaricandoli da un feed RSS). Nel nostro esempio abbiamo banalmente inserito due elementi nella nostra lista, ed abbiamo richiamato il metodo “dataSourceDidFinishLoadingNewData”, che segnala il completo caricamento dei nuovi dati. Nel nostro esempio, questo ultimo metodo viene richiamato con 3 secondi di ritardo, solamente per fingere un caricamento all’utente (\u00e8 quindi per puro scopo illustrativo).
\nIl secondo metodo, invece, setta la nuova data dell’ultimo refresh (che anche in questo caso potrebbe essere gestita e salvata con NSUserDefaults) e ricarica infine la tabella.<\/p>\n
Molto semplice vero?<\/p>\n
Ora possiamo compilare ed avviare la nostra applicazione, che funzioner\u00e0 senza problemi!<\/p>\n

\n\"\"<\/a> \"\"<\/a> \"\"<\/a>
\n<\/center><\/p>\n
\"\"<\/a> Se avete problemi con il tutorial,\u00a0questo \u00e8 il nostro file di progetto (per XCode 4).<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Una delle caratteristiche pi\u00f9 in voga delle applicazioni per iPhone che fanno uso di tabelle \u00e8 sicuramente…<\/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,625,626,627,242,27],"class_list":["post-6283","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-andrea-busi","tag-egotableviewpullrefresh","tag-pull-down-to-refresh","tag-quartzcore-framework","tag-tutorial-xcode","tag-uitableview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/6283","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=6283"}],"version-history":[{"count":27,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/6283\/revisions"}],"predecessor-version":[{"id":6326,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/6283\/revisions\/6326"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=6283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=6283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=6283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}