Cos'è e come usare la modal view [AGGIORNATO]

Pubblicato il 02/07/2009 in Tutorial iPhone SDK Object-c
[b][code]La "modal view" è semplicemente una vista (o meglio un oggetto tipo UIViewController) che viene posta sopra ad un'altra. A mio avviso può essere usata per qualche impostazione o funzione veloce. Per avere un esempio tutte quelle viste che compaiono dal basso verso l'alto o ruotando (vedi immagine sopra) sono delle modal view. Un esempio concreto è la tastiera: quando toccate un campo di testo la tastiera compare dal basso e compre parte della vista, finito la digitazione scompare.
In questo articolo andrò ad illustrare come creare questo effetto e come cambiare l'animazione.

Ecco una piccola illustrazione presa dalla documentazione Apple


Passiamo subito al lato pratico.
Apriamo Xcode, nuovo progetto (Windows-based Application), io l'ho chiamato "ModalView".
Andiamo subito a creare un'interfaccia: apriamo la cartella "Resources" e apriamo il file "MainWindow.xib". Si aprirà InterfaceBuilder.
Ricordo che non si usa la Window ma bisogna crearsi delle viste.
Quindi trascino un nuovo UIViewController, inserisco una vista al suo interno e qualche altra cosetta:

Ora seleziono l'oggetto appena inserito e cambio il nome della sua classe, poi aggiungo delle action e outlet.

Ricordo che avendogli dato un nuovo nome (io l'ho chiamato VPrincipale (=Vista Principale)), ora ho creato un nuovo oggetto con metodi nuovi, rimane sempre della classe UIViewController ma avrà delle funzioni in più che andremo a definire in seguito.

Come nell'immagine sopra aggiungiamo pure una altro oggetto, io ho messo un UINavigationController (che è una sottoclasse di UIViewController) ma si poteva mettere qualsiasi cosa ( quasi ;) ). Aggiungiamo qualche bottone e un label.


Come detto prima con VPrincipale abbiamo creato un nuovo oggetto, e dobbiamo definire i suoi metodi e le sue funzioni, quindi selezioniamolo e andiamo su File>Write Class File...

Spuntiamo dove chiede il target.
Iniziamo a scrivere il file .h che definisce il nostro nuovo oggetto

Ora nell'InterfaceBuilder dobbiamo dire che tasti eseguono i due metodi, quello di aprire la modal view e quello di chiuderla. Clicchiamo con ctrl sul tasto che deve aprire la modal view e trasciniamo il punto verso il nostro oggetto VPrincipale, poi selezioniamo l'azione desiderata.

Facciamo lo stesso col tasto che chiuderà la modal view

Ora selezioniamo l'oggetto VPrincipale e colleghiamo in questo modo

Manca pochissimo alla fine, prima di completare dobbiamo dire all'applicazione che all'avvio si presenti la vista di VPrincipale. Vi ricordo il tutorial per quest'operazione QUI
Comunque i passaggi sono pochi e semplici, per non dilungarmi troppo vi posto le immagini in sequenza:



(testate l'applicazione, dovrebbe aprirsi con la vista principale anche se i tasti non funzionano ancora)

Ora definiamo i metodi dell'oggetto VPrincipale che ci consentiranno di far comparire la modal view. Apriamo il file VPrincipale.m e inseriamo il seguente codice


Analizziamo prima i due metodi che aprono e chiudono: come vedete il metodo è semplice e intuitivo, è un metodo che si trova nella documentazione Apple sotto la voce "UIViewController".
VPrincipale fa comparire la modal view dall'oggetto da me chiamato "modalView" che in precedenza ho indicato con interfaceBuilder.

-(void)awakeFromNib entra in azione appena si carica la grafica. All'interno ho definito il tipo di animazione che voglio per questa modal view. Esistono 3 tipi di animazione forniti da casa Apple:

typedef enum {
UIModalTransitionStyleCoverVertical = 0,
UIModalTransitionStyleFlipHorizontal,
UIModalTransitionStyleCrossDissolve,
} UIModalTransitionStyle;


Il primo è quello di defoult, il secondo fa ruotare sull'asse verticale le view e il terzo crea una dissolvenza.

Come sempre se ci son problemi scrivete nei commenti, in caso il mio progetto è QUI

Aggiornamento: per modificare l'effetto di comparsa si può scrivere in questo modo:

modalView.modalTransitionStyle = 0;

oppure

modalView.modalTransitionStyle = 1;


e via dicendo.
Ma si possono pure combinare le animazioni inserendo più numeri

modalView.modalTransitionStyle = 02;


modalView.modalTransitionStyle = 12;


Sperimentate pure le combinazioni
Visite all'articolo: 39
Vota l'articolo (media attuale su 0 voti: )

noname
28/06/2009 16:05
Sei un dio!! sai che questi tutorial sono oro colato???

continua a farne tanti altri!!!

ciao grande!!
cescobaz
28/06/2009 16:34
Grazie, sono contento che siano utili a qualcuno.
Adesso però è periodo di esami, quindi non riesco a scrivere tanto.

Prossimo tutorial riguarderà l'uso dell'accelerometro: una pallina che si muoverà a seconda dell'inclinazione dell'iPhone.

A presto!

Vuoi aggiungere un commento?
Il tuo nome
La tua email (non verrà pubblicata)
Commento
Francesco Burelli © 2009 tutti i diritti riservati.