In questo breve tutorial vedremo come creare un piccolo programma in grado di far girare automaticamente una presentazione di immagini o foto che scorrono una dopo l’altra in modo automatico.
L’avvio della presentazione sarà gestito da un pulsante UIButton così come il suo arresto.
Per prima cosa avviate Xcode, e create un nuovo progetto, scegliete tra l’elenco dei Template proposti “View-based Application” e andate avanti.
Inserite un nome, ad esempio “Presentazione” per la vostra nuova applicazione, scegliete quindi dove volete salvarla e proseguite.
Si aprirà la schermata principale di Xcode. Tramite “Groups & Files” sulla sinistra aprite la cartella “Classes” e cliccate quindi sul file PresentazioneViewController.h in cui dovete inserire il seguente codice:
#import
@interface PresentazioneViewController : UIViewController {
IBOutlet UIImageView *immagine;
NSArray *array;
}
-(void)avvia:(id)sender;
-(void)ferma:(id)sender;
@end
Questo tipi di files (con estensione .h) servono a dichiarare tutti gli oggetti, le proprietà e i metodi che verranno poi usati nelle nostre applicazioni. Qui ci saranno quindi le sole dichiarazioni, verranno poi definiti i comportamenti nel rispettivo file con estensione .m della classe.
Vediamo il significato di questo breve listato. La prima riga #import
L’istruzione @interface PresentazioneViewController : UIViewController è l’inizio vero e proprio della nostra dichiarazione e UIViewController è la classe parente da cui la nostra nuova classe eredita tutte le proprietà e i metodi. Per ora prendete per buona questa istruzione, spiegheremo in una delle prossime lezioni dedicate all’objective-c il significato e il funzionamento delle classi. Le parentesi graffe servono a raggruppare in un unico blocco più istruzioni di codice, chi conosce il C avrà ben chiaro questo concetto che riprenderemo nelle prossime lezioni.
Troviamo quindi l’istruzione IBOutlet UIImageView *immagine;
IBOutlet indica che questo oggetto sarà collegato ad un oggetto di tipo UIImageView che creeremo con Interface Builder, mentre immagine è il nome del nostro oggetto. Con NSArray *array; invece andiamo a creare l’oggetto che conterrà tutte le nostre immagini, che chiamiamo per semplicità array ed è ti tipo NSArray. Gli array sono dei particolari contenitori simili alle ariabili che però possono contenere al loro interno più valori, identificati e utilizzabili poi grazie ad un indice che va da 0 a n-1, dove n è il numero degli oggetti al suo interno.
Le due istruzioni -(void)avvia:(id)sender; e -(void)ferma:(id)sender; servono a dichiarare i metodi, quindi le azioni, che saranno collegate ai due pulsanti. Uno per avviare la presentazione e l’altro per arrestarla.
A questo punto salvate e aprite il file PresentazioneViewController.m e al suo interno cercate il metodo viewDidLoad che dovrebbe essere commentato e modificatelo come segue:
- (void)viewDidLoad {
[super viewDidLoad];
array = [NSArray arrayWithObjects:[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"3.jpg"],nil];
[immagine setAnimationImages:array];
[immagine setAnimationRepeatCount:0];
[immagine setAnimationDuration:5];
}
Questo metodo esegue il codice al suo interno all’avvio della vista durante l’esecuzione del programma. Noi lo useremo per inserire le immagini nell’array, nel nostro esempio 3, grazie metodo arrayWithObjects di NSArray. Subito dopo viene passato l’array appena riempito all’oggetto immagine che sarà usato per far scorrere le foto. Viene quindi impostato il numero di volte che deve ripetersi la presentazione (0 indica ripetizioni infinite) e il temlo tra il passaggio di un’immagine alla successiva (nel nostro caso 5 secondi).
Tutto questo grazie ai metodi che il nostro oggetto immagine eredita da UIImageView.
A questo punto inserite sotto il codice dei due metodi da passare ai pulsanti che useremo per avviare e arrestare la presentazione:
-(void)avvia:(id)sender{
[immagine startAnimating];
}
-(void)ferma:(id)sender{
[immagine stopAnimating];
}
Per quanto riguarda il codice è tutto. A questo punto occorre inserire le immagini nel progetto, nel nostro caso 1.jpg, 2.jpg e 3.jpg, ma potrete ovviamente inserirne altre e con i nomi che preferite, modificando opportunamente il codice sopra. Per farlo trascinate semplicemente nella cartella “Resource” dentro “Groups & Files” i file delle vostre immagini ricordando di spuntare la casella “Copy items into destination group’s folder (if needed)” per copiare i file stessi nel progetto, premete quindi su “Add”, come mostrato in figura qui sotto:
Ora non resta altro che aprire il file PresentazioneViewController.xib per disegnare l’interfaccia grafica.
Trascinate quindi nella vista una UIImageView e due UIButton. Facendo doppio click sui pulsanti appena inseriti potrete modificarne l’etichetta inserendo Avvia e Ferma, o quello che preferite.
Cliccate quindi su File’s Owner e dalla finestra “Presentazione View Controller Connection” collegate immagine con la UIImageView appena inserita e i due metodi “Avvia” e “Ferma” con i due pulsanti dell’interfaccia grafica, facendo attenzione a selezionare “Touch UP Inside” quando rilasciate il mouse. Dovete ottenere una configurazione della vista simile a quella mostrata qui di seguito:
Salvate e chiudete Interface Builder. Potete infine cliccare su Build and Run e testare il funzionamento della vostra applicazione tramite l’iPhone Simulator o direttamente sul vostro iPhone o iPod Touch.
Se aveste problemi con il progetto scriveteci tramite il nostro forum. Per comodità mettiamo a disposizione per il download il sorgente del tutoriral.
Questo il risultato finale che dovreste ottenere:
Video Tutorial
by David Pollak
25 Responses to “T#003 – Creare una presentazione di foto”
31 Ottobre 2009
Clod75Grande tutorial!! Sono stupito da cosa si può ottenere con così poche righe di codice!!!
4 Novembre 2009
gabrieleSalve a tutti
sono un neofita di C e a maggior ragione di programmazione per iPhone
trovo queste guide davvero ben fatte, semplici e curate, COMPLIMENTI!!
Solo un problema con questo tutorial, non riesco a visualizzare le immagini, dove devo salvarle? i nomi sono “1.jpg”, “2.jpg” e così via?
Grazie
Gabriele
4 Novembre 2009
Staff devAPPInnanzitutto grazie per i complimenti 🙂
Per quanto riguarda le immagini abbiamo erroneamente dato per scontato che l’utente sapesse inserirle da sè nel progetto. In ogni caso il tutorial è stato aggiornato inserendo al suo interno anche questa spiegazione. Per qualsiasi cosa non esiti a chiedere.
Saluti
8 Febbraio 2010
aaddiiciao
non e che potresi mettere la source, perche non riesco a capire dove sbaglio?
grazie
8 Febbraio 2010
Staff devAPP@aaddii: sicuro, entro sera mettiamo online il sorgente 😉
15 Febbraio 2010
Staff devAPPAbbiamo aggiunto il sorgente del tutorial. Pian piano li aggiungiamo tutti 😉
4 Ottobre 2010
DarioEccezzionale !
Dopo aver cercato in lungo e in largo , finalmente ho trovato un tutorial xCode veramente ben fatto e funzionante Grazie ! ! !
Forse diventero’ un piccolo xCoder !
saluti Dario
8 Ottobre 2010
devAPP – Tutorial Set #1 - iPhone Italia – Il blog italiano sull'Apple iPhone 4, iPhone 3GS e 3G[…] (Vai al tutorial completo) […]
8 Ottobre 2010
» devAPP – Tutorial Set #1[…] (Vai al tutorial completo) […]
8 Novembre 2010
GiovanniBellissimo tutorial!
Ho solo 1 domanda: volendo scorrere le foto come nell’app Foto dell’IPhone, e cioè scorrendo verso destra o sinistra con il dito, è possibile farlo in automatico con questo componente? Oppure devo gestire gli eventi al touch?
10 Gennaio 2011
MatteoTogliere i pulsanti e fare in modo che le foto partano subito in automatico? C’è un comando particolare?
19 Febbraio 2011
AnnaSalve questo tutorial è grandioso!
Potete suggerirmi sull’argomento foto, un tutorial per la realizzazione di una galleria con miniature ingrandibili? Grazie
20 Marzo 2011
Manuel@Matteo … direi che basti aggiungere [image startAnimating]; come ultima riga di viewDidLoad.
5 Aprile 2011
MatteoSalve, volevo sapere come leggere le immagini da un array che ho preso da un .php esterno all’app.
Ad esempio nel metodo “array = [NSArray arrayWithObjects:” dovrei mettere un for che scorre l’array? Non credo funzioni.
Attendo delucidazioni.
Grazie
16 Aprile 2011
MarioSalve, volevo cortesemente sapere:
Ho seguito tutto alla lettera,come mai alla fine quando devo fare i collegamenti dei pulsanti non trovo i meteodi “avvia” e “ferma” nella finestra “Presentazione View Controller Connection”?
Vi ringrazio da subito e vi faccio i miei piu’ sinceri complimenti……
22 Aprile 2011
PanasonicMa quanto devono essere grandi le immagini???
8 Maggio 2011
MaveDevGrazie per questa utile guida.
Io ho pero’ un problema, funziona benissimo quando la provo sul simulatore, pero’ quando carico l’applicazione sull’iphone allora parte l’applicazione ma alla pressione del tasto “avvia” le immagini non vengono visualizzate. Mi stupisce che funziona benissimo sul simulatore, a questo punto potrebbe essere che non vengono portate le immagini sul device all’atto del’installazione. Non ho idea di quale sia il problema, magari qualcuno di voi ha avuto lo stesso problema 🙂
grazie, ciao
9 Maggio 2011
MaveDevProblema risolto 🙂
Quando importavo le immagini nel progetto dal Mac allora le immagini avevano estensione “JPG” mentre dentro nel codice avevo scritto “jpg”.
Effettivamente questo non e’ un problema per il simulatore che e’ case insensitive mentre lo e’ per l’iphone che e’ case sensitive. Ho cambiato il codice con la giusta estensione uppercase e l’applicazione funziona anche su iPhone 🙂
14 Maggio 2011
albertonon funziona, forse non ho capito dove mettere le immagini. Credo di avere una versione più aggiornata di Xcode
4 Giugno 2011
FabioAnche a me non funziona. Ho la versione 4 di XOCDE e non esiste la cartella Resources. Ho caricato le foto nel progetto ma ho questo tipo di errore: Called object is not in a function.
Grazie mille in anticipo per l’aiuto
24 Ottobre 2011
blaGrazie per queste guide,
ho un problema Le due istruzioni -(void)avvia:(id)sender; e -(void)ferma:(id)sender; nel Presentazione View Controller Connection non ci stanno.
25 Ottobre 2011
blaRisolto, al posto di usare -(void)avvia:(id)sender; e -(void)ferma:(id)sender;
ho usato -(IBAction)avvia:(id)sender; e -(IBAction)ferma:(id)sender;
27 Gennaio 2012
babbaInfatti non capivo come poter collegare un’azione ai pulsanti se non è presente IBAction, credo sia opportuno aggiornare e scrivere la dichiarazione giusta per i pulsanti, in ogni caso grazie mille x tutto quello che fate
6 Dicembre 2012
AntonioSe carichi molte foto, la prima volta che premi avvia dopo aver aperto l’applicazione ci mette un pò di tempo a partire, invece le volte successive parte subito. come potrei risolvere?
14 Gennaio 2013
Matteoper farla partire in automatico al caricamento della pagina come dovrei fare?
ho provato a togliere le action e mettere la riga [immagine startAnimating];
dentro il viewdidload ma non va…..