Siamo così giunti al quinto appuntamento con l‘iSpazio Developer Program. Lo scorso articolo ci ha mostrato come implementare una barra che eseguiva delle azioni, e come gestire l’autorotazione. In questo tutorial vedremo come implementare la “ProgressBar”, ovvero quella barra che segna il caricamento, lo svolgimento di un’azione. Nel contempo cambieremo il colore di sfondo della nostra applicazione.
TUTORIAL:
- Creiamo un nuovo progetto
- Creare l’interfaccia grafica dell’applicazione
- Creiamo le classi necessarie
- Aggiungiamo il codice necessario
1. Creiamo un nuovo progetto
Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “ViewBased Application”, clicchiamo su “Choose…” e immettiamo come nome “ProgressColour” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.
Prima di fare qualsiasi altra operazione, selezioniamo nell’editor Xcode la cartella “Resources” del nostro progetto ed eliminiamo il file “ProgressColourController.xib”. Basterà cliccare con il tasto destro sul file, selezionare “Delete” e poi cliccare su “Also move to Trash”.
2. Creare l’interfaccia grafica dell’applicazione
Una volta eseguite queste semplici operazioni, andiamo a creare l’interfaccia grafica della nostra applicazione. Facciamo doppio click sul file “MainWindow.xib”, si aprirà così l’Interface Builder, con cui ormai abbiamo già preso conoscenza.
Selezioniamo la vista della nostra applcazione, e apriamo l’Attribute Inspector. Nel campo “NIB Name” eliminiamo la voce “CountRotateAppViewController” (semplicemente cancellando il testo), ovvero il file che abbiamo cancellato in precedenza.
Se premiamo poi invio e torniamo a selezionare la vista vedremo che essa ha mutato la scritta centrale, ed ora apparirà così:
Ora, dalla libreria (”Tools -> Library”) selezioniamo un componente di tipo “View” e trasciniamolo nella nostra applicazione. Andiamo poi in “Identity Inspector” e in Class scriviamo “MainView”.
Abbiamo creato la vista principale della nostra applicazione che, se vogliamo, possiamo personalizzare a nostro piacere (ad esempio impostando un colore di sfondo diverso dal classico bianco).
Dalla libreria prendiamo ora un componente di tipo “Label” e trasciniamolo nella nostra vista dell’applicazione e ingrandiamo le dimesioni estedendolo a tutta la larghezza dela vista. Dall’Attribute Inspector cancelliamo i contenuto della proprietà “Text”, centriamo l’allineamento e mettiamo la dimensione del font a 20. Dovreste avere un pannello degli attributi come questo:
Aggiungiamo ora gli altri componenti necessari. Sempre nella libreria prendiamo un componente “Progress View” e trasciniamolo nella nostra vista, sistemandolo appena sotto la label che abbiamo aggiunto in precedenza. Dall’Attribute Inspector settiamo il valore di “Progress” a zero.
Ora dobbiamo inserire due bottoni, ovvero due “Round Rect Button”. Inseriamoli uno sopra l’altro, e nel primo in alto scriveremo il testo “Applica colore rosso”, mentre nel secondo “Applica colore blu”.
Avremo quindi un risultato come questo:
3. Creiamo le classi necessarie
Fino ad ora ci siamo occupati puramente degli aspetti grafici della nostra applicazione. Vediamo ora di aggiungere i controlli che ci serviranno.
Restiamo sempre nell’Interface Builder, e assicuriamoci di aver selezionato la vista principale. Andiamo nell’Identity Inspector, e controlliamo che in “Class” vi sia selezionata “MainView” che abbiamo scritto in precedenza. Aggiungiamo le due classi e le due azioni che ci occorrono. Facciamolo nella seguente maniera:
Dopo aver creato le azioni e gli eventi, dobbiamo collegarli con gli oggetti relativi. Entriamo nel pannello “Connections” (Connections Inspector). Prendiamo il pallino a fianco di “progressLabel” e trasciniamolo nella label vuota dell’applicazione; facciamo lo stesso con “progressView” ma trasciniamolo sulla barra di progresso. Avremo quindi il pannello che mostrerà le seguenti proprietà:
Ora dobbiamo fare le stesse operazioni con i due bottoni. Colleghiamo “iniziaCaricamentoRosso” sul bottone che contiene la scritta “Applica colore rosso”. Apparirà un menù pop-un come questo:
Selezioniamo la voce “Touch Up Inside”.
Facciamo poi lo stesso procedimento con il bottone per il colore blu, collegandolo all’azione “iniziaCaricamentoBlu”.
Avremo, alla fine, un pannello Connections come questo:
Ora non ci resta che salvare le proprietà che abbiamo appena impostato in un file di classe. Andiamo nel menù “File -> Write Class Files…” e salviamo la classe “MainView” nella cartella Classes del nostro progetto.
Clicchiamo su “Save” e nella schermata successiva selezioniamo il nostro progetto prima di cliccare su “Add”.
Possiamo ora chiudere l’Interface Builder cliccando su “Save” nell’avviso che ci comparirà.
4. Aggiungiamo il codice necessario
Ora passiamo alla scrittura del codice in Xcode. Iniziamo spostando i due file (”MainView.m” e “MainView.h”) all’interno della cartella “Classes”:
Apriamo il file “MainView.h” e modifichiamo il codice nel seguente modo:
Abbiamo qui dichiarato tutti i metodo che ci serviranno nella nostra applicazione, e una variabile “timer”, che ci servirà per il conteggio.
Fatto ciò apriamo il file “MainView.m” e immettiamo il seguente codice:
Questi due metodi hanno il compito di caricare un determinato colore. Settano la stringa “Caricamento colore…” nella label predisposta, e creano un timer.
Restiamo sempre nello stesso file e inseriamo ora questi due metodi:
Nei due metodi “aggiornaProgressoXXX” eseguiamo quelle operazioni che avverranno durante l’attesa, ovvero durante lo scorrimento del timer. Quando il progresso dell’opeazione (e la relativa barra) arriveranno a 0.5 (ovvero al 50%) aggiorneremo la laber con la scritta “Applicando colore…”, mentre quand l’operazione sarà conclusa stamperemo “Colore applicato!”.
Ora mancano i metodi che applicano il colore vero e proprio. Eccoli:
In questi due ultimi metodi eseguiamo il cambiamento vero e proprio, applicando il colore rosso o blu allo sfondo.
Clicchiamo ora su “Build and Go!” e testiamo la nostra applicazione funionante!!
Se Avete Problemi, questo è il nostro file di progetto.
La guida è stata creata in italiano da Andrea Busi per iSpazio.net. Trovare il video tutorial originale a questo indirizzo: “UIProgressView Tutorial” – iPhone Development Central. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.
Se hai trovato interessante questo articolo, condividilo e fallo leggere anche ai tuoi amici:
Di Andrea Busi