{"id":8184,"date":"2011-12-20T16:09:37","date_gmt":"2011-12-20T15:09:37","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=8184"},"modified":"2012-01-23T13:42:07","modified_gmt":"2012-01-23T12:42:07","slug":"9-objective-c-uitableview","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/9-objective-c-uitableview\/","title":{"rendered":"9. Objective-C: UITableView (parte 1)"},"content":{"rendered":"

Quando \u00e8 necessario mostrare una serie di elementi, rendendo possibile la selezione di uno di essi per una successiva “sotto lista” da visualizzare, \u00e8 necessario ricorrere all’oggetto UITableView<\/strong>. <\/p>\n

UITableView \u00e8 responsabile della visualizzazione della lista di elementi a schermo, mentre la navigazione tra le liste di elementi visualizzate viene gestita da UINavigationController. Entrambi gli oggetti cooperano per ottenere l’effetto tipico delle applicazioni iPhone:<\/p>\n


\n\"Objective-C-UITableView-01\"<\/a>
\n<\/center><\/p>\n

Creiamo un nuovo progetto, selezionando come template Window-based Application ed effettuando tutte le operazioni descritte in precedenza per ottenere un’applicativo base. Aggiungiamo, quindi una nuova classe controllore, denominata: MyTableViewController. Assicuratevi che l’opzione “With XIB for userinterface” sia disabilitata. <\/p>\n


\n\"Objective-C-UITableView-02\"<\/a>
\n<\/center><\/p>\n

Data Source<\/h4>\n

Dal momento che vogliamo mostrare una lista di elementi all’interno della nostra nuova table view, abbiamo bisogno di una qualche forma di “sorgente dati” responsabile del mantenimento dei nostri dati e capace di fornire questi valori alla table view. La sorgente di dati puo’ essere di qualsiasi forma: XML, Databases, Array. Per i nostri esempi, ci baseremo su sorgenti di dati riconducibili alla classe NSMutableArray<\/strong>. Quest’ultimo, infatti, puo’ essere riempito con dati provenienti da svariate sorgenti (Internet URL, Databases, XML Files). <\/p>\n

La prima cosa da fare e’ costruire una sorgente dati e popolarla con gli elementi che dobbiamo mostrare a schermo. Ci verra’ in aiuto un nuovo metodo, presente in tutte gli oggetti che ereditano da UIViewController: viewDidLoad<\/strong>. Questo metodo viene invocato non appena la property view della nostra classe viene caricata in memoria. <\/p>\n


\n\"Objective-C-UITableView-03\"<\/a>
\n<\/center><\/p>\n

L’array aggiunto tra le variabili di interfaccia verra’ allocato dal metodo anticipato sopra e verra’ distrutto in fase di deallocazione dell’oggetto. All’interno del metodo viewDidLoad, inoltre, verranno caricati dei semplici elementi da visualizzare successivamente. <\/p>\n


\n\"Objective-C-UITableView-04\"<\/a>
\n<\/center><\/p>\n


\n\"Objective-C-UITableView-05\"<\/a>
\n<\/center><\/p>\n

Configurare il numero di righe nella nostra tableView<\/h4>\n

La prima cosa da fare, visto che stiamo dialogando con un oggetto che deve mostrare un numero prestabilito di elementi, e’ fornire il numero di elementi da mostrare. Quest’operazione viene effettuata invocando il metodo tableView:numberOfRowsInSection<\/strong>. Il metodo ritorna un intero che indica il numero di righe (elementi) presenti nella nostra sorgente di dati. Visto che la nostra sorgente di dati e’ un array, possiamo ritornare il numero di elementi presenti nell’array. <\/p>\n


\n\"Objective-C-UITableView-06\"<\/a>
\n<\/center><\/p>\n

La funzione autogenerata per noi dal template ritorna un intero pari a zero. Questo comportamento verra’ sostituito dalla nostra nuova istruzione che conta il numero di elementi presenti nell’array creato precedentemente. <\/p>\n

Mostrare i nostri dati<\/h4>\n

Adesso e’ possibile mostrare i nostri dati a schermo. La table view conosce il numero di elementi da visualizzare ed abbiamo una sorgente di dati (NSMutableArray) pronta a fornire gli elementi richiesti. Quello che serve, quindi, e’ un metodo che “chieda” le informazioni corrette. <\/p>\n


\n\"Objective-C-UITableView-07\"<\/a>
\n<\/center><\/p>\n

Quest’operazione viene effettuata dal metodo tableView:cellForRowAtIndexPath<\/strong>. Esso viene chiamato n volte; tante quanti sono gli elementi da visualizzare. Ogni volta, viene passato un parametro indexPath diverso. Attraverso il parametro indexPath, possiamo ottenere il numero della riga corrente da visualizzare. Il template genera per noi uno scheletro perfetto per il nostro scopo. L’unica cosa che dovremo modificare sara’ la riga responsabile della visualizzazione del nostro dato a schermo. <\/p>\n


\n\"Objective-C-UITableView-08\"<\/a>
\n<\/center><\/p>\n

Creazione di una vista di dettaglio<\/h4>\n

Aggiungiamo una classe UIView<\/strong> al nostro progetto e chiamiamola DetailView<\/strong>. <\/p>\n


\n\"Objective-C-UITableView-09\"<\/a>
\n<\/center><\/p>\n

Aggiungiamo adesso un controllore per questa nuova view e chiamiamolo DetailViewController<\/strong>. <\/p>\n


\n\"Objective-C-UITableView-10\"<\/a>
\n<\/center><\/p>\n

I dati che verranno mostrati dalla nostra view, dipendono da quelli che abbiamo disponibili e da quelli che vogliamo realmente mostrare all’utente. Per il nostro esempio, sara’ sufficiente aggiungere un campo di testo, contenente il nome della nazione selezionata. <\/p>\n


\n\"Objective-C-UITableView-11\"<\/a>
\n<\/center><\/p>\n

Nota come la variabile countryName sia stata configurata con un setter ed un getter automatici. Questo ci permettera’ di rendere piu’ agevole (e leggibile) il nostro codice piu’ avanti. <\/p>\n

La parte implementativa si occupa semplicemente di inizializzare e mostrare correttamente a schermo l’oggetto UILabel e la sua UIView relativa. <\/p>\n


\n\"Objective-C-UITableView-12\"<\/a>
\n<\/center><\/p>\n

Il nostro oggetto UIViewController, a sua volta, conterra’ un’oggetto di tipo DetailView nella sua dichiarazione d’interfaccia. Anche in questo caso abbiamo creato i metodi di getter e setter in maniera automatica, attraverso l’utilizzo della coppia @property \/ @synthesize. <\/p>\n


\n\"Objective-C-UITableView-13\"<\/a>
\n<\/center><\/p>\n

La parte implementativa si preoccupera’ di creare ed inizializzare correttamente il view controller e gli oggetti ad esso legati (UIView). <\/p>\n


\n\"Objective-C-UITableView-14\"<\/a>
\n<\/center><\/p>\n

Passaggio di dati<\/h4>\n

Per finire, dobbiamo completare il passaggio di dati dalla nostra tableView alla nostra nuova UIViewController e visualizzarne il risultato a schermo. Per fare questo, utilizziamo il metodo tableView:didSelectRowAtIndexPath<\/strong>. Utilizzando la variabile indexPath, selezioniamo la riga appropriata dalla nostra sorgente di dati (NSMutableArray) e passiamo il risultato alla classe DetailView, per aggiornare il valore della sua variabile countryName. <\/p>\n


\n\"Objective-C-UITableView-15\"<\/a>
\n<\/center><\/p>\n

Configurazione della view con accessoryType<\/h4>\n

Adesso la nostra applicazione permette di visualizzare dei risultati selezionando un elemento dalla nostra tabella. Il fatto di avere dati ulteriori da visualizzare, pero’, potrebbe non risultare ovvio all’utente che vede una tabella di valori. E’ possibile aggiungere un’icona indicante il concetto di dati aggiuntivi ad ognuna delle celle della nostra tabella. Per fare questo, e’ necessario modificare il metodo tableView:cellForRowAtIndexPath<\/strong> o aggiungere un nuovo metodo chiamato: tableView:accessoryTypeForRowWithIndexPath<\/strong>. In questo modo, abbiamo la possibilita’ di selezionare (tramite l’indice indexPath), le celle che hanno bisogno o meno di mostrare dati aggiuntivi. <\/p>\n


\n\"Objective-C-UITableView-16\"<\/a>
\n<\/center><\/p>\n

Nota come una delle due linee di return sia commentata. Entrambe le linee sono valide, quello che cambia e’ il valore del DisclosureButton associato. A seconda di quale delle due opzioni utilizziamo, avremo un’icona o un piccolo segno di spunta ad indicare la presenza di un’ulteriore vista. <\/p>\n

L’ultima cosa da fare e’ configurare il titolo della NavigationBar, in maniera da rispecchiare il punto di navigazione in cui ci troviamo. Per fare questo, modifichiamo il metodo loadView<\/strong> della UIViewController che visualizza i dettagli della nostra selezione. <\/p>\n


\n\"Objective-C-UITableView-17\"<\/a>
\n<\/center><\/p>\n

Riferimenti<\/h4>\n