iSpazio TrashApp – iSpazio Developer Program #3 

Eccoci per un nuovo tutorial dell’iSpazio Developer Program.

Abbiamo notato con grande piacere che gli scorsi tutorial hanno avuto un buon successo, e molti utenti si sono cimentati nella programmazione dell’iPhone. Alcuni, giustamente, chiedevano maggiori spiegazioni, insomma, erano più orientati ad un vero e proprio corso. Il nostro obbiettivo, però, non è quello di fornire un corso preciso e dettagliato, perchè finiremmo solo con l’annoiare i più, che non lo leggerebbero nemmeno. Ecco perchè noi cerchiamo di proporre brevi esempi, carini, divertenti ma soprattutto concreti, per creare una piccola applicazione e fornire una panoramica generale sugli strumenti e sulle funzioni dell’iPhone SDK. Sta all’utente smaliziato e curioso andare a vedere la documentazione ufficiale (che non manca sul sito di Apple) e capire a fondo i meccanismi dell’SDK.
Se però molti di voi volessero qualche lezione più orientata sul lato0 teorico, fatelo presente nei commenti e vedremo di organizzare qualcosa. Dopo avervi annoiato con questa premessa, vediamo di iniziare il tutorial vero e proprio.

In questa “terza puntata” realizzeremo una’applicazione che ci darà un’infarinatura sulla gestione delle immagini. Vedremo, infatti, come creare un finto cestino, in cui potremo trascinare un documento, e da cui potremo ripristinare il file eliminato. Ovviamente non andremo a toccare veri file salvati sul nostro dispositivo, si tratterà di una semplice animazione.

TUTORIAL:

1. Creiamo un nuovo progetto
2. Aggiungiamo i componenti grafici
3. Colleghiamo gli oggetti con le azioni
4. Aggiungiamo la gestione dello spostamento del logo
5. Implementiamo l’effetto “cancellazione”
6. Aggiungiamo la funzione al tasto “Ripristina”

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 “TrashApp” e fate clic su “Save”. Abbiamo così creato il nostro nuovo progetto.

2. Aggiungiamo i componenti grafici

Nella cartella del progetto entrate in “Resources” e fate doppio clic sul file “MainWindow.xib”, si aprirà l’Interface Builder. Ora, aprite la Libreria (dal menù “Tools -> Library”), scegliete l’oggetto “View” e trascinatelo all’interno della vista della vostra applicazione. Dovreste avere una schermata come questa:

Ora dobbiamo sistemare le parti grafiche della nostra applicazione. Per prima cosa ci servono due immagini per il nostro cestino, una con il cestino vuoto e una con il cestino pieno. Eccovele, ovviamente in puro stile Mac (potete benissimo utilizzare altre immagini a vostro piacimento):

Ora ci serve un qualcosa da eliminare. Un foglio, un documento o, visto che siamo in ambiente Mac.. un logo di Windows!! Eccovi quindi il file in questione:

Dobbiamo, adesso, assemblare il tutto all’interno della nostra applicazione. Salvate le immagini che vi abbiamo postato e copiatele all’interno della cartella del vostro progetto. Avrete quindi una cartella così composta:

Ora, tenendo aperta la finestra del Finder, trascinate le tre immagini nel vostro progetto in Xcode, vi apparirà la seguente finestra:

Fate click su “Add”, assicurandovi che ci sia la spunta accando al progetto “TrashApp”. Vedrete così le tre immagini comparire nel vostro progetto.
Tornate ora in Interface Builder e aggiungete alla vostra vista due componenti “UIImageView” e un “Round Rect Button”, in modo da avere un layout simile a questo:

ATTENZIONE: assicuratevi che la prima UIImageView che inserite vada nella posizione in basso, altrimenti avrete dei problemi nelle fasi successive del tutorial.

Ora dobbiamo collegare i vari componenti alle immagini che abbiamo appena scaricato. Clicchiamo sul primo componente UIImageView (quello più in alto, ma il secondo che avete inserito!), apriamo il pannello “Attributes Inspector” dal menu “Tools”. Nel menù a tendina “Images” selezioniamo il file “windows icon.png”, e lo vedremo comparire anche nell’applicazione. Spuntiamo, inoltre, la casella “User Interaction Enabled”. Avremo un pannello così impostato:

