Siamo così giunti al quinto tutorial. 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.

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

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.
Dalla libreria (”Tools -> Library”) selezioniamo un componente di tipo “UIView” 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 i due oggetti 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

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 file di progetto.

La guida è stata creata in italiano da Andrea Busi per “iSpazio” e “Bubi Devs“. Trovare il video tutorial originale a questo indirizzo: “UIProgressView Tutorial” – iPhone Development Central. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.

478 visite