T#021 – Creiamo un effetto di transizione tra UIView

In questo nuovo tutorial vedremo come passare da una view ad un’altra utilizzando un collegamento (ad esempio un pulsante) presente nella prima View e come dalla seconda Vista, possiamo ritornare nuovamente alla prima. Applicheremo a tutto questo un piccolo effetto di transizione che sicuramente risulterà più piacevole in fase di esecuzione del programma.

L’effetto che implementeremo è una semplice rotazione della vista come mostrato in figura:

Passiamo subito alla parte operativa.

Dal menu File creiamo un nuovo file XIB (File -> New File –> User Interface -> View Xib) ed assegniamogli un nome (nel nostro caso lo chiameremo “Info”).

Sempre dal menu file creiamo i file che controlleranno la nostra vista il file di intestazione .h e quello di implementazione .m: File -> New File -> UiViewController SubClass. Chiamiamo anche questi file “Info”.
Otterremo così 3 nuovi file: Info.xib, Info.h ed Info.m.

Apriamo il file Xib ed occupiamoci subito di assegnare al File’s Owner la Class Identity, che nel nostro caso sarà la classe appena creata “Info”.

Per chi non fosse ancora pratico ripetiamo i passaggi da compiere:
cliccate due volte sul file Info.Xib, si aprirà una finestra con una lista di oggetti (Files Ownwer, Fist Responder, View). Selezioniamo File’s Owner e dal menu Tool selezioniamo Identity Inspector. Alla voce Class della sezione Class Identity inseriamo il nome della nostra classe, cioè Info).

Apriamo ora la view e personalizziamola come vogliamo.

Inseriamo, dalla libreria, una Navigation Bar (menu Tools -> Library) ed un Bar Button Item che sarà il “tastino” che consentirà all’utente di passare alla seconda View.

Apriamo nuovamente la Libreria ed inseriamo nel nostro file Info.Xib una nuova UIVIew, quindi personalizziamola. Sarà proprio questa la seconda vista che andremo a caricare. Inseriamo anche qui una Navigation Bar ed un Bar Button Item che sarà l’elemento che, alla pressione, ci permetterà di ritornare alla vista precedente

Fatta questa operazione passiamo a modificare i file .h e .m.

Nel file di intestazione .h dichiariamo una nuova view (con un nome che identifichi la seconda view da richiamare) in questo modo:

UIView *istruzioni;

e settiamola come IBOutlet in questo modo :

@property (retain,nonatomic) IBOutlet UIView *istruzioni;

dichiariamo infine in due metodi che useremo per passare da una vista all’altra e che assegneremo ai pulsanti:

-(void)showIstruzioniPage:(id)sender;
-(void)removeIstruzioniPage:(id)sender;

Ritorniamo nuovamente al nostro Info.xib, facciamo doppio-clic sulla prima View e selezionando il File’s Owner dal menu Tools accediamo al Connection Inspector.

Alla voce Outlets troveremo delle nuove voci, colleghiamo quindi la vista “istruzioni” (che costituisce la nostra seconda vista) alla seconda UIView creata in precedenza ed il metodo “showIstruzioniPage” al “Bar Button Item” inserito in precedenza nella Navigation della prima UIView.

Apriamo ora la seconda View e colleghiamo il metodo “RemoveIstruzioniPage” al tasto, creato sulla navigation bar, che avremo designato come l’elemento che ci permetterà di ritornare nuovamente alla vista precedente

Il lavoro è quasi terminato, non resta che modificare il file di implementazione Info.m in questo modo:

-(void)removeIstruzioniPage:(id)sender
{
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:1.0];
	[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight
						   forView:[self view]
							 cache:YES];
	[istruzioni removeFromSuperview];
 
	[UIView commitAnimations];		
}
 
-(void)showIstruzioniPage:(id)sender
{
 
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:1.0];
	[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight
						   forView:[self view]
							 cache:YES];
	[[self view] addSubview:istruzioni];
	[UIView commitAnimations];	
 
}

I metodi esposti sopra contengono due istruzioni fondamentali:

[[self view] addSubview:istruzioni];

e

[istruzioni removeFromSuperview];

che scritte da sole permetterebbero ugualmente di passare da una vista all’altra.

Il restante codice, invece, ci permette di creare e applicare una piccola animazione per rendere il passaggio da una vista all’altra un po’ più gradevole e meno netto.

Alla prossima.