{"id":3615,"date":"2010-06-04T11:41:51","date_gmt":"2010-06-04T09:41:51","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3615"},"modified":"2010-06-04T12:06:17","modified_gmt":"2010-06-04T10:06:17","slug":"t050-creiamo-un-client-twitter-per-iphone-parte-2","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t050-creiamo-un-client-twitter-per-iphone-parte-2\/","title":{"rendered":"T#050 \u2013 Creiamo un client Twitter per iPhone (Parte 2)"},"content":{"rendered":"

\"\"<\/a> Nella\u00a0prima parte<\/a> di questo tutorial abbiamo visto come aggiungere la libreria MGTwitterEngine<\/strong> e come leggere la nostra timeline di Twitter.<\/p>\n

In questo secondo appuntamento vedremo, invece, come creare una tabella personalizzata, che dovr\u00e0 visualizzare gli elementi Tweet<\/em> che abbiamo salvato nella lista. Utilizzeremo, quindi,\u00a0 la classeUITableViewCell<\/strong> per creare delle celle personalizzate, in modo da ottenere una tabella con un layout ad-hoc.<\/p>\n

Vi ricordo che per seguire questo tutorial \u00e8 necessario avere a disposizione il codice sorgente della prima parte.<\/p>\n

1) Creiamo la tabella<\/h4>\n

Come prima cosa, andiamo a creare la tabella che conterr\u00e0 i tweet letti dalla nostra timeline. Iniziamo a creare, quindi, una tabella e la relativa classe per gestirla.<\/p>\n


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

Facendo cos\u00ec avremo gi\u00e0 un file “.xib” contenente una tabella e la classe associata, risparmiando tempo e lavoro. Se abbiamo creato tutto in modo corretto avremo i seguenti file nel nostro progetto (io li ho spostati per avere tutto ordinato):<\/p>\n


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

Apriamo il file “tabellaTwitterViewController.xib”, dovremo fare una piccola modifica. Dal Pannello dei Documenti selezioniamo la “Table View” (ovvero la tabella) e apriamo poi il “Size Inspector”. Modifichiamo l’altezza delle celle, portando il valore a 70. Il campo da modificare \u00e8 il seguente:<\/p>\n


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

Ovviamente potete dimensionare le celle a vostro piacimento, io ho ritenuto questa dimensione accettabile per la struttura che avevo in mente.<\/p>\n

Abbiamo cos\u00ec concluso la definizione grafica della tabella. Possiamo salvare e chiudere Interface Builder.<\/p>\n

2) Creiamo la cella personalizzata<\/h4>\n

Vediamo, ora, un’aspetto nuovo. Solitamente quando utilizziamo le tabelle ci limitiano ad inseriro del testo che sar\u00e0 contenuto all’interno della cella. Per questo tutorial, invece, andremo a creare una nostra cella personalizzata, che comporr\u00e0 poi la tabella.<\/p>\n

Il procedimento non \u00e8 difficile, per\u00f2 merita attenzione per non perdere nessun passaggio. Iniziamo creando ancora un file xib vuoto (“File” -> “New File…” -> “Empty XIB”) e chiamiamolo “cellaTweet”. Facciamo doppio clic sul file appena creato per aprirlo in IB.<\/p>\n

Questa volta inseriamo all’interno della vista un componente di tipo “UITableViewCell”:<\/p>\n


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

Facciamo doppio clic sul componente che abbiamo appena inserito, si aprir\u00e0 questa piccola vista:<\/p>\n


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

Questa \u00e8 la base della nostra cella personalizzata. Fra poco inseriremo i componenti che conterranno poi le informazioni che desideriamo (che saranno, ovviamente, quelle che abbiamo fatto salvare nella prima parte del tutorial, quindi nome utente, testo del tweet e immagine dell’utente). Prima di fare ci\u00f2, andiamo nel “Size Inspector” e modifichiamo l’altezza a 70 (lo stesso valore che abbiamo impostato prima nella tabella, ricordate?):<\/p>\n


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

Andiamo, poi, nell’ “Attributes Inspector” e nel campo “Identifier” inseriamo “Cell”:<\/p>\n


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

Ora inseriamo gli elementi che dovranno comporre tutte le singole celle. Ci servir\u00e0 una UIImageView<\/em> e due UILabel<\/em>. Io le ho disposte e personalizzate come vedete di seguito, voi siete liberissimi di inserirle in maniera diversa!<\/p>\n


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

Manca solo una piccola operazione. Dobbiamo dare ai componenti un id univoco<\/strong>, in modo che potremo, poi, selezionarli via codice in maniera molto veloce. Selezioniamo la UIImageView<\/em> e andiamo nell’ “Attributes Inspector”. Nel campo tag<\/strong> inseriamo il valore 0 (dovrebbe gi\u00e0 essere presente):<\/p>\n


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

Facciamo la stessa operazione con le due label<\/em>, impostando per la label del nome utente il tag 1, mentre per la label che conterr\u00e0 il testo del tweet il tag 2. Questa seconda label conterr\u00e0 il testo dei tweet, quindi dobbiamo fare in modo che possa contenere pi\u00f9 testo. Riduciamo le dimensioni del font e impostiamo il numero massimo di righe a 2:<\/p>\n


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

