Eccoci con un nuovo tutorial semplice semplice. In questo articolo vedremo come implementare un’ “UIProgressBar“, ovvero la barra che si usa per segnalare all’utente il caricamento di un qualche cosa o lo svolgimento di un’azione. Nel nostro caso cambieremo il colore di sfondo della nostra applicazione. Vedremo, quindi, come utilizzare la classe “NSTimer“, ovvero un temporizzatore, che ci permetterà nel nostro caso di eseguire animazioni e transizioni con durata predefinita.
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:
#import
@interface ProgressColourViewController : UIViewController {
IBOutlet UILabel *progressLabel;
IBOutlet UIProgressView *progressBar;
IBOutlet UIButton *bottoneBlu;
IBOutlet UIButton *bottoneRosso;
}
- (IBAction)caricamentoColore:(id)bottone;
@end
La label definita alla riga 4 servirà per mostrare un messaggio all’utente sul grado di completamento dell’animazione, mentre la UIProgressBar darà la stessa informazioni ma in maniera più visiva (è una classica barra di caricamento). Abbiamo, inoltre, dichiarato anche due bottoni UIButton: vedremo, poi, il perchè di questa dichiarazione.
L’azione alla riga 11 verrà associata ad entrambi i bottoni, infatti sarà questo metodo ad avviare il cambio di colore dello sfondo. Nell’intestazione di questo metodo c’è anche un parametro “bottone” di tipo “id”: questo ci servirà per determinare quale bottone ha invocato il metodo, in modo da poter caricare il colore scelto dall’utente.
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 anche gli elementi “bottoneBlu” e “bottoneRosso” con i due relativi pulsanti. Colleghiamo, infine, l’azione “caricamentoColore” con entrambi i bottoni, selezionando “Touch Up Inside” dal menù a tendina che si presenta. Se avete eseguito tutto in maniera corretta dovreste avere questo risultato:
Abbiamo così terminato questa fase. Salviamo e chiudiamo Interface Builder.
3. Scriviamo il codice necessario
Dobbiamo ora definire due elemento e un paio di metodi che non abbiamo scritto inizialmente. Apriamo il file “ProgressColourViewController.h” e inserite le dichiarazioni mancanti:
#import
@interface ProgressColourViewController : UIViewController {
IBOutlet UILabel *progressLabel;
IBOutlet UIProgressView *progressBar;
IBOutlet UIButton *bottoneBlu;
IBOutlet UIButton *bottoneRosso;
NSTimer *timer;
UIColor *colore;
}
@property (nonatomic, retain) NSTimer *timer;
@property (nonatomic, retain) UIColor *colore;
- (IBAction)caricamentoColore:(id)bottone;
- (void)aggiornaColore ;
- (void)applicaColore ;
@end
Abbiamo definito un componente “NSTimer” (alla riga 10), che sarà il temporizzatore che ci permetterà di eseguire l’animazione prevista. Nella riga successiva è definito un elemento UIColor, che servirà per tener traccia del colore che deve essere applicato allo sfondo.
Sono stati dichiarati, inoltre, due nuovi metodi, che ci serviranno per implementare le azioni necessarie (righe 18 e 19).
Passiamo ora al file “ProgressColourViewController.m” e iniziamo ad implementare i metodi necessari. Inseriamo il seguente codice:
#import "ProgressColourViewController.h"
@implementation ProgressColourViewController
@synthesize timer;
@synthesize colore;
- (IBAction)caricamentoColore:(id)bottone {
progressBar.progress = 0.0;
if (bottone == bottoneBlu){
progressLabel.text = @"Caricamento colore blu...";
colore = [UIColor blueColor];
}else if (bottone == bottoneRosso) {
progressLabel.text = @"Caricamento colore rosso...";
colore = [UIColor redColor];
}
timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(aggiornaColore) userInfo:nil repeats:YES];
}
Questo metodo si occupa di avviare il caricamento del colore scelto dall’utente. Alla riga 9 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). Troviamo, poi, un controllo sul bottone che ha invocato il metodo (riga 10): se il bottone premuto dall’utente è quello per il colore blu, impostiamo la label indicando che viene caricato il blu, e assegniamo alla variabile “colore” il valore “[UIColor blueColor]”. Questo è un elemento predefinito della classe UIColor, che ci permette di utilizzare colori standard in maniera semplice e veloce. Nello stesso modo lavora la clausola “else if”, ovviamente controllando se il bottone premuto è quello per il colore rosso.
Alla riga 17, infine, viene definita la variabile timer, istanziandola con la classe NSTimer. Ci sono tre parametri molto importanti in questa funzione: 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:
- (void)aggiornaColore {
progressBar.progress = progressBar.progress + 0.1;
if (progressBar.progress == 0.5){
progressLabel.text = @"Applicando colore…";
[self applicaColore];
}
if (progressBar.progress == 1.0){
progressLabel.text = @"Colore applicato!";
[timer invalidate];
}
}
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 “applicaColore”: 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 tale metodo:
- (void)applicaColore {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:5.0];
self.view.backgroundColor = colore;
[UIView commitAnimations];
}
In questi metodo viene definita l’animazione che permette allo sfondo della nostra vista di cambiare colore. 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. Notate che il colore è quello della variabile “colore” (scusate il gioco di parole), che abbiamo settato nel metodo “caricamentoColore”. 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 con il tutorial, questo è il nostro file di progetto.
11 Responses to “T#073 – UIProgressView e NSTimer: come creare una semplice barra di caricamento”
30 Settembre 2010
Tweets that mention UIProgressView e NSTimer: creare una barra di caricamento nelle nostre applicazioni iPhone | devAPP -- Topsy.com[…] This post was mentioned on Twitter by Rynox, iPadWorld.it and devAPP, Bubi Devs. Bubi Devs said: T#073 – UIProgressView e NSTimer: come creare una semplice barra di caricamento: Eccoci con un nuovo tutorial semp… http://bit.ly/9NbyL7 […]
1 Ottobre 2010
NicolaMolto interessante! Mi chiedo però se non fosse stato più efficiente nonché più elegante implementare tutti metodi di questo tutorial parametrizzandoli: ad esempio:
(void)applicaColore: (UIColor)color {
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:5.0];
// ‘if’ opzionale
if(color == [UIColor redColor] || color == [UIColor blueColor]) {
self.view.backgroundColor = color;
[UIView commitAnimations];
}
}
con la relativa chiamata:
– (void)aggiornaColore: (UIColor)color {
UIColor *thisColor = color; // Blu o Rosso
progressBar.progress = progressBar.progress + 0.1;
if (progressBar.progress == 0.5){
progressLabel.text = @”Applicando colore…”;
[self applicaColore:thisColor];
}
if (progressBar.progress == 1.0){
progressLabel.text = @”Colore applicato!”;
[timer invalidate];
}
}
ed infine ‘caricamentoColore’:
– (IBAction)caricamentoColore {
progressBar.progress = 0.0;
progressLabel.text = @”Caricamento colore…”;
if(this.view.backgroundColor == [UIColor blueColor]) {
timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(aggiornaColore:redColor) userInfo:nil repeats:YES];
}
else
timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(aggiornaColore:blueColor) userInfo:nil repeats:YES];
}
Insomma una cosa del genere….dici che potrebbe andare? A mio avviso si risparmia un sacco di tempo e codice per metodi e outlets.
Preciso che ho scritto queste righe al volo e da Windows, quindi non garantisco la correttezza.
1 Ottobre 2010
NicolaNaturalmente in ‘caricamentoColore’ vanno scambiati i corpi nell’ if-else..
1 Ottobre 2010
Andrea Busiciao, certamente, la soluzione del tutorial non è la migliore, però forse è la più facile per chi è alle prima armi..
sicuramente le varie funzioni possono essere parametrizzate e ottimizzate, risparmiando righe di codice (ma non efficienza del programma 😉 )
2 Ottobre 2010
NicolaMah Andrea, non so se è la più facile considerati i disagi che provoca questa pratica di programmazione a lungo termine. Se una persona si abitua a programmare in questo modo prima o poi avrá seri problemi di estendibilità e leggibilità; poi boh, non mi sembra di aver scritto codice di più difficile interpretazione del tuo, le modifiche sono davvero minime seppur sostanziali…
2 Ottobre 2010
Andrea Busisi si, ma infatti non ho detto questo io xD
la tecnica migliore è sicuramente quella di rendere le funzioni generiche e di non duplicare il codice, cosa che non è stata fatta nel tutorial (abbastanza vecchiotto tra l’altro)..
appena ho tempo vedrò di sistemarlo e renderlo più corretto 😉
4 Ottobre 2010
Andrea BusiTutorial rivisto e corretto, ora il codice è più generalizzato 😉
Grazie a Nicola e a tutti quelli che me lo hanno segnalato via mail 😉
4 Ottobre 2010
NicolaE’ un piacere! 😉
Andrea sai mica come personalizzare una tabella come quella della ricerca spotlight in iOS? La userei ma non so da dove partire per personalizzarla! Magari un tutorial su questo sarebbe magnifico, se non è di troppo impegno!
PS: anche se da dietro le quinte, ti seguo sempre!
4 Ottobre 2010
Andrea Busiil piacere è nostro vedendo che gli utenti partecipano attivamente al blog 😉
per quanto riguarda le tabelle con celle personalizzate puoi analizzare questo tutorial: http://www.devapp.it/wordpress/t050-creiamo-un-client-twitter-per-iphone-parte-2.html
comunque siete in tanti a fare richieste sulle celle personalizzate, vedremo di fare anche un nuovo tutorial 😉
6 Ottobre 2010
NicolaCi avevo già dato un’ occhiata in passato…il fatto è che ho già buona dimestichezza con le celle personalizzate, ma ciò che io cercavo non riguardava solo queste, bensì qualcosa di più generale. Ad esempio, la tabella che esce fuori digitando qualcosa in spotlight implementa lo stesso comportamento dei contatti, in cui l’ intestazione della tabella (che è una grouped table) di un gruppo di contatti rimane fissa al top dello schermo finchè ci sono elementi in quella sezione, dopodichè scorre. Lo stesso comportamento si ha nella tabella spotlight, in cui l’ icona del file rimane fissa finchè ci sono elementi da scorrere appartenenti a quel tipo di file. Credo che ci sia in gioco l’ereditarietà con l’ applicazione contatti, ma non riesco a focalizzare bene il problema. So che non è facile capire bene cosa intendo semplicemente leggendo, bisognerebbe studiarla attentamente dal proprio iPhone. E’ una tabella davvero interessante, quella…merita sicuramente attenzione anche perchè porta dietro di sè praticamente tutti i concetti relativi alla programmazione delle tabelle (immagini nelle celle, celle personalizzate, ereditarietà di comportamenti, ecc..)
6 Aprile 2013
DevTutorial #5 – UIProgressView e NSTimer: come creare una semplice barra di caricamento - Bubi Devs[…] Leggi il tutorial completo su devAPP […]