T#003 – Creare una presentazione di foto

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 <UIKit/UIKit.h>
 
@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 serve per importare nel nostro progetto il framework UIKit, grazie al quale ci sarà permesso di usare tutti gli oggetti preconfezionati e offerti da Apple, come i pulsanti, le caselle di testo, le label e via dicendo.

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: