Eccoci con un nuovo tutorial nei DevTutorial, dedicato alla programmazione con l’SDK per iPhone. Questa volta (su richiesta di parecchi utenti) ho deciso di trattare un argomento abbastanza ostico in XCode, ovvero la gestione di più viste create con Interface Builder. IB è uno strumento davvero ottimo che ci permette di creare la parte grafica della nostra applicazione senza grossi sforzi, ma spesso poi diventa problematico gestire tutte le vise via codice. In questo tutorial vedremo come creare due viste distinte, e come passare da una all’altra mediante un semplice bottone.

Vedrete che il tutto si rivelerà molto semplice e veloce (a differenza dei precedenti metodi che vi avevo esposto!).

1. Creiamo un nuovo progetto

Iniziamo il nostro tutorial creando un nuovo progetto di tipo “View-based application” e chiamiamolo “viewTutorial”.

Il tutorial ci mette già a disposizione una vista, che sarà quella di partenza (quella che viene caricata all’avvio dell’applicazione). Creiamo, per prima cosa, la seconda vista necessaria per questo tutorial. Facciamo clic con il tasto destro sul nome del nostro progetto e selezioniamo “Add -> New File…”. Scegliamo, poi, un template “UIViewController” e spuntiamo la voce “With XIB for user interface”:

Inseriamo come nome “VistaDue” e clicchiamo su “Finish”. Abbiamo così creato una nuova vista con la relativa classe che la gestisce, niente di più semplice!

2. Definiamo la prima vista

Entriamo, ora, nel file “viewTutorialViewController.h” e inseriamo le seguenti dichiarazioni:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
 
@class VistaDue;
 
@interface viewTutorialViewController : UIViewController {
	IBOutlet VistaDue *vistaDueController;
}
 
@property (nonatomic, retain) IBOutlet VistaDue *vistaDueController;
 
-(IBAction)cambiaVista;
 
@end

Alla riga 6 abbiamo definito un elemento di tipo VistaDue, che sarà proprio la vista che caricheremo. Abbiamo, inoltre, definito anche un’azione “cambiaVista”, che assoceremo ad un pulsante, sarà l’evento che avvierà il cambio di vista.

Salviamo il file appena modificato e apriamo il file ”viewTutorialViewController.xib”. In Interface Builder apriamo il Pannello dei documenti e inseriamo un elemento del tipo “UIViewController” al suo interno:

Selezioniamo il componente appena inserito e dal pannello Identity Inspector selezioniamo come classe “VistaDue”:

Ora inserite nella vista principale (non nel ViewController che abbiamo appena inserito) un bottone. Ecco come si presenta la mia vista:

Ora selezionate il File’s Owner. Dobbiamo collegare i due componenti che abbiamo definito poco fa. Colleghiamo l’azione “cambiaVista” con il bottone, selezionando “Touch Up Inside” quando appare il menù di scelta dell’azione. Collegate, infine, l’elemento “vistaDueController” con l’UIViewController che abbiamo inserito poco prima. Se avete eseguito tutto correttamente avrete un pannello che si presenta così:

Possiamo salvare e chiudere questa vista.

3. Definiamo la “VistaDue”

Dobbiamo ora definire la seconda vista. Apriamo per prima cosa il file “VistaDue.h” e definite semplicemente questa azione (riga 6):

1
2
3
4
5
6
7
8

#import <UIKit/UIKit.h>
 
@interface VistaDue : UIViewController {
}
 
-(IBAction)tornaIndietro;
 
@end

Salvate il file e apriamo “VistaDue.xib”. Anche in questo caso inseriamo semplicemente un bottone nella vista, che ci permetterà di tornare alla prima vista:

Selezioniamo il File’s Owner e colleghiamo l’azione “tornaIndietro” con il bottone che abbiamo inserito, selezionando sempre “Touch Up Inside” come azione:

Salviamo e chiudiamo pure Interface Builder.

4. Scriviamo il codice necessario

Dobbiamo ora scrivere il codice che ci permetterà di passare da una vista all’altra. Vedrete che le istruzioni necessarie saranno davvero molto poche.

Apriamo il file “viewTutorialViewController.m” e inseriamo il seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12

#import "viewTutorialViewController.h"
#import "VistaDue.h"
 
@implementation viewTutorialViewController
 
@synthesize vistaDueController;
 
-(IBAction)cambiaVista{
	vistaDueController = [[VistaDue alloc] initWithNibName:@"VistaDue" bundle:nil];
	vistaDueController.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
	[self presentModalViewController:self.vistaDueController animated:YES];
}

Alla riga 9 abbiamo inizializzato la vista, inserendo anche il nome del file .xib che deve essere caricato. La riga 10, invece, ci permette di impostare l’animazione del passaggio dalla prima alla seconda vista. Ci sono tre animazioni già predisposte e disponibili:

• UIModalTransitionStyleCoverVertical, il caricamento della nuova vista sarà verticale, dal basso verso l’alto;
• UIModalTransitionStyleFlipHorizontal, c’è la rotazione flip-side, ovvero come se venisse mostrato il retro della vista;
• UIModalTransitionStyleCrossDissolve, dissolvenza incrociata.

L’ultima istruzione (riga 11) permette di mostrare la seconda vista, mostrandola così all’utente.

Ora non ci resta che definire il metodo “tornaIndietro” della classe VistaDue. Apriamo il file “VistaDue.m” e inseriamo la definizione del metodo:

1
2
3

- (IBAction)tornaIndietro{
	[[self parentViewController] dismissModalViewControllerAnimated:YES];
}

Questa istruzione ci permette di uscire dalla vista corrente e tornare a quella che era visualizzata precedentemente (nel nostro caso la vista “viewTutorialViewController”).

Abbiamo concluso! Clicchiamo su “Build and Run” e controlliamo che l’applicazione funzioni correttamente!

Se Avete Problemi, questo è il nostro file di progetto.

La guida è stata scritta da Andrea Busi per “Bubi Devs“. I meriti, quindi, sono del legittimo autore.