Abbiamo cos\u00ec concluso anche la definizione della cella personalizzata. Come vedete questo metodo \u00e8 molto versatile, potrete personalizzare al massimo qualsiasi tabella!<\/p>\n

3) Definiamo la classe della tabella<\/h4>\n

Dobbiamo ora iniziare a mettere mano al codice. Per prima cosa definiamo la tabella che mostrer\u00e0 i tweet che abbiamo letto durante il caricamento dell’applicazione.<\/p>\n

Ecco il codice da inserire nel file “TabellaTwitterViewController.h”:<\/p>\n

\r\n#import \r\n\r\n@interface TabellaTwitterViewController : UITableViewController {\r\n NSMutableArray *lista;\r\n UITableViewCell *cellaNib;\r\n}\r\n\r\n@property (nonatomic, retain) NSMutableArray *lista;\r\n@property (nonatomic, retain) IBOutlet UITableViewCell *cellaNib;\r\n\r\n- (UIImage *)scale:(UIImage *)image toSize:(CGSize)size;\r\n\r\n@end\r\n<\/pre>\n
Come vedete il codice rispecchia quello che solitamente \u00e8 utilizzato quando utilizziamo delle tabella. Abbiamo definito una lista di elementi (alla riga 4), che sar\u00e0 la stessa che abbiamo definito nella classe “SampleTwitterClientViewController”. L’elemento “cellaNib”, invece, corrisponder\u00e0 alla cella che abbiamo creato poco fa in Interface Builder.
\nAlla riga 11, infine, troviamo la definizione di un metodo “scale”, che ci permetter\u00e0 di ridimensionare l’immagine per essere contenuta interamente nella UIImageView<\/em> contenuta nella cella personalizzata.<\/p>\n
Definiamo, ora, il contenuto del file “TabellaTwitterViewController.m”. Iniziamo inserendo le seguenti intestazioni:<\/p>\n
\r\n#import \"TabellaTwitterViewController.h\"\r\n#import \"Tweet.h\"\r\n\r\n@implementation TabellaTwitterViewController\r\n\r\n@synthesize lista, cellaNib;\r\n<\/pre>\n
Modifichiamo, poi, il metodo “tableView: numberOfRowInSection:” impostando come valore di ritorno la dimensione della lista:<\/p>\n
\r\n- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {\r\n return [lista count];\r\n}\r\n<\/pre>\n
Ora dobbiamo implementare il metodo “tableView: cellForRowAtIndexPath:”. \u00c8 un po’ diverso dal solito, eccovelo:<\/p>\n
\r\n- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {\r\n\r\n static NSString *CellIdentifier = @\"Cell\";\r\n\r\n UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];\r\n if (cell == nil) {\r\n [[NSBundle mainBundle] loadNibNamed:@\"cellaTweet\" owner:self options:NULL];\r\n cell = cellaNib;\r\n }\r\n\r\n Tweet *elemento = [lista objectAtIndex:indexPath.row];\r\n UILabel *testoLabel = (UILabel*)[cell viewWithTag:2];\r\n testoLabel.text = elemento.testo;\r\n UILabel *userLabel = (UILabel*)[cell viewWithTag:1];\r\n userLabel.text = elemento.user;\r\n\r\n UIImageView *immagine = (UIImageView*)[cell viewWithTag:0];\r\n [immagine setImage:[self scale:elemento.immagine toSize:CGSizeMake(60, 60)]];\r\n\r\n return cell;\r\n}\r\n<\/pre>\n
Come potete vedere, l’inizializzazione della cella avviene in maniera diversa dal solito. Alla riga 7, infatti, viene creata una nuova cella partendo dal file xib “cellaTweet”. Nelle istruzioni successive vengono invece settate le varie informazioni del tweet (nome utente, testo e immagine). Potete vedere che l’elemento della cella viene richiamato medianto l’uso del tag (con la funzione [cell viewWithTag:X]<\/strong>), ecco perch\u00e8 prima lo abbiamo impostato in Interface Builder.
\nL’imagine, inoltre, viene ridimensionata con la funzione “scale: toSize:”. Importante sono i valori che vengono passati nell’oggetto CGMakeSize: essi sono le dimensioni a cui vogliamo ridimensionare le nostre immagini (devono corrispondere con le dimensioni che avete impostato alla UIImageView nella cella personalizzata).<\/p>\n
Ecco, quindi, la definizione del metodo che ridimensiona le immagini:<\/p>\n
\r\n- (UIImage *)scale:(UIImage *)image toSize:(CGSize)size{\r\n UIGraphicsBeginImageContext(size);\r\n [image drawInRect:CGRectMake(0, 0, size.width, size.height)];\r\n UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();\r\n UIGraphicsEndImageContext();\r\n return scaledImage;\r\n}\r\n<\/pre>\n
Non commento questo metodo, in quanto l’ho trovato anche io su Internet, per la precisione a questo indirizzo<\/a>. Ringrazio, quindi, il legittimo autore \ud83d\ude09<\/p>\n
La nostra tabella \u00e8 cos\u00ec completa!<\/p>\n
4) Completiamo l’applicazione<\/h4>\n
Ci mancano solo due cose per completare il nostro client.<\/p>\n
Per prima cosa, apriamo nuovamente la cella “cellaTweet.xib”. Selezioniamo il “File’s Owner” ed entriamo nell'”Identity Inspector”. Impostiamo come classe della vista “TabellaTwitterViewController”:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Spostiamoci, poi, nel pannello “Connections Inspector” e colleghiamo l’elemento “cellaNib” al componente UITableViewCell che avevamo in precedenza inserito. Se avete fatto in maniera corretta il collegamento avrete il seguente risultato:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Salviamo e chiudiamo Interface Builder.<\/p>\n
Dobbiamo ora solo completare il caricamento dell’applicazione, che deve avviare la tabella dopo aver letto la nostra timeline. Torniamo, quindi, in “SampleTwitterClientViewController.h”. Dobbiamo definire un elemento “TabellaTwitterViewController”, in modo da poterlo richiamare alla fine del caricamento dei tweet, ed appaia cos\u00ec la nostra tabella. Modifichiamo cos\u00ec il file “SampleTwitterClientViewController.h”:<\/p>\n
\r\n#import \r\n#import \"MGTwitterEngine.h\"\r\n\r\n@class Tweet;\r\n@class TabellaTwitterViewController;\r\n\r\n@interface SampleTwitterClientViewController : UIViewController  {\r\n MGTwitterEngine *twitterEngine;\r\n NSMutableArray *listaTweet;\r\n\r\n IBOutlet UIActivityIndicatorView *spinner;\r\n\r\n TabellaTwitterViewController *tabellaTwitterViewController;\r\n}\r\n\r\n-(NSString*)getMessaggio:(NSDictionary*)element;\r\n-(NSString*)getUser:(NSDictionary*)element;\r\n-(NSURL*)getUrlImage:(NSDictionary*)element;\r\n\r\n@property (nonatomic, retain) NSMutableArray *listaTweet;\r\n@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *spinner;\r\n@property (nonatomic, retain) IBOutlet TabellaTwitterViewController *tabellaTwitterViewController;\r\n\r\n@end\r\n<\/pre>\n
Andiamo, poi, nel file “SampleTwitterClientViewController.m”. Modifichiamo le dichiarazioni e le importazioni nel seguente modo:<\/p>\n
\r\n#import \"SampleTwitterClientViewController.h\"\r\n#import \"Tweet.h\"\r\n#import \"TabellaTwitterViewController.h\"\r\n\r\n@implementation SampleTwitterClientViewController\r\n\r\n@synthesize listaTweet, spinner, tabellaTwitterViewController;\r\n<\/pre>\n
Modifichiamo, ora, il metodo “statusesReceived: forRequest:”, inserendo il seguente codice alla fine di tale metodo:<\/p>\n
\r\n [elemento release];\r\n\r\n self.tabellaTwitterViewController.lista = self.listaTweet;\r\n\r\n [spinner stopAnimating];\r\n\r\n [self presentModalViewController:self.tabellaTwitterViewController animated:YES];\r\n<\/pre>\n
Con queste semplici righe abbiamo semplicemente impostato la lista degli elementi della nostra tabella, che corrisponder\u00e0 alla lista dei tweet che abbiamo creato in precedenza (parte 1 del tutorial).<\/p>\n
Abbiamo quasi terminato! Salviamo tutte le classi che abbiamo appena modificato e apriamo il file “SampleTwitterClientViewController.xib”. Inseriamo un elemento “UIViewController”:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Selezioniamo poi tale elemento e in “Identity Inspector” selezioniamo come classe “TabellaTwitterViewController”.<\/p>\n
\"\"<\/a>
\n<\/center\n>
\nNell’ “Attributes Inspector” selezioniamo il file xib che deve essere associato a questa vista, ovvero “tabellaTwitterViewController”:<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
Spostiamoci, infine, nel “File’s Owner” e colleghiamo l’elemento “tabellaTwitterViewController” con l’elemento UIViewController appena inserito. Ecco come deve presentarsi il pannello dopo il collegamento:<\/p>\n
\"\"<\/a>
\n<\/center><\/p>\n
Abbiamo concluso! Salviamo tutto, chiudiamo Interface Builder e clicchiamo su “Build and Go!” e testiamo il nostro personalissimo client di Twitter!<\/p>\n

\n\"\"<\/a>
\n<\/center><\/p>\n
\n
\"\"<\/a> Se avete problemi con il tutorial,\u00a0questo \u00e8 il nostro file di progetto.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Nella\u00a0prima parte di questo tutorial abbiamo visto come aggiungere la libreria MGTwitterEngine e come leggere la nostra…<\/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,248,249,27],"class_list":["post-3615","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-andrea-busi","tag-mgtwitterengine","tag-twitter","tag-uitableview"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3615","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=3615"}],"version-history":[{"count":8,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3615\/revisions"}],"predecessor-version":[{"id":3640,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3615\/revisions\/3640"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}