Facciamo la stessa cosa per la UIImageView sottostante, selezionando come immagine “TrashIconEmpty.png”, ma senza spuntare “User Interaction Enabled”.
Inseriamo all’interno del bottone la scritta “Ripristina”, aggiustiamo le dimensioni e la posizione delle due immagini fino ad avere un risultato come questo:

3. Colleghiamo gli oggetti con le azioni

Per ora non abbiamo definito nessuna azione, ci siamo limitati ad aggiungere i componenti grafici che ci serviranno. Vediamo di colmare queste lacune.

Sempre in Interface Builder cliccate sullo sfondo dell’applicazione, e dalla finestra “Attribute Inspector” entrate nella sezione “View Identity”.
Nel campo “Class” scrivete “MainView”, nella sezione “Class Outlets” fate due clic sul pulsante “+” per aggiungere due elementi. Il primo rinominatelo in “paperView”, il secondo in “trashView”, e in entrambi i tipi inserite “UIImageView”. Cliccate, poi, sul “+” della sezione “Class Actions”, rinominando il nuovo elemento in “restore:”.
Dovreste avere, quindi, una schermata come questa:

Ora dobbiamo connettere gli elementi con le azioni appena create. Andiamo nella scheda “Connections” (sempre in “Attribute Inspector”), vedremo i due elementi (paperView e trashView) che abbiamo appena creato. Clicchiamo sul pallino che troviamo a fianco e trasciniamo paperView sul logo di Windows, mentre trashView sull’immagine del cestino. Dovremmo avere questo risultato:

Clicchiamo, ora, sul pulsante della nostra applicazione, e, sempre in “Attribute Inspector” andiamo ancora nella sezione “Connections”. Troviamo la voce “Touch Up Inside” e trasciniamo il pallino sullo sfondo della nostra applicazione. Si aprirà questo piccolo menù:

clicchiamoci e vedremo che verrà creata la connessione.

Salviamo il tutto dal menù “File -> Save”. Controlliamo che la classe “Main View” sia selezionata, facendo clic sullo sfondo dell’applicazione e, nella scheda Identity, assicuriamoci di vedere “Main View” dove lo abbiamo scritto noi in precedenza.

Ora dobbiamo salvare questa classe nel nostro progetto. Dal menù “File” selezioniamo “Write Class Files”. Si aprirà una finestra in cui dovremo selezionare il percorso del nostro progetto, poi la cartella “Classes” e infine fare clic su “Save”.

Nella schermata che apparirà subito dopo selezioniamo il nostro progetto “TrashApp” e poi clicchiamo su “Add”.

Ora possiamo chiudere l’Interface Builder e tornare ad Xcode.

4. Aggiungiamo la gestione dello spostamento del logo

Vedremo che la classe “Main View” che abbiamo appena salvato è presente nel progetto. Prendiamo i due file (uno con estensione “.h”, l’altro “.m”) e trasciniamoli nella sottocartella Classes.

Adesso inziamo a inserire un po’ di codice. Entrate nel file “MainView.h” e rendetelo così:

Ora apriamo il file “MainView.m”. Dobbiamo implementare la funzione che gestirà l’applicazione quando l’utente toccherà il logo di Windows che vorrà eliminare. Per fare ciò dobbiamo implementare il metodo “touchesMoved”. Per chi volesse vedere la documentazione ufficiale, non deve far altro che andare nel menù “Help -> Documentation” e cercare il metodo appena presentato.
Dovremo aggiungere, inoltre, il metodo “touchesEnded”. Il codice sarà quindi così fatto:

