Dopo un periodo di assenza, rieccoci con un tutorial dei DevTutorial! Purtroppo in questi ultimi tempi sia per gli impegni personali, che per la nuova versione di iSpazio non siamo riusciti ad offrire il consueto appuntamento con i tutorial sulla programmazione per iPhone, quindi scusateci. Quella di oggi è la prima parte di un grosso capitolo che riguarda la creazione e la gestione di UITableView, ovvero le tabelle (per intenderci, come quella in cui visualizzate i vostro contatti). Vedremo come crearla e come gestire la configurazione base. Nei successivi tutorial, invece, amplieremo le funzionalità, sino ad estenderle alla ricerca all’interno della tabella stessa. Quindi, tornate spesso a trovarci per nuovi tutorial!

1. Creiamo un nuovo progetto

Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “Navigation-based Application”, clicchiamo su “Choose…” e immettiamo come nome “tableViewTutorial” e fate 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 nella 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:

Abbiamo definito un array 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 iniziamo inseriamo queste istruzioni:

Analizziamo quello che abbiamo appena scritto. Chi ha già un pochino 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, che apparirà nella NavigationBar presente nella vista. Dopo viene inizializzata la lista (che è un oggetto NSMutableArray), inserendoci i vari elementi.

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:

Il primo metodo che incontriamo è “numberOfSectionsInTableView“. Il codice da usare è sempre questo, in tutte le tabelle che creerete. Se provate a modificare questo valore, vedrete che (quando eseguirete l’applicazione) la lista degli oggetti sarà ripetuta più volte. Provare per credere!

Il secondo è “numberOfRowInSection“, e setta 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:

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 sia la numerazione dell’array che delle celle parte da zero).

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

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata creata da Andrea Busi per “iSpazio” e “Bubi Devs“. I meriti, quindi, sono del legittimo autore.

1.347 visite