Siamo così giunti al quinto tutorial. Lo scorso articolo ci ha mostrato come implementare una UIToolbar, a cui abbiamo associato delle azioni. In questo tutorial vedremo come implementare la “UIProgressBar”, ovvero la barra che segna il caricamento, lo svolgimento di un’azione. Nel contempo cambieremo il colore di sfondo della nostra applicazione.

Vedremo, inoltre, come utilizzare la classe NSTimer, ovvero un temporizzatore, che ci permetterà di eseguire animazioni e transizioni con durate predefinite.

1. Creiamo un nuovo progetto

Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “View-based Application”, clicchiamo su “Choose…” e immettiamo come nome “ProgressColour” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.

Apriamo il file “ProgressColourViewController.h” e definiamo i seguenti componenti:

1
2
3
4
5
6
7
8
9
10
11

#import 
 
@interface ProgressColourViewController : UIViewController {
	IBOutlet UILabel *progressLabel;
	IBOutlet UIProgressView *progressBar;
}
 
-(IBAction)caricamentoBlu;
-(IBAction)caricamentoRosso;
 
@end

La label definita alla riga 4 servirà per mostrare un messaggio all’utente sul grado di completa- mento dell’animazione, mentre la UIProgressBar darà la stessa informazioni ma in maniera più visiva (è una classica barra di caricamento). Le due azioni (righe 8 e 9) dovranno essere associate a due bottoni, che avvieranno il cambio di colore dello sfondo.

Possiamo ora iniziare a definire l’aspetto grafico dell’applicazione, aprendo il file “ProgressColourViewController.xib”.

2. Definiamo l’aspetto grafico dell’applicazione

Inseriamo nella nostra vista i primi due componenti necessari: una UILabel e una UIProgressView. Ricreate una disposizione simile a questa (ovviamente nessuno vi vieta di personalizzarla a vostro piacimento):

Come potete notare la label e la barra di progresso occupano quasi per intero la larghezza della vista, questo per rendere più evidente ciò che avviene. Selezioniamo la label e apriamo “Attributes Inspector”, per modificare alcune proprietà:

• cancellate il contenuto del campo “Text”;
• “Font Size”: 20
• allineamento centrale.

Selezioniamo ora la UIProgressView e, sempre in “Attributes Inspector”, impostiamo il valore della casella “Progress” a zero. Inseriamo ora nella vista due bottoni, in modo da avere un risultato finale come questo:

Abbiamo già concluso la creazione della parte grafica della nostra applicazione. Non ci resta che collegare i componenti che abbiamo definito ad inizio tutorial. Dal Pannello dei Documenti selezioniamo, come sempre, il “File’s Owner” e apriamo il “Connections Inspector”. Dovreste avere un pannello così composto:

Colleghiamo l’elemento “progressLabel” con la label vuota presente sopra la barra, e “progressBar” con la barra stessa. Colleghiamo,poi, anche le due azioni: “caricamentoBlu” andrà sul bottone più in basso, quello con il testo “Applica sfondo blu”, mentre “caricamentoRosso” con l’altro bottone. Se avete eseguito tutto in maniera corretta dovreste avere questo risultato:

bbiamo così terminato questa fase. Salviamo e chiudiamo Interface Builder.

3. Scriviamo il codice necessario

Dobbiamo definire un elemento e un paio di metodi che non abbiamo scritto inizialmente. Apriamo il file “ProgressColourViewController.h” e inserite le dichiarazioni mancanti:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#import 
 
@interface ProgressColourViewController : UIViewController {
	IBOutlet UILabel *progressLabel;
	IBOutlet UIProgressView *progressBar;
 
	NSTimer *timer;
}
 
@property (nonatomic, retain) NSTimer *timer;
 
-(IBAction)caricamentoBlu;
-(IBAction)caricamentoRosso;
-(void)aggiornaBlu;
-(void)aggiornaRosso;
-(void)applicaBlu;
-(void)applicaRosso;
 
@end

Abbiamo definito un componente “NSTimer” (alla riga 7), che sarà il temporizzatore che ci permetterà di eseguire l’animazione prevista. Sono stati dichiarati, inoltre, quattro nuovi metodi, che ci serviranno per implementare tutte le azioni necessarie (dalla riga 12 alla 15).

Passiamo ora al file “ProgressColourViewController.m” e iniziamo ad implementare i metodi necessari. Inseriamo il seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import "ProgressColourViewController.h"
 
