iOS_Course_11
0 likes399 views
Il documento trattano dello sviluppo di app iOS con particolare attenzione a vari componenti dell'interfaccia utente come UITableView, UIAlertView, UIImageView, UITextView e UIPickerView. Viene discusso come utilizzare questi componenti, i protocolli associati e le modalità di gestione delle interazioni utente, inclusa l'implementazione della modalità di editing e la personalizzazione delle celle. Infine, il documento include anche esempi pratici e approfondimenti per la gestione dei dati e delle visualizzazioni.
![Storyboard
Esempio UIAlertView!
UIAlertView *alert = [[UIAlertView
alloc]initWithTitle:@"Test"
message:@"Hello World"
delegate:nil
cancelButtonTitle:@"Ok"
otherButtonTitles:nil, nil];!
[alert show];
35](https://image.slidesharecdn.com/ioscourse11-141027142728-conversion-gate01/85/iOS_Course_11-35-320.jpg)
iOS_Course_11
- 1. iOS: Sviluppo App iPhone & iPad Dario Pizzuto 1
- 2. Storyboard 3a parte 2
- 3. Storyboard 3 Argomenti! • UITableView! • UIAlertView! • UIImageView! • UITextView! • UIPickerView
- 5. Storyboard UITableView! • Oggetto molto usato! • Versatile! • Presenta i dati in una lista scorribile 5
- 6. Storyboard 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 6
- 7. Storyboard UITableView! • Lavora unitamente ai Protocols! ✓UITableViewDelegate! ✓UITableViewDataSource! • Utili per gestire i records e layout grafico della TableView 7
- 8. 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
- 9. Storyboard Esempio UITableView custom 9 UITableViewCell
- 10. Storyboard UITableViewDataSource! • Protocollo per costruire e modificare tableView! • Metodi da implementare! ✓tableView:cellForRowAtIndexPath:! ✓numberOfSectionsInTableView:! ✓tableView:numberOfRowsInSection: 10
- 11. Storyboard UITableViewDelegate! • Protocol per gestire le azioni sui records! • Selection, edit, delete …! • Si compone di metodi opzionali! • Utilizza la classe NSIndexPath 11
- 12. Storyboard NSIndexPath! • Fornisce il percorso di un determinato nodo all’interno di un albero! • Utilizzato in TableView sarà utile per 12 conoscere ! ✓Section! ✓Row
- 14. Storyboard UITableViewCell! • Rappresenta la cella della TableView! • È possibile scegliere il tipo di cella! • È possibile personalizzarla in ogni suo aspetto attraverso una subclass di UITableViewCell 14
- 20. Storyboard UITableViewController! • Classe custom per la gestione della TableView! • Classe custom per la view di dettaglio ! • Collegare le Views 20
- 22. Storyboard UITableViewController! • Per gestire il passaggio di dati è necessario preparare la TableView e la View di destinazione ! • Utilizzare properties adatte a contenere il dato 22
- 23. Storyboard UITableViewController! • Per gestire il passaggio di dati utilizziamo il metodo! 23 ! !
- 24. Storyboard UITableViewController! • Istanziare view di dettaglio! • Set dati da “trasferire”! ! ! 24
- 25. Storyboard 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 25
- 26. Storyboard UITableViewController editing mode! - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath: (NSIndexPath *)indexPath {! …..! if(….){! return UITableViewCellEditingStyleInsert;! 26 } else {! return UITableViewCellEditingStyleDelete;! }! }
- 27. Storyboard 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 27
- 28. UIAlertView 28
- 29. Storyboard 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 29
- 30. Storyboard UIAlertView! • Deprecato in iOS 8 in favore di UIAlertController! • Adesso ingloba anche UIActionSheet per la gestione di menu contestuali contenenti azioni 30
- 31. Storyboard UIAlertView! • Si compone di 3 elementi! 31 ✓Title! ✓Message! ✓Buttons
- 32. Storyboard 32 UIAlertView Title Message Buttons
- 33. Storyboard UIAlertView! • Classe istanziata attraverso metodo initWithTitle:message:delegate:c ancelButtonTitle:otherButtonTitl es: 33
- 34. Storyboard UIAlertView! • È possibile mostrare alert attraverso 34 metodo show
- 35. Storyboard Esempio UIAlertView! UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Test" message:@"Hello World" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];! [alert show]; 35
- 37. 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”! ✓…
- 38. Storyboard UIAlertView! • Per catturare le azioni dell’utente è necessario che la classe sia conforme al protocol UIAlertViewDelegate! • Implementare metodo opzionale dismissWithClickedButtonInde x:animated: 38
- 39. UIImageView 39
- 40. Storyboard 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 40
- 42. Storyboard UIImageView! • Può essere inizializzata attraverso il metodo initWithImage:! • È necessario impostare un’immagine all’interno del progetto 42
- 43. 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
- 47. UITextView 47
- 48. 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
- 49. Storyboard UITextViewDelegate! • Metodi uso ricorrente! ✓textViewDidBeginEditing ! ✓textViewDidEndEditing ! ✓textViewShouldEndEditing! ✓shouldChangeTextInRange 49
- 50. Storyboard UITextViewDelegate - textViewDidBeginEditing! • Metodo chiamato quando l’utente inizia l’editing nella textView 50
- 51. Storyboard UITextViewDelegate - textViewDidEndEditing! • Metodo chiamato quando l’utente conclude l’editing nella textView! • Ultima chiamata del delegate prima di “chiudere” le operazioni sull’oggetto 51
- 52. Storyboard UITextViewDelegate - textViewShouldEndEditing! • Metodo chiamato quando l’utente sta per concludere l’editing nella textView e muove il focus ad un altro componente 52
- 53. Storyboard UITextViewDelegate - shouldChangeTextInRange! • Metodo chiamato ogni qual volta l’utente inserisce un carattere nella textView 53
- 55. Storyboard 55 UITextView TextView
- 56. UIPickerView 56
- 57. Storyboard UIPickerView! • Componente di scelta attraverso visualizzazione a “slot-machine”! • Possibile mostrare più slot di selezione! • Es. scelta della data 57
- 58. Storyboard 58 UIPickerView Date Picker Single component Picker
- 59. Storyboard UIPickerView! • Si compone di 2 oggetti! 59 ✓Component! ✓Row
- 60. Storyboard 60 UIPickerView Components Rows
- 61. Storyboard UIPickerView! • Lavora con i protocols! ✓UIPickerViewDelegate! ✓UIPickerViewDataSource 61
- 62. Storyboard UIPickerViewDelegate! • Usato per configurare l’appereance della Picker! • Metodo pickerView:didSelectRow:inCo mponent: invocato quando l’utente effettua la selezione sulla picker 62
- 63. Storyboard UIPickerViewDataSource! • Usato per configurare i valori delle rows della picker! ✓numberOfComponentsInPickerVie w: stabilisce il numero di componenti della picker! ✓pickerView:numberOfRowsInComp onent: stabilisce il numero delle rows del singolo componente 63
- 66. 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
- 67. Let’s Code 67
- 68. Storyboard Let’s Code! ✦Implementare una TableView con layout celle e dati a scelta e visualizzazione dati in View successiva 68
- 69. Storyboard Ulteriori approfondimenti! TableView programming guide! UIAlertView! UIImageView! UITextView! Picker Views 69
- 70. Domande ? 70