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.
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.
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).
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 😀
Alla prossima 🙂
15 Responses to “T#015 – Celle personalizzate per le nostre Table”
7 Dicembre 2009
MatthewCiao,
questo è proprio il tutorial che stavo cercando! Potresti per caso dirmi come si può settare il titolo di una cella in base a ciò che viene scritto in un textfield di un’altra xib?
Complicato vero?
Spero in una vostra risposta! Grazie…
Matthew
7 Dicembre 2009
Antonioper favore inserisci le immagini
8 Dicembre 2009
aifonzComDove fai l’init della cella ?
Io normalmente uso initWithStyle:reuseIdentifier per allocare la cella.
Se sostituisco in cellForRowAtIndexPath il tuo codice la cella non mi viene inizializzata.
Scusa, sicuramente sbaglio qualcosa, ma sono alle prime armi …
8 Dicembre 2009
Luigi MarinoQuanto prima le uppo 😀
9 Dicembre 2009
aifonzComHo risolto. L’errore era nell’xib, ho assegnato la classe al File’s Owner e nel Referencing Outlets della cella ho collegato la “cellapersonalizzata”.
9 Dicembre 2009
LuigiMi hai preceduto…proprio stamattina creando le immagini mi sono accorto della mancanza….scusate e correggo subito 😀
8 Marzo 2010
TIPS#005 – Personalizziamo le celle in base alla loro posizione | devAPP[…] visto nel nostro tutorial numero 15 come personalizzare le celle di una tabella. Ma se volessimo personalizzarle in modo differente, ad […]
7 Maggio 2010
zoodanyCiao, come posso fare se volessi modificare il contenuto di una delle label quando la cella viene selezionata?
Grazie, ciao.
6 Settembre 2010
iPhone Menper inserire le immagini??????……
17 Marzo 2011
AndreaCIao a tutti. Ho seguito passo passo il tutorial, (ho messo una immagine e due labels) ma ottengo un effetto strano. La custom cell viene visualizzata “sopra” le celle originarie e non viene sostituita ad esse. Nel mio caso la custom è alta 80 (invece che 44), ma le celle nella tabella rimangono alte 44 visualizzando così solo una parte della custom cell alta 80. Avete qualche idea di dove posso sbagliare?
Grazie mille,
Andrea
19 Marzo 2011
ValerioCiao a tutti,
ma se io volessi utilizzare questa stessa cella per personalizzare la tabella in un altro viewcontroller come dovrei procedere? Impostando il File’s Owner la cella rimane legata a quell’unico file, o sbaglio? Non dovrò mica ricreare un’altra cella identica e legarla al secondo view controller che ho creato…
Grazie mille
Valerio
4 Maggio 2011
CesareCome si può inserire una cella personalizzata ad ogni elemento?
9 Maggio 2011
AlessandroCiao a tutti,
ho seguito il tutorial e credo di aver fatto tutti gli step necessari, ma quando avvio la mia applicazione il contenuto della cella personalizzata (2 labels) non cambia.
Ho seguito in debug il programma e ho notato che gli oggetti UILabel sono NULL, sapete il motivo?
1 Gennaio 2012
FranzDevOttimo tutorial.
Però secondo me la dichiarazione:
“IBOutlet UITableViewCell *cellapersonalizzata”
va messa prima di utilizzare “cellapersonalizzata” nell’IB ( vedi terza immagine).
Io ho invertito gli step e tutto ha funzionato.
Molto utile. grazie.
12 Giugno 2012
Massimilianosi puo risalire all’indexPath utilizzato ‘?