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 classe UITableViewCell 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.

Buon tutorial!

1) Creiamo la tabella

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

Andiamo in “File” -> “New File…” e dalla sezione “User Interface” scegliamo “Empty XIB”, chiamando il file “tabellaTwitterViewController.xib”. Qui, fra poco, creeremo la nostra tabella.

Prima di procedere, creiamo anche la classe che si occuperà di gestire tale tabella. Andiamo ancora in “File” -> “New File..” e da “Cocoa Touch Class” scegliamo “UIViewController subclass”, assicurandoci che sia spuntata la voce “UITableViewController subclass”:

e chiamiamola “TabellaTwitterViewController”. Se abbiamo creato tutto in modo corretto avremo i seguenti file nel nostro progetto:

Possiamo ora fare doppio clic sul file “tabellaTwitterViewController.xib”, che si aprirà in Interface Builder.

Dalla libreria selezioniamo un componente “UITableView” e inseriamolo nel Pannello dei Documenti:

avremo così inserito la tabella nella nostra vista (che fino ad ora era completamente vuota).

Selezioniamo, poi, il “File’s Owner” ed andiamo nell’”Identity Inspector”. Dal menù a tendina “Class” selezioniamo la classe “TabellaTwitterViewController”:

Avremo così impostato la classe che dovrà gestire questo file xib (e nello specifico la nostra tabella). Spostiamoci, poi, nel “Connections Inspector” e colleghiamo l’elemento “view” con il componente “Table View” che abbiamo inserito poco prima. Se abbiamo eseguito questo passo correttamente avremo il seguente risultato:

Infine dobbiamo impostare il “delegate” e il “data source” della nostra tabella, che sarà ovviamente la classe “TabellaTwitterViewController”. Clicchiamo sulla “Table View” che abbiamo inserito, e andiamo anche li nel “Connections Inspector”. Il pannello sarà così fatto:

Colleghiamo, quindi, l’elemento “delegate” e “dataSource” con il “File’s Owner”. Ecco come deve essere il vostro pannello dopo i due collegamenti:

L’ultima modifica da fare riguarda la dimensione delle celle. Sempre nella “Table View”, andiamo nella “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 Label. 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”:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
 
@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:

1
2
3
4
5
6

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

1
2
3

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#import <UIKit/UIKit.h>
#import "MGTwitterEngine.h"
 
@class Tweet;
@class TabellaTwitterViewController;
 
@interface SampleTwitterClientViewController : UIViewController <MGTwitterEngineDelegate> {
 MGTwitterEngine *twitterEngine;
 NSMutableArray *listaTweet;
 
 IBOutlet UIActivityIndicatorView *spinner;
 
 TabellaTwitterViewController *tabellaTwitterViewController;
}
 
-(NSString*)getMessaggio:(NSString*)element;
-(NSString*)getUser:(NSString*)element;
-(NSURL*)getUrlImage:(NSString*)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:

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7

 [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”.

Nell’”Attributes Inspector” selezioniamo il file xib che deve essere associato a questa vista, ovvero “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!

Nel prossimo tutorial vedremo come eseguire il salvataggio di alcuni dati, un aspetto molto importante in tutte le applicazioni.

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata creata da Andrea Busi per “Bubi Devs”.
I meriti, quindi, sono del legittimo autore.

377 visite