iOS: Sviluppo App iPhone & iPad

Dario Pizzuto

1

Storyboard

2

Storyboard

3

Argomenti!

• Storyboard!

• ViewController!

• Actions!

• Outlets!

• UIButton, UILabel, UITextField

Storyboard

4

Storyboard

5

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

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

Storyboard

7

Storyboard scene!

• Corrisponde all’intera view!

• Contiene gli elementi di navigazione

Storyboard

8

Storyboard segue!

• Gestisce la transizione tra 2 views!

• Vari tipi di transizione!

✓Push!

✓Modal!

✓Custom

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

Storyboard

10

Esempio Storyboard

iPad

11

Storyboard

12

iPad!

• In generale si usa 1 classe per gestire entrambi i devices!

• Attenzione a gestire le orientazioni e il layout

Storyboard

13

iPad!

• Xcode fornisce dei template ad hoc per iPad!

• Vi sono alcune strutture che vengono utilizzate solo su iPad !

✓Split View!

✓Popover

UIViewController

14

Storyboard

15

UIViewController!

• Elemento fondamentale in iOS!

• Identifica il controllore di una View!

• Usato per gestire tutte le operazioni interne

Storyboard

16

UIViewController

Storyboard

17

Custom Class

Help Inspector

Storyboard

18

UIViewController!

• Di base l’elemento dello storyboard ha la default class UIViewController!

• Se ne abbiamo creata una custom, è necessario sostituirla nell’apposito riquadro

IBOutlet

19

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

Storyboard

21

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

Storyboard

22

Connection with Storyboard

IBOutlet

Storyboard

23

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!

Storyboard

24

Outlets disponibili

Storyboard

25

Link tra property ed elemento in UI

Storyboard

26

IBOutlet!

• Così facendo referenziamo l’elemento in UI con IBOutlet dichiarato nella classe!

• Se tutto corretto avremo quanto segue !

!

!

!

Storyboard

27

Connected with Storyboard

IBOutlet

IBAction

28

Storyboard

29

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!

Storyboard

30

IBAction!

• Si definisce nell’implementazione della classe!

• Keyword IBAction!!

- (IBAction)refresh:(id)sender;!

- (IBAction)toggleVisibility:(id)sender withEvent:(UIEvent*)event;

Storyboard

31

IBAction!

• I metodi restituiscono IBAction!

• La signature contiene (id)sender!

• Sender identifica l’oggetto che ha invocato l’azione!

• Uso comune legato ad UIButton

Storyboard

32

Connection with Storyboard

IBAction

Storyboard

33

Connection Inspector

IBAction

Storyboard

34

IBAction

Storyboard

35

IBAction

Storyboard

36

IBAction

Modalità di inizio action

Azione definita su Touch Up Inside

Storyboard

37

Connection with Storyboard

IBAction

UIButton

38

Storyboard

39

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

Storyboard

40

UIButton!

• Principalmente si utilizza per azioni sulla view!

• Es.!

✓Salvataggio!

✓ Invio !

✓ Login

Storyboard

41

UIButton

Storyboard

42

Esempio UIButton action

UILabel

43

Storyboard

44

UILabel!

• Classe che definisce una label all’interno della UI!

• Usato solo per testo read-only!

• Una o più linee di output

Storyboard

45

UILabel!

• Possibilità di personalizzare font, colore testo, allineamento e altro!

• Possibile creare una UILabel custom attraverso una sublclass di UILabel

Storyboard

46

UILabel!

• Per stampare valori da codice è necessario referenziare l’elemento in UI con IBOutlet

Storyboard

47

UILabel

UITextField

48

Storyboard

49

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

Storyboard

50

UITextFieldDelegate!

• Metodi uso ricorrente!

✓ textFieldDidBeginEditing !

✓ textFieldDidEndEditing !

✓ textFieldShouldEndEditing

Storyboard

51

UITextFieldDelegate - textFieldDidBeginEditing!

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

Storyboard

52

UITextFieldDelegate - textFieldDidEndEditing!

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

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

Storyboard

53

UITextFieldDelegate - textFieldShouldEndEditing!

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

Storyboard

54

UITextField!

• Si utilizza per memorizzare piccole porzioni di testo ed inviare delle azioni legate all’input!

• Es.!

✓Username field!

✓Password field

Storyboard

55

UITextField

Storyboard

56

UITextField @interface DPPPersonaViewController : UIViewController<UITextFieldDelegate>!

@property(nonatomic,weak) IBOutlet UILabel *labName;!

@property(nonatomic,weak) IBOutlet UITextField *textFieldName;!

@end

Let’s Code

57

Storyboard

58

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

Storyboard

59

Ulteriori approfondimenti!

Storyboard!

IBOutlet!

IBAction!

UIButton!

UILabel!

UItextField

Domande ?

60