Le Table Views sono oggetti molto comuni e usati all’interno delle interfacce grafiche delle applicazioni per iPhone. Vista la loro versatilità, possono essere adottati nelle applicazioni per diversi scopi. Questa lezione illustrerà le parti, le caratteristiche e gli stili delle Table View dal punto di vista sia funzionale che di programmazione, illustrando man mano i diversi contesti in cui vengono usati.
Caratteristiche delle Table Views
Una Table View principalmente è un elenco a scorrimento verticale di oggetti. E’ costituito da una sola colonna, quindi è praticamente una lista che si puo’, come detto, scorrere solo verticalmente. Nella pratica le Table View possono essere usate per svariati scopi le, ad esempio:
- Per permettere agli utenti di navigare attraverso dei dati strutturati gerarchicamente
- Per presentare ua lista di opzioni selezionabili
- Per presentare una lista di oggetti ordinati
- Per mostrare diverse informazioni in sezioni graficamente distinte tramite raggruppamenti
Una Table View è costituita semplicemente di righe divise in sezioni. Ogni sezione puo’ avere un’intestazione (header) e un piede (footer) che puo’ essere personalizzato con testo o un’immagine. Tuttavia, è ovviamente possibile creare una table view con un’unica sezione e “senza” header e footer. A livello di programmazione, l’UIKit permette di identificare le righe e le sezioni attraverso un indice: le sezioni sono numerate da 0 a n-1 dall’inizio della Table View (in alto), alla fine (in basso); le righe sono numerate anch’esse da 0 a n-1, proprio allo stesso modo. Una table view può inoltre avere un proprio header e footer, distinto per ogni sezione; l’header della tabella è posizionato prima della prima riga della prima sezione, allo stesso modo il footer della tabella appare dopo l’ultima riga dell’ultima sezione.
Le righe visibili di una table view sono composte di celle (cell), che mostrano testo, immagini, o altri tipi di contenuto. Le celle possono inoltre includere degli accessori, spesso dei controlli. Esistono tre tipi standard di questi accessori:
![]() |
Disclosure indicator |
![]() |
Detail disclosure button |
![]() |
Check mark |
Al posto degli accessori standard, è inoltre possibile utilizzare un classico controllo (come uno switch) o uno personalizzato.
Le Table View possono entrare nella modalità di modifica, dove l’utente puo’ inserire, eliminare o riposizionare le righe nella tabella. Quando si è in modalità modifica compare un simbolo grafico vicino al bordo sinistro della riga. Questo puo’ essere verde, nel caso in cui si voglia inserire un nuovo elemento, e quindi una riga, o rosso nel caso che si voglia invece eliminare un elemento della lista. Se l’utente tocca il controllo per eliminare la riga, o in alcuni casi striscia il dito lungo la riga, un pulsante rosso “Cancella” appare all’utente. Le righe che possono essere riposizionate hanno invece, vicino al bordo destro, un’immagine formata da alcune righe orizzontali. Quando si esce dalla modalità di modifica della Table View, i controlli di inserimento, cancellazione e riordino riga spariscono.
Stili differenti di Table View
Esistono due principali stili per le table views. Nel primo caso, “plain-style”, le righe sono in un unico elenco, possono avere una o più sezioni e le sezioni possono avere al loro interno una o più righe. Ogni sezione puo’ avere il suo header o footer.

Una alternativa di questo tipo di Table Views associa un indice alle sezioni, per una navigazione più veloce tra gli elementi. Questa si chiama lista indicizzata. Vi è lungo il bordo destro della tabella un elemento con tutti gli indici che corrispondono agli header delle sezioni.

Altro esempio è la selection (o radio) list. Una selection list è una table view plain-style che presenta un menu con elementi che l’utente puo’ selezionare. E’ possibile limitare la selezione ad una riga o permettere una selezione multipla. Una selection list mostra la riga selezionata tramite un segno di spunta.

Il secondo stile principale con cui si puo’ configurare una Table View è definito tramite dei raggruppamenti in sezioni visivamente distinte. Un esempio pratico dell’uso di questo stile puo’ essere rappresentato dall’applicazione nativa contatti, dove le informazioni di un contatto sono divise, anche se appartenenti allo stesso elemento, in numeri di telefono, indirizzi e-mail, indirizzi vari ecc.

Gli header e footer delle sezioni nelle Table View raggruppate hanno posizioni e dimensioni come indicato nella prossima figura:

Stili standard per le Table View Cell
Oltre ai due principali stili con cui si possono creare le Table View, esistono 4 tipi standard che definiscono il tipo di cella. Questi differenziano tra loro dalla presenza o meno di un sottotitolo e l’eventuale sua posizione. A livello di programmazione vengono definiti tramite le seguenti costanti:
- UITableViewCellStyleDefault
- UITableViewCellStyleValue1
- UITableViewCellStyleValue2
- UITableViewCellStyleSubtitle
Le seguenti immagini chiariranno facilmente le differenze tra queste tipologie di Table View Cell.
UITableViewCellStyleDefault
Nel caso della UITableViewCellStyleDefault non vi è alcun sottotitolo.
UITableViewCellStyleSubtitle
Usate UITableViewCellStyleSubtitle quando volete un sottotitolo subito sotto l’elemento.
UITableViewCellStyleValue1
Nel caso di UITableViewCellStyleValue1 i sottotitoli sono posizionati alla destra degli elementi.
UITableViewCellStyleValue2
Infine, nel caso di UITableViewCellStyleValue2, i sottotitoli vengono sempre posizionati alla destra dell’elemento, ma secondo una diversa impostazione grafica.












3 Responses to “L#005 – Table Views”
6 Gennaio 2010
T#020 – Creiamo Table View raggruppate e divise in sezioni | devAPP[…] ad oggi abbiamo parlato e illustrato solo teoricamente cosa sono e come si possono personalizzare le Table View, strumenti utili e […]
29 Gennaio 2010
LucaA me piace la UITableWiewCellStyleSubtitle 🙂
12 Luglio 2011
MaveDevGrazie per l’interessante articolo, voto anche io per la “UITableWiewCellStyleSubtitle” 🙂