T#020 – Creiamo Table View raggruppate e divise in sezioni

Fino ad oggi abbiamo parlato e illustrato solo teoricamente cosa sono e come si possono personalizzare le Table View, strumenti utili e praticamente indispensabili per la maggior parte delle applicazioni presenti in App Store. Oggi vedremo, con un esempio pratico, come creare una Table View, come popolarla con i nostri dati e come personalizzare e sfruttare alcune proprietà offerte da questo tipo di oggetto. Creeremo quindi una tabella raggruppata e divisa in sezioni in modo da offrirvi una prima panoramica abbastanza ampia su questo argomento.

Iniziamo con il nostro tutorial. Apriamo Xcode e creiamo un nuovo progetto. Dall’elenco dei template disponibili scegliamo “Navigation-based Application” e proseguiamo. Diamo un nome al nostro progetto, ad esempio “myTable”, scegliamo la posizione dove salvare e proseguiamo. In realtà, inconsapevolmente, abbiamo già creato la nostra tabella, lavoro svolto automaticamente da Xcode grazie al template “Navigation-based” che ci fornisce un’interfaccia utente già configurata con un navigation controller pronto a mostrare una lista di oggetti (ovvero i dati della nostra tabella che andremo ad inserire a breve). Apriamo il file RootViewController.h e andiamo a dichiarare gli elementi che ci serviranno nel nostro progetto:

@interface RootViewController : UITableViewController {
 
	NSMutableArray *listaOggetti;
	NSMutableArray *listaDettaglioOggetti;
}
 
@end

Non abbiamo fatto altro che dichiarare due oggetti di tipo NSMutableArray chiamati rispettivamente listaOggetti e listaDettaglioOggetti. In listaOggetti memorizzeremo gli elementi della nostra tabella, mentre dentro listaDettaglioOggetti ci saranno i sottotitoli di ogni elemento della tabella stessa.

Salviamo e passiamo al relativo file di implementazione RootViewController.m modificando il codice come segue. Iniziamo dal metodo viewDidLoad:

- (void)viewDidLoad {
    [super viewDidLoad];
 
	listaOggetti = [[NSMutableArray alloc] init];
 
	NSArray *arrayAnimali = [NSArray arrayWithObjects:@"Cane", @"Gatto", @"Coniglio", @"Criceto", @"Cavallo", nil];
	NSDictionary *dictAnimali = [NSDictionary dictionaryWithObject:arrayAnimali forKey:@"Elementi"];
 
	NSArray *arrayOggetti = [NSArray arrayWithObjects:@"Armadio", @"Pentola", @"Ruota", @"iPhone", nil];
	NSDictionary *dictOggetti = [NSDictionary dictionaryWithObject:arrayOggetti forKey:@"Elementi"];
 
	NSArray *arrayNomi = [NSArray arrayWithObjects:@"Mario", @"Nicole", @"Simona", @"Daniel", @"Francesco", nil];
	NSDictionary *dictNomi = [NSDictionary dictionaryWithObject:arrayNomi forKey:@"Elementi"];
 
	[listaOggetti addObject:dictAnimali];
	[listaOggetti addObject:dictOggetti];
	[listaOggetti addObject:dictNomi];	
 
	listaDettaglioOggetti = [[NSMutableArray alloc] init];
 
	NSArray *arrayDettaglioAnimali = [NSArray arrayWithObjects:@"Animale 1", @"Animale 2", @"Animale 3", @"Animale 4", @"Animale 5", nil];
	NSDictionary *dictDettaglioAnimali = [NSDictionary dictionaryWithObject:arrayDettaglioAnimali forKey:@"dettaglioElementi"];
 
	NSArray *arrayDettaglioOggetti = [NSArray arrayWithObjects:@"Oggetto 1", @"Oggetto 2", @"Oggetto 3", @"Oggetto 4", nil];
	NSDictionary *dictDettaglioOggetti = [NSDictionary dictionaryWithObject:arrayDettaglioOggetti forKey:@"dettaglioElementi"];
 
	NSArray *arrayDettaglioNomi = [NSArray arrayWithObjects:@"Nome 1", @"Nome 2", @"Nome 3", @"Nome 4", @"Nome 5", nil];
	NSDictionary *dictDettaglioNomi = [NSDictionary dictionaryWithObject:arrayDettaglioNomi forKey:@"dettaglioElementi"];
 
	[listaDettaglioOggetti addObject:dictDettaglioAnimali];
	[listaDettaglioOggetti addObject:dictDettaglioOggetti];
	[listaDettaglioOggetti addObject:dictDettaglioNomi];
 
	self.navigationItem.title = @"T#020 - TableView in sezioni";
}

In questo modo non facciamo altro che sfruttare gli oggetti NSArray e NSDictionary per memorizzare i nostri dati (con “dettaglio” intendiamo i sottotitoli) che verranno poi mostrati e organizzati a dovere nella nostra tabella. Con l’ultima istruzione “self.navigationItem.title = @”T#020 – TableView in sezioni”;” settiamo semplicemente il titolo mostrato nella barra di navigazione in alto nella view.

Impostiamo il metodo numberOfSectionsInTableView facendo calcolare automaticamente al programma il numero di sezioni della tabella tramite listaOggetti:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return [listaOggetti count];
}

