Nella prima parte di questo tutorial abbiamo visto come aggiungere la libreria MGTwitterEngine e come leggere la nostra timeline di Twitter.

In questo secondo appuntamento vedremo, invece, come creare una tabella personalizzata, che dovrà visualizzare gli elementi Tweet che abbiamo salvato nella lista. Utilizzeremo, quindi,  la classeUITableViewCell per creare delle celle personalizzate, in modo da ottenere una tabella con un layout ad-hoc.

Vi ricordo che per seguire questo tutorial è necessario avere a disposizione il codice sorgente della prima parte.

1) Creiamo la tabella

Come prima cosa, andiamo a creare la tabella che conterrà i tweet letti dalla nostra timeline. Iniziamo a creare, quindi, una tabella e la relativa classe per gestirla.

Facendo così avremo già 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):

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 è il seguente:

Ovviamente potete dimensionare le celle a vostro piacimento, io ho ritenuto questa dimensione accettabile per la struttura che avevo in mente.

Abbiamo così concluso la definizione grafica della tabella. Possiamo salvare e chiudere Interface Builder.

2) Creiamo la cella personalizzata

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

Il procedimento non è difficile, però 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.

Questa volta inseriamo all’interno della vista un componente di tipo “UITableViewCell”:

Facciamo doppio clic sul componente che abbiamo appena inserito, si aprirà questa piccola vista:

Questa è 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ò, andiamo nel “Size Inspector” e modifichiamo l’altezza a 70 (lo stesso valore che abbiamo impostato prima nella tabella, ricordate?):

Andiamo, poi, nell’ “Attributes Inspector” e nel campo “Identifier” inseriamo “Cell”:

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

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

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

Abbiamo così concluso anche la definizione della cella personalizzata. Come vedete questo metodo è molto versatile, potrete personalizzare al massimo qualsiasi tabella!

3) Definiamo la classe della tabella

Dobbiamo ora iniziare a mettere mano al codice. Per prima cosa definiamo la tabella che mostrerà i tweet che abbiamo letto durante il caricamento dell’applicazione.

Ecco il codice da inserire nel file “TabellaTwitterViewController.h”:

#import 

@interface TabellaTwitterViewController : UITableViewController {
 NSMutableArray *lista;
 UITableViewCell *cellaNib;
}

@property (nonatomic, retain) NSMutableArray *lista;
@property (nonatomic, retain) IBOutlet UITableViewCell *cellaNib;

- (UIImage *)scale:(UIImage *)image toSize:(CGSize)size;

@end

Come vedete il codice rispecchia quello che solitamente è utilizzato quando utilizziamo delle tabella. Abbiamo definito una lista di elementi (alla riga 4), che sarà la stessa che abbiamo definito nella classe “SampleTwitterClientViewController”. L’elemento “cellaNib”, invece, corrisponderà alla cella che abbiamo creato poco fa in Interface Builder.
Alla riga 11, infine, troviamo la definizione di un metodo “scale”, che ci permetterà di ridimensionare l’immagine per essere contenuta interamente nella UIImageView contenuta nella cella personalizzata.

Definiamo, ora, il contenuto del file “TabellaTwitterViewController.m”. Iniziamo inserendo le seguenti intestazioni:

#import "TabellaTwitterViewController.h"
#import "Tweet.h"

@implementation TabellaTwitterViewController

@synthesize lista, cellaNib;

Modifichiamo, poi, il metodo “tableView: numberOfRowInSection:” impostando come valore di ritorno la dimensione della lista:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return [lista count];
}

Ora dobbiamo implementare il metodo “tableView: cellForRowAtIndexPath:”. È un po’ diverso dal solito, eccovelo:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

 static NSString *CellIdentifier = @"Cell";

 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
 if (cell == nil) {
 [[NSBundle mainBundle] loadNibNamed:@"cellaTweet" owner:self options:NULL];
 cell = cellaNib;
 }

 Tweet *elemento = [lista objectAtIndex:indexPath.row];
 UILabel *testoLabel = (UILabel*)[cell viewWithTag:2];
 testoLabel.text = elemento.testo;
 UILabel *userLabel = (UILabel*)[cell viewWithTag:1];
 userLabel.text = elemento.user;

 UIImageView *immagine = (UIImageView*)[cell viewWithTag:0];
 [immagine setImage:[self scale:elemento.immagine toSize:CGSizeMake(60, 60)]];

 return cell;
}

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]), ecco perchè prima lo abbiamo impostato in Interface Builder.
L’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).

Ecco, quindi, la definizione del metodo che ridimensiona le immagini:

- (UIImage *)scale:(UIImage *)image toSize:(CGSize)size{
 UIGraphicsBeginImageContext(size);
 [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
 UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 return scaledImage;
}

Non commento questo metodo, in quanto l’ho trovato anche io su Internet, per la precisione a questo indirizzo. Ringrazio, quindi, il legittimo autore 😉

La nostra tabella è così completa!

4) Completiamo l’applicazione

Ci mancano solo due cose per completare il nostro client.

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”:

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:

Salviamo e chiudiamo Interface Builder.

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ì la nostra tabella. Modifichiamo così il file “SampleTwitterClientViewController.h”:

#import 
#import "MGTwitterEngine.h"

@class Tweet;
@class TabellaTwitterViewController;

@interface SampleTwitterClientViewController : UIViewController  {
 MGTwitterEngine *twitterEngine;
 NSMutableArray *listaTweet;

 IBOutlet UIActivityIndicatorView *spinner;

 TabellaTwitterViewController *tabellaTwitterViewController;
}

-(NSString*)getMessaggio:(NSDictionary*)element;
-(NSString*)getUser:(NSDictionary*)element;
-(NSURL*)getUrlImage:(NSDictionary*)element;

@property (nonatomic, retain) NSMutableArray *listaTweet;
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *spinner;
@property (nonatomic, retain) IBOutlet TabellaTwitterViewController *tabellaTwitterViewController;

@end

Andiamo, poi, nel file “SampleTwitterClientViewController.m”. Modifichiamo le dichiarazioni e le importazioni nel seguente modo:

#import "SampleTwitterClientViewController.h"
#import "Tweet.h"
#import "TabellaTwitterViewController.h"

@implementation SampleTwitterClientViewController

@synthesize listaTweet, spinner, tabellaTwitterViewController;

Modifichiamo, ora, il metodo “statusesReceived: forRequest:”, inserendo il seguente codice alla fine di tale metodo:

 [elemento release];

 self.tabellaTwitterViewController.lista = self.listaTweet;

 [spinner stopAnimating];

 [self presentModalViewController:self.tabellaTwitterViewController animated:YES];

Con queste semplici righe abbiamo semplicemente impostato la lista degli elementi della nostra tabella, che corrisponderà alla lista dei tweet che abbiamo creato in precedenza (parte 1 del tutorial).

Abbiamo quasi terminato! Salviamo tutte le classi che abbiamo appena modificato e apriamo il file “SampleTwitterClientViewController.xib”. Inseriamo un elemento “UIViewController”:

Selezioniamo poi tale elemento e in “Identity Inspector” selezioniamo come classe “TabellaTwitterViewController”.

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:

Abbiamo concluso! Salviamo tutto, chiudiamo Interface Builder e clicchiamo su “Build and Go!” e testiamo il nostro personalissimo client di Twitter!

Se avete problemi con il tutorial, questo è il nostro file di progetto.