Quella di oggi è la prima parte di una serie di tutorial che riguardano la creazione e la gestione delle UITableView, ovvero le tabelle (per intenderci, come quella che contiene i vostri contatti). Vedremo come crearne una, come gestire la sua configurazione di base e come popolarla di dati. Nei successivi tutorial, invece, vedremo qualche funzionalità in più, fino ad implementare la ricerca all’interno della tabella stessa. Tornate quindi spesso a trovarci e imparerete a sfruttare anche voi questo componente fondamentale della programmazione per iPhone.

1. Creiamo un nuovo progetto

Apriamo Xcode e selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “Navigation-based Application”, clicchiamo su “Choose…”, immettiamo come nome “tableViewTutorial” e facciamo clic su “Save”. Abbiamo così creato il nostro nuovo progetto.



Questo template di Xcode ci fornisce già una tabella con una barra di navigazione, semplificandoci notevolmente il lavoro!

Nota: questo tutorial funziona con SDK 3.0 e superiori.

Aprendo il file “RootViewController.xib” con Interface Builder possiamo notare la struttura già pronta, non dovremo toccare niente!



2. Inseriamo gli elementi della tabella

A differenza di tutti i passaggi che dovevano essere eseguiti fino al SDK 2.x, dovremo solamente inserire poche righe di codice per avere la nostra tabella già pronta e funzionante!

Apriamo il file “RootViewController.h” e inseriamo la dichiarazione del seguente componente:

1
2
3
4
5
6
7

@interface RootViewController : UITableViewController {
	NSMutableArray *lista;
}
 
@property (nonatomic, retain) NSMutableArray *lista;
 
@end

Abbiamo definito un array (riga 2) in cui inseriamo tutti gli elementi che devono poi essere visualizzati nella tabella. Notate che abbiamo utilizzato un NSMutableArray, questo perchè dovremo avere la possibilità di poter modificare gli elementi che lo compongono (analizzeremo meglio questo aspetto quando sarà necessario).

Spostiamoci ora nel file “RootViewController.m” e inseriamo queste istruzioni:

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

#import "RootViewController.h"
 
@implementation RootViewController
 
@synthesize lista;
 
- (void)viewDidLoad {
    [super viewDidLoad];
 
	self.title = @"Prodotti Apple";
 
	//elementi da visualizzare nella tabella
	lista = [[NSMutableArray alloc] initWithObjects:@"iPhone", @"iPod",
			 @"iPod Touch", @"iMac", @"iBook", @"MacBook", @"MacBook Pro", @"Mac Pro",
			 @"PowerBook", nil]; 
 
    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
}

Analizziamo quello che abbiamo appena scritto. Chi ha già un minimo di esperienza con la programmazione per iPhone conoscerà certamente il metodo “viewDidLoad“: questo viene eseguito subito dopo il caricamento della vista, e ci permette di settare tutte le variabili e tutti i parametri all’avvio. Per prima cosa abbiamo impostato il titolo alla nostra tabella (riga 10), che apparirà nella UINavigationBar presente nella vista. Dopodichè viene inizializzata la lista (che è un oggetto NSMutableArray), inserendoci i vari elementi (riga 13).

Ora dobbiamo definire i metodi che si occupano di popolare la tabella. Scorrendo il file “RootViewController.m” li troverete già (Xcode li inserisce sempre di default), dovete solo completarli. Iniziamo definendo i seguenti due:

1
2
3
4
5
6
7
8

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
// Setta il numero di righe della tabella .
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [lista count];
}

Il primo metodo che incontriamo è “numberOfSectionsInTableView:“. Il codice da usare è sempre questo, in tutte le tabelle che creerete per cui vi interessa avere un’unica sezione. Se provate a modificare questo valore, infatti, vedrete che (quando eseguirete l’applicazione) la lista degli oggetti sarà ripetuta più volte. Ovviamente non è questa l’utilità di tale metodo, che, come accennato, permette di creare una tabella con più sezioni (come l’applicazione contatti, che è suddivisa in sezioni a seconda delle lettere alfabetiche).

Il secondo è “tableView: numberOfRowInSection:“, che usiamo per settare il numero di celle in ogni sezione (nel nostro esempio avremo una sola sezione). Questo valore deve corrispondere al numero di elementi che vogliamo inserire nella tabella, quindi quelli contenuti nell’oggetto “lista”.

Ci resta solamente da inserire un metodo, quello che si occupa di inserire gli elementi nelle celle della tabella. Ecco il metodo in questione:

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

// Setta il contenuto delle varie celle
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 
	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellID"]; 
 
	if (cell == nil){
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"cellID"] autorelease];
		//setta lo stile con cui vengono selezionate le righe
		cell.selectionStyle = UITableViewCellSelectionStyleNone;
	}
	//inseriamo nella cello l'elemento della lista corrispondente
	cell.textLabel.text = [lista objectAtIndex:indexPath.row];
	return cell;
}

Questo è il metodo (fondamentale ed obbligatorio) che si occupa di settare in maniera corretta le celle della tabella. Alla riga 4 troviamo la dichiarazione di una cella, che viene poi allocata alla riga 7. Con l’istruzione presente alla riga 9 definiamo come deve essere l’aspetto delle righe quando vengono selezionate dall’utente. Con questa istruzione l’utente non potrà selezionare nessuna riga, se invece la togliamo avremo la classica selezione con sfondo blu.
Alla riga 12, infine, settiamo il valore contenuto nella cella: esso deve essere letto dall’array, nella posizione uguale a quella della riga (ricordatevi che la numerazione dell’array e delle celle partono sempre da zero).

Cliccate ora su “Build and Go!”: la nostra tabella inizia a prendere forma!




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