Impostiamo quindi il numero di righe nelle sezioni della tabella:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
	NSDictionary *dictionary = [listaOggetti objectAtIndex:section];
	NSArray *array = [dictionary objectForKey:@"Elementi"];
	return [array count];
}

Inseriamo ora due metodi che serviranno a mostrare il titolo nell’header e il testo nel footer di ogni sezione:

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
	switch (section) {
		case 0:
			return @"Animali";
			break;
		case 1:
			return @"Oggetti";
			break;
		case 2:
			return @"Nomi";
			break;
		default:
			return nil;
			break;
	}
}
 
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
	switch (section) {
		case 0:
			return @"Footer Sezione Animali";
			break;
		case 1:
			return @"Footer Sezione Oggetti";
			break;
		case 2:
			return @"Footer Sezione Nomi";
			break;
		default:
			return nil;
			break;
	}
}

Impostiamo ora l’altezza delle nostre celle tramite il metodo heightForRowAtIndexPath:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
	return 50;
}

Anche se per questo tutorial è totalmente inutile vediamo come impostare un accessorio “tipo” per le tabelle, il DisclosureIndicator (ovvero la “freccettina a destra” utile per indicare all’utente che cliccando su una voce con questo accessorio si aprirà un’altra vista):

- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath {	
	return UITableViewCellAccessoryDisclosureIndicator;
}

Questo è solo uno degli accessori disponibili, vedremo nei futuri tutorial come impostare gli altri tipi disponibili e come arrivare ad implementare un’eventuale ulteriore vista di dettaglio in base a selezione di una specifica riga della tabella da parte dell’utente.

Vediamo ora il metodo vero e proprio che useremo per riempire la tabella:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
		cell.selectionStyle = UITableViewCellStyleSubtitle;
	}
 
	// Configure the cell.
 
	NSDictionary *dictionary = [listaOggetti objectAtIndex:indexPath.section];
	NSArray *array = [dictionary objectForKey:@"Elementi"];
	NSString *cellValue = [array objectAtIndex:indexPath.row];
 
	NSDictionary *dettaglioDictionary = [listaDettaglioOggetti objectAtIndex:indexPath.section];
	NSArray *dettaglioArray = [dettaglioDictionary objectForKey:@"dettaglioElementi"];
	NSString *dettaglioCellValue = [dettaglioArray objectAtIndex:indexPath.row];
 
	cell.textLabel.text = cellValue;
	cell.detailTextLabel.text = dettaglioCellValue;
	cell.backgroundColor = [UIColor whiteColor];
	cell.selectionStyle = UITableViewCellSelectionStyleBlue;
 
	NSString *nomeImmagine = [NSString stringWithFormat:@"logo.png"];
	[[cell imageView] setImage:[UIImage imageNamed:nomeImmagine]];
 
    return cell;
}

Come vedete abbiamo inizializzato la tabella in modo che la struttura sia quella con i sottotitoli tramite le istruzioni “initWithStyle:UITableViewCellStyleSubtitle” e “cell.selectionStyle = UITableViewCellStyleSubtitle;“.

Dopodichè utilizziamo due oggetti di tipo NSString per memorizzare nel primo i nostri elementi (prelevati da listaOggetti) e nel secondo i rispettivi sottotitoli (presi da listaDettaglioOggetti) che mostreremo poi nella tabella, tramite le proprietà text di textLabel e detailTextLabel delle celle.

Impostiamo quindi il colore di sfondo delle celle e il loro stile durante la selezione (nel nostro caso verranno evidenziate in blu quando l’utente ne selezionerà una).

Le ultime due istruzioni prima di ritornare la nostra cella servono ad inserire un’immagine sulla sinistra. In questo semplice tutorial abbiamo immesso un’unica immagine valida per ogni cella, ma nulla ci vieta di averne una diversa per ogni riga della tabella, vedremo anche questo con uno dei prossimi tutorial.

Come ultima cosa non dimentichiamoci di effettuare un release di listaOggetti e di listaDettaglioOggetti al fine di liberare la memoria utilizzata dal programma nel nostro dispositivo:

- (void)dealloc {
	[listaOggetti release];
	[listaDettaglioOggetti release];
        [super dealloc];
}

Con il codice è tutto, salvate e avviate tramite “Build & Go” l’applicazione nel simulatore o direttamente nel vostro iPhone. Quello che otterrete è qualcosa di simile a quanto mostrato in figura qui sotto. Una tabella divisa per sezioni ti tipo “Plain”, non ancora divisa quindi in raggruppamenti.

Per modificare la struttura della tabella da “Plain” a “Grouped” dobbiamo semplicemente aprire il file “RootViewController.xib” emodificare la proprietà “Styles” negli “Attributes”:

Si può quindi salvare, chiudere Interface Builder e ricompilare ed eseguire l’applicazione per ottenere questo risultato:

Come vedete siamo stati in grado di definire via codice sia elementi relativi all’aspetto grafico della nostra tabella, che ovviamente tutto ciò che concerne i dati rappresentati da essa. Abbiamo usato oggetti diversi, come NSArray, NSDictionary e NSString per il caricamento dei dati nelle tabelle, ovviamente questo è solo un esempio, potevate tranquillamente usare semplici array come potete prelevare dati da un database o da un sito web, con tecniche appena più complesse che vedremo più avanti.

Approfondiremo con i prossimi tutorial altri aspetti legati all’utilissimo e interessantissimo mondo delle tabelle