Table View. Problemi ricorrenti Una situazione ricorrente è quella in cui il controller potrebbe avere un’altezza superiore a quella dello schermo. In.

Presentazione sul tema: "Table View. Problemi ricorrenti Una situazione ricorrente è quella in cui il controller potrebbe avere un’altezza superiore a quella dello schermo. In."— Transcript della presentazione:

1 Table View

2 Problemi ricorrenti Una situazione ricorrente è quella in cui il controller potrebbe avere un’altezza superiore a quella dello schermo. In questo caso è buona norma fornire all’utente la possibilità di scorrere verticalmente i contenuti: Elenchi potenzialmente infiniti (Es: contatti) Form di inserimento con numerosi campi di input Elementi contenenti testi descrittivi di dimensione variabile

3 Table View Il sistema ci offre un componente in grado di risolvere automaticamente tali problematiche: la TableView. Abilita/disabilita automaticamente lo scorrimento quando necessario (se l’altezza effettiva è inferiore a quella dello schermo la view non scorre). Gestisce i layout tramite una sequenza di celle (righe), che possono avere strutture totalmente differenti le une dalle altre. Può essere suddivisa in più sezioni, ciascuna con un eventuale header o footer. Dalla versione 8.0 è possibile utilizzare celle che adattano automaticamente la propria altezza in base al contenuto.

4 Table View Per definire il layout di una TableView abbiamo due alternative: Celle statiche : Il numero di sezioni e celle è fisso, così come le informazioni per ciascuna cella, quindi il layout sarà sempre lo stesso. Celle dinamiche : Non è noto a priori quante sezioni e quante celle per ciascuna sezione dovranno essere mostrate, così come le informazioni che conterranno.

5 Table View La TableView offre un gran numero di proprietà: Celle statiche o dinamiche Layout delle sezioni e del separatore delle celle. Numero di celle che possono essere selezionate Proprietà ereditate dalla ScrollView (ad esempio gli effetti di rimbalzo, ecc)

6 Celle statiche Per definire un layout statico per la TableView, è sufficiente applicare nello storyboard le seguenti impostazioni: Selezionare, nelle proprietà Content della TableView, il valore Static Cells. Selezionare il numero di sezioni e configurarle (Impostando header/footer) Configurare le singole celle. Gestire tramite delegate gli eventi di selezione

7 TableViewController Le celle statiche possono essere utilizzate solamente all’interno di un TableViewController. Si tratta di una speciale sottoclasse di ViewController: La root view è sempre una TableView Il controller è di default già impostato come Data Source e Delegate della TableView Estremamente vincolante e per tale motivo scarsamente usato nella pratica

8 TableView dinamiche : Data Source e Delegate Oltre ad un delegate per gestire gli eventi che vengono scatenati (es: selezione di una cella) è necessario definire anche un data source, cioè una sorgente dati in grado di definire quali informazioni visualizzare e come. Delegate : https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView Delegate_Protocol/ Delegate : https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView Delegate_Protocol/ Data Source : https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITableView DataSource_Protocol/

9 TableView dinamiche : Data Source e Delegate Generalmente il ViewController contenente la TableView funge sia da DataSource che da Delegate. I principali metodi di cui fare l’override sono: numberOfSectionsInTableView(tableView) -> Int : restituisce il numero di sezioni in cui sono suddivise le celle tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int : deve restituire il numero di celle che compongono la sezione di indice [section].

10 TableView dinamiche : Data Source e Delegate tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell : restituisce la view relativa alla cella nella posizione corrispondente all’indexPath passato come parametro. L’index path è semplicemente la coppia indice sezione – indice cella. tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat : restituisce l’altezza della cella.

11 TableView dinamiche : Data Source e Delegate tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) : invocato quando l’utente fa tap sulla cella nella posizione specificata dall’indexPath.

12 IndexPath L’indexPath è un oggetto che rappresenta la posizione di una determinata cella nella TableView. Ha due proprietà principali: section : la sezione in cui si trova la cella row : la riga all’interno della sezione

13 Associare un layout ad una cella Per definire il layout che la cella di sezione X, riga Y dovrà avere, è necessario effettuare le seguenti operazioni: Creare una nuova classe che erediti da UITableViewCell Nello storyboard Aggiungere alla TableView una nuova TableViewCell Definire il layout della cella, aggiungendo e disponendo le varie view Assegnare alla cella un identificatore univoco (figura a lato) Assegnare la cella alla classe appena creata e creare gli eventuali outlets

14 Associare un layout ad una cella All’interno del metodo cellForRowAtIndexPath, è necessario recuperare il layout appena definito ed inserire le informazioni nelle rispettive view. Il metodo della TableView dequeueReusableCellWithIdentifier restituisce la cella associata all’id passato come parametro. Una volta ottenuto il riferimento a tale cella è possibile utilizzare gli outlet per mostrare le informazioni all’utente

15 Aggiungere un header alla sezione Ogni sezione può avere un intestazione (header) che fornisca all’utente indicazione del tipo di informazione contenuta. 2 metodi: tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? Restituisce il titolo della sezione. Sarà utilizzato il layout di default di iOS. tableView(tableView: UITableView, viewForHeaderInSection section: Int) - > UIView? Restituisce una view che funge da header. Consente di personalizzare completamente il layout. Può essere utilizzato in maniera analoga al metodo celForRowAtIndexPath. Oltre agli header è possibile aggiungere dei footer : i metodi per la gestione sono gli stessi.