Cosa facciamo con il primo metodo? Semplice. Salviamo nella variabile “touch” l’evento che l’utente compie toccando un qualsiasi oggetto della nostra applicazione. Controlliamo, poi, che l’oggetto toccato corrisponda a “paperView”, cioè al logo di Windows: se l’oggetto è proprio quello, teniamo il centro dell’oggetto (che nel frattempo viene mosso dall’utente) con la posizione del dito sullo schermo. Ovvero, è come se spostassimo fisicamente l’oggetto con il nostro dito e lo muovessimo su un piano.

Proviamo a cliccare su “Build and Go”: l’applicazione partirà e noi potremo trascinare per tutto lo schermo il logo di Windows. Come possiamo subito notare, se passiamo il logo sopra il cestino non succede niente, così come il pulsante “Ripristina” non ha nessun effetto. Vediamo di aggiungere, quindi, le funzionalità mancanti.

5. Implementiamo l’effetto “cancellazione”

Dobbiamo, ora, aggiungere una funzione che permetta di eliminare il logo di Windows quando esso passa sopra il cestino. Iniziamo scrivendo il seguente codice nel file “MainView.m” (dobbiamo aggiungere il codice al metodo che abbiamo creato in precedenza):

In questo metodo diciamo semplicemene che se il frame di paperView (ovvero il logo di Windows) è contenuto in quello del cestino, deve essere chiamato il metodo throwAway. Prima di chimaare tale metodo, inoltre, cambiamo l’immagine del cestino vuoto con quella del cestino pieno (caricandola dal file “TrashIconFull.png”).
Dobbiamo, quindi, definire proprio questo metodo. Aggiungiamo la dichiarazione nel file “MainView.h” nel seguente modo:

Ora ritorniamo nel file “MainView.m” e scriviamo la seguente implementazione del metodo:

In questo codice definiamo l’animazione che avrà il logo di Windows quando verrà sposato sopra il cestino, ovvero scomparirà.

Ora dobbiamo solo aggiungere un framework al nostro progetto, altrimenti otteremo due errorei in fase di compilazione. Per fare cio, cliccate con il tasto destro (oppure Ctrl + click) sulla cartella “Frameworks” del progetto, e ciccate su “Add -> Existing Frameworks”

Nella finestra che vi si apre, navigate fino a questo percorso:

/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS2.0.sdk/System/Library/Frameworks

Quando arrivate in quella cartella selezionate “CoreGraphics.framework” e cliccate su “Add”. Nella finestra successiva assicuratevi di spuntare il progetto in cui siamo lavorando:

Ora clicchiamo su “Build and Go” e proviamo la nostra applicazione. Se trasciniamo il logo di Windows sul cestino esso scompare!
Nota: se non avete questa animazione, controllate due cose. La prima è che il logo di Windows non si nasconda dietro il cestino. Se così fosse, non avete seguito quello che vi ho detto nella costruzione dell’Interfaccia!! Ma non ndisperate, vi basterà entrare in Interface Builder e scambiare l’ordine dei due componenti (ovviamente invertendo anche le immagini e le proprietà associate). La seconda, invece, che la dimesione del logo (sempre in Interface Builder) e del componente UIImageView non sia maggiore di quella del cestino, altrimenti il controllo che abbiamo scritto nel metodo “touchesEnded” fallisce e non viene lanciata l’animazione. Anche in questo caso ci basta entrare in Interface Builder e ridimensionare il componente UIImageView.

6. Aggiungiamo la funzione al tasto “Ripristina”

Ora non ci resta che aggiungere al funziona al bottone “Rispristina”, che per ora non esegue nessuna azione. Dobbiamo solo implementare il metodo “restore”, che dovreste già trovare dichiarato nel file “MainView.m”. Il codice da aggiungere è il seguente:

Cosa esegua questo metodo si può inture facilmente. Eseguiamo un’animazione inversa rispetto a quella dell’eliminazione del logo, riportando l’immagine alla sua posizione originale (che fissiamo noi), e torniamo a cambiare immagine del cestino, questa volta rimettendo quella del cestino vuoto.

Clicchiamo ora su “Build and Go” e gustiamoci la nostra nuova applicazione 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: TrashTutorial – iPhone DevCentral. I meriti quindi relativamente alla versione inglese, sono del legittimo autore.