Eccoci al quarto tutorial dell’iSpazio Developer Program. Nella scorsa puntata ci siamo occupati della gestione delle immagini, di come muoverle e come creare un’animazione con esse. Oggi, invece, vedremo come implementare un’aspetto più comune, ovvero quello di realizzare una barra posta nella parte bassa dell’applicazione, che abbia dei pulsanti che compiano una determinata azione. Nel nostro caso questi due bottoni ci permetteranno di incrementare e decrementare un contatore posto al centro della schermata. Vedremo, infine, come implementare una funzione tanto gradia dell’iPhone/iPod Touch: l’autorotazione dello schermo.
TUTORIAL:
- Creiamo un nuovo progetto
- Creare l’interfaccia grafica dell’applicazione
- Creiamo le classi necessarie
- Aggiungiamo la rotazione automatica
- Facciamo funzionare i bottoni della barra!
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 “CountRotateApp” 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 “CountRotateAppViewController.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).
Sempre dalla libreria selezioniamo un componente “Toolbar” e trasciniamolo nella parte bassa della nostra vista. Dopo averlo trascinato facciamo doppio click sul bottone già presente, e modifichiamo il testo in “Sottrai”. Sempre dalla libreria selezioniamo un “Bar Button Item” e trasciniamolo all’interno della barra che abbiamo appena creato. Questa volta dobbiamo invece che settare solamente il nome, lo associamo ad un’identificatore già presente nell’Interface Builder. Andiamo, quindi, in Attribute Inspector e nel campo “Identifier” selezioniamo “Add”.
Noteremo subito che nel nostro bottone comparirà il simbolo “+”.
Dopo questi semplici step avremo un’applicazione che si presenterà così:
Proviamo a spostare il bottone “+” a destra. Esso ritornerà sempre nella sua posizione originale. Nostro errore? No. Come facciamo allora a spostarlo a destra? Semplice, aggiungiamo un componente “Flexible Space Bar Button Item”, che troviamo sempre nella libreria, e che ha proprio il compito di creare uno spazio tra i bottoni della barra. Aggiungiamolo tra i due bottoni ed otterremo una schermata come questa:
Questo componente ha una grossa utilità: non solo ci separa i due bottoni, ma ci permette di non doverci occupare della giusta distanza tra essi, anche nel caso che ne aggiungessimo un terzo. Inoltre esso ci permette di tenere i due bottoni alle estremità della barra anche nel caso in cui ruotassimo la nostra applicazione. Come facciamo a testarlo? Semplice. Cliccate sulla freccetta presente nel titolo della finestra della nostra applicazione:
Vedrete che la schermata ruoterà!
E come possiamo notare i due bottoni restano agli estremi della nostra barra. Proprio il risultato che volevamo.
Prendiamo ora una label, e inseriamola nella nostra vista, partendo da un angolo in alto a sinistra, per poi ingrandirla fino all’angolo opposto. In Attribute Inspector settate i seguenti parametri: “Text”: 0, allineamento centrale, e “Font Size” a 200. Dovreste avere il seguente risultato:
Proviamo ora a far ruotare la schermata come abbiamo fatto poco fa. Noteremo che lo zero non rimane in posizione centrale, ma addirittura esce dalla schermata dell’applicazione. Come facciamo a lasciarlo centrato? Anche qui ci viene in aiuto l’Interface Builder, che offre grandi potenzialità anche in questo aspetto.
Selezioniamo la label che contiene lo zero e apriamo il “Size Inspector”. Nella seconda parte possiamo vedere che vi è una sezione denominata “Autosizing”. Clicchiamo sulle due freccette rosse che vediamo nel riquadro piccolo, in modo da avere questo schema:
Proviamo ora a ruotare la nostra applicazione: lo zero resterà perfettamente in posizione centrale!
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 aggiungiamo le due classi e le due azioni che ci occorrono. Facciamolo nella seguente maniera:
Ora dobbiamo collegare queste azioni che abbiamo creato agli oggetti veri e propri. Entriamo nella scheda “Connections”, trasciniamo il pallino a fianco di “label” sulla label contenente lo zero, e “toolBar” sulla barra. Dovremmo avere le proprietà così impostate:
Adesso dobbiamo collegare le azioni ai due bottoni presenti nella barra. Iniziamo con il bottone “+” (Aggiungi). Anche per questo ci basterà trascinare l’azione “add” sul bottone corrispondente:
Dobbiamo, quindi, impostare l’azione sul bottone “Sottrai”. Questa volta la procedura è leggermente diversa. Clicchiamo sul bottone, ed entriamo ancora nel pannello “Connections”. Questa volta vedremo l’azione “selector”, trasciniamola sulla vista principale (non potremo fare in altro modo). Apparirà questo piccolo menù:
Clicchiamo ovviamente su “subtract”. Avremo così collegato anche questa azione. Nel pannello Connections dovreste avere questo risultato:
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 la rotazione automatica
Ora passiamo alla scrittura del codice in Xcode. Iniziamo spostando i due file (“MainView.m” e “MainView.h”) all’interno della cartella “Classes”:
Apriamo ora il file “MainView.h” e modifichiamo la riga di intestazione del metodo nel seguente modo:
Se proviamo ora a compilare l’applicazione e ad eseguirla noteremo che essa non fa nessuna delle azioni che vorremmo: non incrementa il contatore, non si ruota se ruotiamo l’iPhone. Dobbiamo quindi aggiungere tutte queste funzionalità.
Apriamo il file “CountRotateAppViewController.m” e impostiamo il metodo che permetterà alla nostra applicazione di ruotare quando viene ruotato il dispositivo. Dobbiamo modificare il metodo “shouldAutorotateToInterfaceOrientation” nel seguente modo:
Semplicemente impostiamo “YES” come valore di ritorno di questo metodo; è lo stesso commento presnte nel metodo a dirci di ritornare questo valore per abilitare l’autorientazione della nostra applicazione.
Clicchiamo ora su “Build and Go” e testiamo quello che abbiamo appena fatto. Nel Simulatore andiamo nel menù Hardware e selezioniamo “Ruota a sinistra” (o a destra, a vostro piacimento). La nostra applicazione ruoterà proprio come desiderato!
5. Facciamo funzionare i bottoni della barra!
Abbiamo quasi completato la nostra applicazione, manca solo.. la parte più importante! Dobbiamo, quindi, far funzionare i due bottoni presenti sulla barra, permettendogli di incrementare e decrementare il contatore.
Apriamo il file “MainView.h” e iniziamo con il dichiarare una variabile che conterrà il numero che poi noi andremo ad incrementare e a decrementare, e che verrà visualizzato. Dobbiamo quindi scrivere il seguente codice:
Qui non c’è bisogno di spiegazioni, possiamo facilmente capire che dichiariamo una variabile di tipo intero e la chiamiamo “numero”.
Apriamo ora il file “MainView.m” e scriviamo il seguente codice:
Il primo metodo, “awakeFromNib” viene chiamato all’avvio dell’applicazione, e azzera il valore della variabile numero. I due metodi, “add” e “subtract” fanno le stesse operazioni (con la sola differenza dell’operazione che compiono), ovvero prima incrementano (o decrementano) il valore della variabile numero, e poi la settano nella label predisposta per questo compito.
Clicchiamo su “Build and Go” e salviamo i file. Abbiamo così creato la nostra applicazione!!
Ecco due screen di come appare finita e funzionante:
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: “UIToolbar and AutoRotation” – iPhone Development Central. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.
Leggi o Aggiungi Commenti