@implementation ProgressColourViewController
 
@synthesize timer;
 
- (IBAction)caricamentoBlu {
    progressBar.progress = 0.0;
	progressLabel.text = @"Caricamento colore...";
	timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(aggiornaBlu) userInfo:nil repeats:YES];
}
 
- (IBAction)caricamentoRosso {
	progressBar.progress = 0.0;
	progressLabel.text = @"Caricamento colore...";
	timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(aggiornaRosso) userInfo:nil repeats:YES];
}

Questi due metodi sono praticamente identici, quindi mi limiterò a commentare solamente il primo. Alla riga 8 viene settato il valore di progresso della barra a zero (tale valore di default va da 0.0 a 1.0, ma questo intervallo può essere modificato a piacere). Nella riga 9 inseriamo un messaggio nella label, in modo da comunicare all’utente ciò che sta avvenendo. L’istruzione presente alla riga 10, infine, è quella che merita più attenzione. Viene definita la variabile timer, istanziandola con la classe NSTimer. Ci sono tre parametri molto importanti in questa funzio- ne: la durata di 1 secondo (alla clausola “scheduledTimerWithTimeInterval”), il metodo che deve essere eseguito ad ogni ripetizione (clausola “@selector()”) e la ripetizione continua di tale intervallo di tempo (impostata tramite “repeats:YES“).

Proseguiamo con la definizione dei metodi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

- (void)aggiornaBlu{
	progressBar.progress = progressBar.progress + 0.1;
	if (progressBar.progress == 0.5){
		progressLabel.text = @"Applicando colore...";
		[self applicaBlu];
	}
	if (progressBar.progress == 1.0){
		progressLabel.text = @"Colore applicato!";
		[timer invalidate];
	}
}
 
- (void)aggiornaRosso{
	progressBar.progress = progressBar.progress + 0.1;
	if (progressBar.progress == 0.5){
		progressLabel.text = @"Applicando colore...";
		[self applicaRosso];
	}
	if (progressBar.progress == 1.0){
		progressLabel.text = @"Colore applicato!";
		[timer invalidate];
	}
}

Anche questi due metodi sono praticamente uguali. Alla riga 2 incrementiamo il valore della nostra barra di progresso, aumentandone il valore del 10%. Alla riga 3 troviamo un controllo if, che verifica se il valore della barra è 0.5 (ovvero siamo a metà): in caso affermativo, cambiamo il testo presente nella label, altrimenti lasciamo tutto invariato. Anche alla riga 7 un ciclo if controlla se la barra di progresso è arrivata al suo valore massimo: in tal caso inseriamo un nuovo testo nella label, e fermiamo il timer (con l’istruzione alla riga 9).

Nel primo ciclo if che abbiamo esaminato, notiamo che alla riga 5 viene richiamato il metodo “applicaBlu”: tale metodo avrà il compito di cambiare il colore allo sfondo della vista, con un’animazione che dovrà durare 5 secondi (infatti siamo al 50% del progresso, e la barra avanza del 10% ogni secondo). Ecco i due metodi che si occupano di fare ciò:

1
2
3
4
5
6
7
8
9
10
11
12
13

- (void)applicaBlu{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:5.0];
	self.view.backgroundColor = [UIColor blueColor];
	[UIView commitAnimations];
}
 
- (void)applicaRosso{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:5.0];
	self.view.backgroundColor = [UIColor redColor];
	[UIView commitAnimations];
}

In questi due metodi viene definita l’animazione che permette allo sfondo della nostra vista di cambiare colore. L’animazione rispecchia molto quella illustrata in un capitolo precedente. Alla riga 3 definiamo la durata di tale animazione (5 secondi); l’istruzione successiva è il risultato che vogliamo ottenere, ovvero il nostro colore di sfondo. Chiude il gruppo di istruzioni la riga 5, che avvia l’animazione.

Clicchiamo su “Build and Go!” e testiamo la nostra applicazione!

Se Avete Problemi, questo è il file di progetto.

La guida è stata tradotta e ampliata da Andrea Busi per “iSpazio” e “Bubi Devs“. Trovare il video tutorial originale a questo indirizzo: “UIProgressView Tutorial” – iPhone Development Central. I meriti delle rispettive versioni, quindi, sono dei legittimi autori.