iOS_Course_9
0 likes444 views
Il documento tratta dello sviluppo di app per iOS, con particolare attenzione all'uso degli storyboard e dei componenti dell'interfaccia utente come UIButton, UILabel e UITextField. Viene descritto come gestire le transizioni tra le viste, l'uso di IBOutlets e IBActions per collegare interazioni e dati tra il codice e l'interfaccia grafica. Inoltre, include informazioni sulla gestione dei layout per iPhone e iPad e sulle best practice per il codice e la personalizzazione degli elementi UI.
iOS_Course_9
- 1. iOS: Sviluppo App iPhone & iPad Dario Pizzuto 1
- 2. Storyboard 2
- 3. Storyboard Argomenti! • Storyboard! • ViewController! • Actions! • Outlets! • UIButton, UILabel, UITextField 3
- 4. Storyboard 4
- 5. Storyboard Storyboard! • Feature introdotta in iOS 5! • Permette di definire il workflow dell’App! • Definisce le transizioni tra le Views! • Storyboard traduce i componenti visuali in codice per il compilatore 5
- 6. Storyboard 6 Storyboard! • Prima di iOS 8 esisteva uno storyboard differente per iPhone e iPad! • iOS 8 definisce un solo storyboard e il layout si gestisce attraverso le size classes! • La creazione dello storyboard è automatica durante il progetto
- 7. Storyboard Storyboard scene! • Corrisponde all’intera view! • Contiene gli elementi di navigazione 7
- 8. Storyboard 8 Storyboard segue! • Gestisce la transizione tra 2 views! • Vari tipi di transizione! ✓Push! ✓Modal! ✓Custom
- 9. Storyboard 9 Storyboard segue! • È possibile “passare” gli oggetti da una view ed un’altra ! • Durante la transizione viene invocato il metodo prepareForSegue:sender:! • Consente di configurare il tipo di transizione e le impostazioni della view seguente
- 10. Storyboard 10 Esempio Storyboard
- 11. iPad 11
- 12. Storyboard iPad! • In generale si usa 1 classe per gestire entrambi i devices! • Attenzione a gestire le orientazioni e il 12 layout
- 13. Storyboard 13 iPad! • Xcode fornisce dei template ad hoc per iPad! • Vi sono alcune strutture che vengono utilizzate solo su iPad ! ✓Split View! ✓Popover
- 15. Storyboard UIViewController! • Elemento fondamentale in iOS! • Identifica il controllore di una View! • Usato per gestire tutte le operazioni 15 interne
- 17. Storyboard Custom Class Help Inspector 17
- 18. Storyboard UIViewController! • Di base l’elemento dello storyboard ha la default class UIViewController! • Se ne abbiamo creata una custom, è necessario sostituirla nell’apposito riquadro 18
- 19. IBOutlet 19
- 20. Storyboard 20 IBOutlet! • Gli elementi dello storyboard vengono identificati con un prefisso IB (Interface Builder)! • IBOutlet è una property che referenzia un altro oggetto in una ViewController attraverso l’Interface Builder! • Viene dichiarato con il qualificatore weak per prevenire retain cycle
- 21. Storyboard IBOutlet! • In passato veniva dichiarato come iVar ma è preferibile dichiararli come property! • Si definisce nell’Interface della classe! • Keyword IBOutlet! ! @interface DPPPersonaViewController : UIViewController! @property (nonatomic, weak) IBOutlet UILabel *labName;! @end 21
- 22. Storyboard 22 IBOutlet Connection with Storyboard
- 23. Storyboard IBOutlet! • Pallino vuoto indica che non è presente un collegamento allo Storyboard! • È possibile collegare un IBOutlet se e solo se la ViewController di destinazione è dello stesso tipo di quella in cui è definito IBOutlet! • Variare tipo di classe da Identity Inspector! 23
- 25. Storyboard Link tra property ed elemento in UI 25
- 26. Storyboard IBOutlet! • Così facendo referenziamo l’elemento in UI con IBOutlet dichiarato nella classe! • Se tutto corretto avremo quanto segue 26 ! ! ! !
- 27. Storyboard 27 IBOutlet Connected with Storyboard
- 28. IBAction 28
- 29. Storyboard IBAction! • Sono dei metodi! • Definiscono delle azioni sullo storyboard! • Come IBOutlet devono essere referenziate all’interno dello storyboard! • Utile rispettare una naming convention per questo tipo di dato! 29
- 30. Storyboard IBAction! • Si definisce nell’implementazione della 30 classe! • Keyword IBAction! ! - (IBAction)refresh:(id)sender;! - (IBAction)toggleVisibility: (id)sender withEvent:(UIEvent*)event;
- 31. Storyboard IBAction! • I metodi restituiscono IBAction! • La signature contiene (id)sender! • Sender identifica l’oggetto che ha invocato l’azione! • Uso comune legato ad UIButton 31
- 32. Storyboard 32 IBAction Connection with Storyboard
- 33. Storyboard 33 IBAction Connection Inspector
- 36. Storyboard 36 IBAction Modalità di inizio action Azione definita su Touch Up Inside
- 37. Storyboard 37 IBAction Connection with Storyboard
- 38. UIButton 38
- 39. Storyboard UIButton! • Classe che definisce un bottone all’interno della UI! • Intercetta eventi touch ed invia un messaggio all’oggetto target! • Non è necessario creare un IBOutlet per inviare action al button ! • Possibilità di rendere custom UIButton creando una subclass a UIButton 39
- 40. Storyboard UIButton! • Principalmente si utilizza per azioni sulla 40 view! • Es.! ✓Salvataggio! ✓Invio ! ✓Login
- 42. Storyboard Esempio UIButton action 42
- 43. UILabel 43
- 44. Storyboard UILabel! • Classe che definisce una label all’interno della UI! • Usato solo per testo read-only! • Una o più linee di output 44
- 45. Storyboard UILabel! • Possibilità di personalizzare font, colore testo, allineamento e altro! • Possibile creare una UILabel custom attraverso una sublclass di UILabel 45
- 46. Storyboard UILabel! • Per stampare valori da codice è necessario referenziare l’elemento in UI con IBOutlet 46
- 48. UITextField 48
- 49. Storyboard UITextField! • Classe che definisce una TextField all’interno della UI! • Permette di gestire un input da parte dell’utente! • Permette di utilizzare vari tipi di tastiere! • Funziona unitamente al suo Delegate UITextFieldDelegate 49
- 50. Storyboard UITextFieldDelegate! • Metodi uso ricorrente! ✓textFieldDidBeginEditing ! ✓textFieldDidEndEditing ! ✓textFieldShouldEndEditing 50
- 51. Storyboard UITextFieldDelegate - textFieldDidBeginEditing! • Metodo chiamato quando l’utente inizia l’editing nella textField 51
- 52. Storyboard UITextFieldDelegate - textFieldDidEndEditing! • Metodo chiamato quando l’utente conclude l’editing nella textField! • Ultima chiamata del delegate prima di “chiudere” le operazioni sull’oggetto 52
- 53. Storyboard UITextFieldDelegate - textFieldShouldEndEditing! • Metodo chiamato quando l’utente sta per concludere l’editing nella textField e muove il focus ad un altro componente 53
- 54. Storyboard UITextField! • Si utilizza per memorizzare piccole porzioni di testo ed inviare delle azioni legate all’input! • Es.! ✓Username field! ✓Password field 54
- 56. Storyboard UITextField @interface DPPPersonaViewController : UIViewController<UITextFieldDelegate>! @property(nonatomic,weak) IBOutlet UILabel *labName;! @property(nonatomic,weak) IBOutlet UITextField *textFieldName;! @end 56
- 57. Let’s Code 57
- 58. Storyboard Let’s Code! ✦Implementare una UITextfield, il testo inserito dovrà essere visualizzato su una UILabel dopo un’azione di tipo Touch Up Inside su UIButton 58
- 59. Storyboard Ulteriori approfondimenti! Storyboard! IBOutlet! IBAction! UIButton! UILabel! UItextField 59
- 60. Domande ? 60