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.
10 Responses to “T#021 – Creiamo un effetto di transizione tra UIView”
19 Gennaio 2010
SpinorickyComplimenti per la guida!
20 Gennaio 2010
Spinoricky@ Staff DevAPPi : Ho realizzato questo contest sul mio blog :
http://iale10.wordpress.com/2010/01/19/iale10s-ti-regala-alcune-applicazioni/
Puoi renderti partner del contest e farmi pubblicità?
7 Febbraio 2010
RagazzettoScusate saranno 2 domande stupide ma le faccio lo stesso :
come si può impostare lo sfondo nero durante l ‘ animazione ?
mi succede una cosa strana , se eseguo tutta la guida sui file info non mi funziona , o meglio l app parte ma non si vedono le viste del file info.xib , se invece eseguo la guida all interno dei viewcontroller dell app funziona tutto anche se comenque mi da 2 warning:
– property ‘istruzioni’ requires method ‘-istruzioni’ to be defined – use @synthesize, @dynamic or provide a method implementation
-property ‘istruzioni’ requires the method ‘setIstruzioni:’ to be defined – use @synthesize, @dynamic or provide a method implementation
???
Qualche idea ?
Grazie in anticipo !
in ogni caso scusate l ignoranza !
Ultima domanda se invece volessi utilizzare il classico tastino ” info ” come devo fare quando al momento del collegamento con showIstruzioniPage o removeIstruzioniPage mi appare la lista delle azioni ?
22 Febbraio 2010
guygrazie raga……. siete i migliori…..
18 Luglio 2010
Nico95E se volessi settare un altro colore come background dell animazione come si fa?
18 Settembre 2010
GianlucaCome faccio a farlo in una Navigation Based Application?
2 Novembre 2010
Creare un effetto di transizione tra UIView | devAPP[…] spunto da un nostro vecchio articolo, in cui viene mostrato come applicare un effetto di transizione animato tra UIView […]
3 Dicembre 2010
TexanoCiao, le animazioni di questo tipo sono applicabili anche ad un ImageView sostituendo l’immagine da codice ? Grazie in anticipo !
4 Giugno 2011
Tommasosi può fare la stessa cosa su una image view?
5 Giugno 2011
MaveDevCredo proprio che il tutorial dia per scontato che ci si trovi in un progetto gia’ funzionante a cui si puo’ aggiungere la nuova funzionalita’ per il passaggio da una view ad una nuova, pero’ manca di fare riferimento al fatto che nel file .h deve essere definita la “vistaUno” che deve essere caricata all’avvio dell’applicazione tramite la sua dichiarazione nella viewDidLoad tramite “self.view = vistaUno”.
Ho aggiunto la dichiarazione della vistaUno e caricata nella viewDidLoad e adesso funziona.
grazie anche per questo Tutorial, molto bello l’effetto di transizione tra due View 🙂