La Table View è uno degli elementi più utilizzati in iPhone OS. Basti soltanto pensare a due applicazioni di primaria importanza Mail e Contatti che entrambi utilizzano questo potente strumento.

In taluni casi però si ha la necessità di personalizzare le celle della nostra tabella.

Vedremo quindi oggi come personalizzare l’aspetto delle celle della nostra tabella (partiamo quindi dal presupposto che abbiate già una tabella pronta e funzionante con i vostri elementi caricati).

Apriamo il nostro Xcode e creiamo un nuovo NIB (File -> New File -> User Interface -> Empty Xib) denominato CustomCell.

Apriamo il nostro file .xib  e dalla libreria scegliamo il componente Table View Cell.


image1

Inseriremo quindi all’interno di questa cella gli elementi che ci occorrono (nel nostro esempio inseriremo due Text Label ma è possibile inserire qualsiasi elemento come immagini, label, testo e così via).

Selezioniamo ora il File’s Owner del nostro Xib e dal menu accediamo all’Identity Ispector
Inseriamo il nome della nostra classe ( quella dove abbiamo creato l’IBOutlet per intenderci ).
Accediamo ora al Connection Inspector e nel Referencing Outlets colleghiamo cella personalizzata alla nostra Table View Cell.


image3


image4

Una volta completata questa parte chiudiamo il file Xib.

Ritorniamo quindi al codice originario della nostra tabella ed in particolare al file .h
Dichiariamo un elemento UITableViewCell e denominiamolo *cellapersonalizzata
IBOutlet UITableViewCell *cellapersonalizzata;

Accediamo al .m della nostra classe e sostituiamo nel metodo cellForRowAtIndexPath il seguente codice:

if (cell == nil){
	[[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:NULL];
	cell=cellapersonalizzata;
}

In ultima analisi sarà necessario assegnare il valore delle nostre stringhe alle due nuove Label create nello XIB personalizzo.
Accediamo allora al file XIB della nostra cella personalizzata.
Selezioniamo la label e nel Attribute Inspector al campo Tag inseriamo rispettivamente 1 e 2 (per la prima e seconda label).


image2

Ritorniamo al .m della nostra tabella ed inseriamo il seguente codice:

	UILabel *titleLabel = (UILabel *)[cell viewWithTag:1];
	titleLabel.text = [lista objectAtIndex:indexPath.row];
	UILabel *subtitleLabel = (UILabel *)[cell viewWithTag:2];
        subtitleLabel.text = [sottotitolo objectAtIndex:indexPath.row];

Il gioco è fatto :D

Alla prossima :)


AvShop Banner