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:
@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:
#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:
- (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:
// 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!
Se avete problemi con il tutorial, questo è il nostro file di progetto.
25 Responses to “T#039 – Usiamo le UITableView (parte 1): creiamo e popoliamo le nostre tabelle”
7 Maggio 2010
DevTutorial #9 – Come creare una tabella (Parte I) - Bubi Devs[…] Leggi il tutorial completo su devAPP Condividi tweetmeme_url = 'http://www.bubidevs.net/2009/02/02/devtutorial-9-come-creare-una-tabella-parte-i/'; (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); […]
7 Maggio 2010
Luca AulettaSalve ragazzi si potrebbe fare un tutorial su come si imposta un file esterno per popolare le tabelle?
7 Maggio 2010
Andrea Busiciao, certo, prenderemo in considerazione la tua richiesta.. un file esterno però di che genere? XML, CSV?
8 Maggio 2010
MatthewCiao Andrea,
potresti per caso dire come fare per il popolamento di una tabella da internet?
Mi spiego meglio: ho una tabella che appare all’avvio di un’app e che scarica dei dati. Mentre scarica lo scherno dell’iPhone è nero… E’ possibile far in modo che si veda una tabella vuota finche non venga popolata dai file scaricati?
Grazie 😉
10 Maggio 2010
Luca AulettaEsatto, Grazie!
11 Maggio 2010
Usiamo le UITableView: Implementiamo la barra di ricerca | devAPP[…] nell’SDK per iPhone. Negli scorsi tutorial abbiamo visto come creare e popolare una tabella (Parte I) e come aggiungere alcune funzionalità, come la possibilità di editare (nel nostro caso […]
14 Maggio 2010
mentema se ad ogni elemento della tabella volessi assocciare una descrizione che si apre su un altra view come dovrei fare?? grazie
15 Maggio 2010
Staff devAPPNel tutorial successivo puoi vedere come intercettare la cella selezionata dall’utente. Nell’esempio viene mostrata al tocco un’UIAlertView, tu puoi modificare quella parte per mostrare una nuova vista in base alle tue esigenze 😉
http://www.devapp.it/wordpress/t040-usiamo-le-uitableview-parte-2-modifichiamo-le-celle-e-intercettiamone-il-tocco.html
3 Agosto 2010
robya me compare errore qui:
– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
mi dice che non è stata dichiarata prima numberOfSectionsInTableView e quindi non riesco ad andare avanti.. come faccio?!
8 Marzo 2011
Problemi con XIB fileHo un problema. Il mio progetto parte da una view based application. In un UIViewController ho inserito una UITable View. La mia domanda è questa:
Esiste un modo di dire dii metodi classici per la corretta formattazione della tabella, alla mia tabella?
Grazie
21 Marzo 2011
Implementare il "Pull down to refresh" nelle applicazioni iPhone e iPad | devAPP[…] Penso che questi passaggi siano ormai chiari per la maggior parte di voi, quindi non mi soffermo sulle singole istruzioni modificate. Se avete dei dubbi a riguardo leggete i tutorial dedicati alle UITableView. […]
28 Marzo 2011
Andrea Busise la tua tabella ha come delegato la classe UIViewController in questione devi usare gli stessi metodi esposti nel tutorial 😉
28 Marzo 2011
PieroCiao a tutti, volevo sapere come si fa per esempio considerando questo tutorial a cliccare sulla cell iphone per esempio e vedere un’altra tabella per esempio con iphone1 iphone2 iphone3 ecc…? cioè una tabella dentro la tabella…ci sto provando da solo ma sto diventando pazzo…
1 Aprile 2011
barbygirlscusate la domanda, forse banale, ma in teutte le applicazioni in cui si utilizzano le uitableview si parte da un progetto creato con Navigation-based application, ma se io ho già un progetto creato con view.based application come faccio?
1 Aprile 2011
barbygirlaiuto: in un progetto creato con view-based application ho inserito una tableView che devo popolare solo dopo aver fatto una ricerca (quindi non la popolo nel metodo viewDidLoad). Ho inserito il codice dove va popolata la tabella e fin qui tutto bene. L’applicazione funziona, non da errori, ma io vedo la tableview vuota, infatti il metodo cellForRowAtIndexPath non viene mai invocato. Mi sapete dare una soluzione al problema?
12 Aprile 2011
Andrea Busidevi semplicemente fare una nuova vista che contiene una UITableView, e collegare “delegate” e “dataSource” di questa tabella al File’s Owner, nulla di più 😉
dopo che hai caricato i dati hai invocato [tableView reloadData] ?
29 Aprile 2011
FrancescoHo lo stesso problema di barbygirl!.. sto seguendo l’esempio del libro (Sviluppare applicazioni con iPhone SDK) nel quale si creano 2 tableView. La prima funziona ma quando si clicca su un item per passare alla seconda tableView questa appare vuota. COme ha detto barbiegirl non viene eseguito cellForRowAtIndexPath, nemmeno richiamando [tableView reloadData]. per favore potete aiutarmi?
5 Maggio 2011
Andrea Busise non viene nemmeno richiamato il metodo “cellForRowAtIndexPath” controlla che la classe in questione abbia definito il delegato e il dataSource della tabella.
Per intenderci, nel “viewDidLoad” (o nell’init) ci deve essere una cosa del tipo:
tableView.delegate = self;
tableView.dataSource = self;
10 Maggio 2011
MitCiao volevo inserie a ciascun elemnto in tabella un file pdf da caricare dal database del applicazione, come posso fare?
16 Maggio 2011
Andrea Busidovrai crearti una struttura dati (oppure un NSMutableDictionary) in cui specifichi la descrizione che deve apparire nella tabella, e il nome del file pdf che deve essere aperto quando si seleziona una determinata cella..
14 Giugno 2011
MaveDevOttimo anche questo tutorial! 🙂
9 Novembre 2011
astlabScusate, capisco che si deve partire dalle basi…ma a che serve popolare una table view dal codice…sarebbe molto più interessante e utile insegnare come si popola da un json o un plist…da dati dinamici insomma…non trovate?
La cosa strana è che su internet fino ad ora sono riuscito a trovare solo tutorial che popolano hard coded…anzi se qualcuno ne conosce uno che spieghi come interfacciare la table view ad una lista di dati dinamici fatemelo sapere….tks
9 Novembre 2011
astlabtrovato tutorial…
http://www.iphonesdkarticles.com/2008/12/parsing-xml-files.html
9 Novembre 2011
Andrea BusiA cosa serve potremmo discuterne per ore, comunque popolare una tabella da una lista dinamica o da una definita via codice è assolutamente la stessa cosa. Se dobbiamo spiegare qualcosa di basilare non possiamo partire eseguendo un parsing di un file XML oppure leggere dei dati da un server, con tutti i problemi che queste implementazioni poi comportano.
Se ti serviva qualcosa dinamico e legato all’XML era disponibile anche su devAPP: http://www.devapp.it/wordpress/t043-creiamo-il-nostro-lettore-di-feed-rss-per-iphone.html
4 Dicembre 2013
CarmeloCiao, se volessi aggiungere altre colonne nella tabella? tipo 4 colonne per riga?