iOS: Sviluppo App iPhone & iPad

Dario Pizzuto

1

Storyboard 3a parte

2

Storyboard

3

Argomenti!

• UITableView!

• UIAlertView!

• UIImageView!

• UITextView!

• UIPickerView

UITableView

4

Storyboard

5

UITableView!

• Oggetto molto usato!

• Versatile!

• Presenta i dati in una lista scorribile

Storyboard

6

UITableView!

• Permette all’utente di navigare facilmente dari gerarchici!

• Permette di presentare una lista di contenuti indicizzati!

• Permette di raggruppare le informazioni !

• Permette la divisione dei dati in sezioni

Storyboard

7

UITableView!

• Lavora unitamente ai Protocols!

✓UITableViewDelegate!

✓UITableViewDataSource!

• Utili per gestire i records e layout grafico della TableView

Storyboard

8

UITableView!

• Esiste un componente pronto all’uso!

✓UITableViewController!

• È possibile gestire una tableView da oggetti non di tipo UITableViewController!

• Conforme ai protocolli UITableViewDataSource e UITableViewDelegate!

• IBoutlet in storyboard e collegamento delegate, data source

Storyboard

9

Esempio UITableView custom

UITableViewCell

Storyboard

10

UITableViewDataSource!

• Protocollo per costruire e modificare tableView!

• Metodi da implementare!

✓ tableView:cellForRowAtIndexPath:!

✓ numberOfSectionsInTableView:!

✓ tableView:numberOfRowsInSection:

Storyboard

11

UITableViewDelegate!

• Protocol per gestire le azioni sui records!

• Selection, edit, delete …!

• Si compone di metodi opzionali!

• Utilizza la classe NSIndexPath

Storyboard

12

NSIndexPath!

• Fornisce il percorso di un determinato nodo all’interno di un albero!

• Utilizzato in TableView sarà utile per conoscere !

✓Section!

✓Row

Storyboard

13

NSIndexPath

Storyboard

14

UITableViewCell!

• Rappresenta la cella della TableView!

• È possibile scegliere il tipo di cella!

• È possibile personalizzarla in ogni suo aspetto attraverso una subclass di UITableViewCell

Storyboard

15

Composizione UITableViewCell

Storyboard

16

UITableViewCell settings

Storyboard

17

UITableViewController Interface

Storyboard

18

UITableViewController Implementation

Storyboard

19

Esempio UITableViewController

Storyboard

20

UITableViewController!

• Classe custom per la gestione della TableView!

• Classe custom per la view di dettaglio !

• Collegare le Views

Storyboard

21

Esempio UITableViewController

Storyboard

22

UITableViewController!

• Per gestire il passaggio di dati è necessario preparare la TableView e la View di destinazione !

• Utilizzare properties adatte a contenere il dato

Storyboard

23

UITableViewController!

• Per gestire il passaggio di dati utilizziamo il metodo!

!

!

UITableViewController!

• Istanziare view di dettaglio!

• Set dati da “trasferire”!

!

!

Storyboard

24

Storyboard

25

UITableViewController editing mode!

• È possibile abilitare la modalità di editing per singola cella o intera tableView !

• Attraverso la editing mode è possibile eliminare o inserire una nuova cella

Storyboard

26

UITableViewController editing mode!

- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {!

…..!

if(….){!

return UITableViewCellEditingStyleInsert;!

} else {!

return UITableViewCellEditingStyleDelete;!

}!

}

Storyboard

27

UITableViewController editing mode!

• È importante aggiornare il modello dati prima di ogni operazione di insert/delete!

• È importante aggiornare la TableView dopo le operazioni di insert/delete!

• Si utilizza il metodo update reloadData:!

• Possibile utilizzare anche i metodi beginUpdates e endUpdates rispettivamente prima e dopo le operazioni di insert/delete

UIAlertView

28

Storyboard

29

UIAlertView!

• Fornisce un sistema di output visuale per l’utente!

• Permette di scatenare azioni a seguito della scelta dell’utente!

• Lavora unitamente al delegate UIAlertViewDelegate

Storyboard

30

UIAlertView!

• Deprecato in iOS 8 in favore di UIAlertController!

• Adesso ingloba anche UIActionSheet per la gestione di menu contestuali contenenti azioni

Storyboard

31

UIAlertView!

• Si compone di 3 elementi!

✓Title!

✓Message!

✓Buttons

Storyboard

32

UIAlertView

Title

Message

Buttons

Storyboard

33

UIAlertView!

• Classe istanziata attraverso metodo initWithTitle:message:delegate:cancelButtonTitle:otherButtonTitles:

Storyboard

34

UIAlertView!

• È possibile mostrare alert attraverso metodo show

Storyboard

35

Esempio UIAlertView!UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Test" message:@"Hello World" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];!

[alert show];

Storyboard

36

UIAlertView

Storyboard

37

UIAlertView!

• Impostiamo delegate se è necessario gestire azioni a partire dall’input utente!

• E.G.!

✓Salvataggio dati imputati!

✓Azioni di cambio view dopo “Ok” o “Annulla”!

✓…

Storyboard

38

UIAlertView!

• Per catturare le azioni dell’utente è necessario che la classe sia conforme al protocol UIAlertViewDelegate!

• Implementare metodo opzionale dismissWithClickedButtonIndex:animated:

UIImageView

39

Storyboard

40

UIImageView!

• Oggetto che ci permette di visualizzare un’immagine o una serie di immagini generando un’animazione!

• Possibile subclass per personalizzare ogni aspetto del componente!

• Disponibile nello storyboard

Storyboard

41

UIImageView

Storyboard

42

UIImageView!

• Può essere inizializzata attraverso il metodo initWithImage:!

• È necessario impostare un’immagine all’interno del progetto

Storyboard

43

Images.xcassets!

• Libreria per la gestione degli oggetti multimediali importati nel progetto!

• Utile per gestire in modo semplice le immagini!

• Possibile Drag&Drop delle immagini!

• Viene effettuata una copia locale del file, non reference al file

Storyboard

44

Images.xcassets

Storyboard

45

Images.xcassets

Storyboard

46

Esempio UIImageView

UITextView

47

Storyboard

48

UITextView!

• Componente per la visualizzazione e input di testo!

• Scrollable!

• Stile, colori, font, personalizzabili!

• Lavora unitamente al delegate UITextViewDelegate!

• Se lo utilizziamo da storyboard è necessario collegamento delegate

Storyboard

49

UITextViewDelegate!

• Metodi uso ricorrente!

✓ textViewDidBeginEditing !

✓ textViewDidEndEditing !

✓ textViewShouldEndEditing!

✓ shouldChangeTextInRange

Storyboard

50

UITextViewDelegate - textViewDidBeginEditing!

• Metodo chiamato quando l’utente inizia l’editing nella textView

Storyboard

51

UITextViewDelegate - textViewDidEndEditing!

• Metodo chiamato quando l’utente conclude l’editing nella textView!

• Ultima chiamata del delegate prima di “chiudere” le operazioni sull’oggetto

Storyboard

52

UITextViewDelegate - textViewShouldEndEditing!

• Metodo chiamato quando l’utente sta per concludere l’editing nella textView e muove il focus ad un altro componente

Storyboard

53

UITextViewDelegate - shouldChangeTextInRange!

• Metodo chiamato ogni qual volta l’utente inserisce un carattere nella textView

Storyboard

54

UITextView

Storyboard

55

UITextView

TextView

UIPickerView

56

Storyboard

57

UIPickerView!

• Componente di scelta attraverso visualizzazione a “slot-machine”!

• Possibile mostrare più slot di selezione!

• Es. scelta della data

Storyboard

58

UIPickerView

Single component Picker

Date Picker

Storyboard

59

UIPickerView!

• Si compone di 2 oggetti!

✓Component!

✓Row

Storyboard

60

UIPickerView Components

Rows

Storyboard

61

UIPickerView!

• Lavora con i protocols!

✓UIPickerViewDelegate!

✓UIPickerViewDataSource

Storyboard

62

UIPickerViewDelegate!

• Usato per configurare l’appereance della Picker!

• Metodo pickerView:didSelectRow:inComponent: invocato quando l’utente effettua la selezione sulla picker

Storyboard

63

UIPickerViewDataSource!

• Usato per configurare i valori delle rows della picker!

✓numberOfComponentsInPickerView: stabilisce il numero di componenti della picker!

✓pickerView:numberOfRowsInComponent: stabilisce il numero delle rows del singolo componente

Storyboard

64

UIPickerView storyboard

Storyboard

65

UIPickerView storyboard

Storyboard

66

UIPickerView!

• Possibile presentare la picker a seguito di input su textField o altri oggetti!

• In tal caso è necessario personalizzare la inputView della textField ed inserire il codice di creazione della picker nel metodo textFieldShouldBeginEditing!

• La classe deve contenere i metodi di data source e delegate per configurare correttamente la Picker

Let’s Code

67

Storyboard

68

Let’s Code!

✦ Implementare una TableView con layout celle e dati a scelta e visualizzazione dati in View successiva

Storyboard

69

Ulteriori approfondimenti!

TableView programming guide!

UIAlertView!

UIImageView!

UITextView!

Picker Views

Domande ?

70