T#053 – TrashApp, come utilizzare le immagini tramite “touch”

In questo nuovo tutorial dedicato alla programmazione per iPhone SDK realizzeremo un’applicazione che ci darà un’infarinatura sulla gestione delle immagini tramite il tocco. Vedremo, infatti, come creare un finto cestino, in cui potremo trascinare un documento al suo interno,vedremo quindi come ripristinare il file “eliminato”. Ovviamente non andremo a toccare veri file salvati sul nostro dispositivo, si tratterà di una semplice animazione interattiva, nulla di più, giusto per capire come funzionano alcuni metodi legati ai comandi imposti via touchscreen.

1. Definiamo il progetto

Aprimo Xcode, selezioniamo “File -> New Project”. Nel menù che ci appare selezioniamo “View-based Application”, clicchiamo su “Choose…” e immettiamo come nome “TrashApp”, facciamo infine clic su “Save”. Abbiamo così creato il nostro nuovo progetto.

Prima di fare qualsiasi cosa, inseriamo nel nostro progetto le immagini che ci serviranno. Io utilizzerò le seguenti immagini: due per il cestino e una l’elemento da eliminare (cosa meglio di un logo di Windows? xD):

Trasciniamo quindi le immagini nel progetto XCode e, nel pop-up che ci apparirà, mettiamo la spunta su “Copy items into destination group’s folder (if needed)”. Noterete ora le immagini all’interno del progetto:

Prima di definire la struttura grafica della nostra applicazione, andiamo a definire i componenti che poi ci serviranno. Apriamo il file “TrashAppViewController.h” e inseriamo le seguenti definizioni:

1
2
3
4
5
6
7
8
9
10

#import <UIKit/UIKit.h>
 
@interface TrashAppViewController : UIViewController {
    IBOutlet UIImageView *imageLogo;
    IBOutlet UIImageView *imageCestino;
}
 
- (IBAction)ripristina;
 
@end

Abbiamo definito gli elementi necessari: alle righe 4 e 5 due UIImageView, che conterranno il cestino (pieno o vuoto a seconda del caso) e il logo da eliminare. Alla riga 8, infine, abbiamo definito l’azione che ci permetterà di ripristinare il logo dopo la sua eliminazione.

2. Definiamo l’aspetto grafico dell’applicazione

Procediamo, ora, con la creazione della struttura grafica della nostra applicazione. Salviamo il file “TrashAppViewController.h” appena modificato e apriamo quindi “TrashAppViewController.xib”, che avvierà Interface Builder. La finestra è per ora molto semplice e si presenterà così:

Inseriamo, per prima cosa, gli elementi necessari: due componenti UIImageView e un UIButton.

Attenzione: la prima UIImageView che inserite deve essere quella in basso, altrimenti avrete problemi nelle fasi successive!

Ecco come si presenterà la nostra applicazione:

Ora dobbiamo collegare i vari componenti alle immagini che abbiamo inserito all’inizio del progetto. Clicchiamo sul primo componente UIImageView (quello più in alto, il secondo che avete inserito!) e apriamo il pannello “Attributes Inspector”. 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 logo”, aggiustiamo le dimensioni e la posizione delle due immagini (in modo che i bordi delle UIImageView coincidano con le immagini al loro interno) fino ad avere un risultato come questo:

Ora non dobbiamo fare alto che collegare gli elementi che abbiamo definito all’inizio di questo tutorial con i componenti all’interno della nostra applicazione. Dal Pannello dei Documenti selezioniamo il “File’s Owner”:

Se apriamo ora il “Connections Inspector”, dovremmo vedere i seguenti elementi:

Prendiamo il “pallino” che troviamo a fianco di “imageLogo” e trasciniamolo sul logo di Windows, mentre quello di “imageCestino” sull’immagine del cestino. Colleghiamo, infine, l’azione: il pallino “ripristina:” sul bottone, e nel menù che appare selezioniamo “Touch Up Inside”. Se abbiamo eseguito tutto in maniera corretta avremo un pannello come il seguente:

Abbiamo concluso questa fase del tutorial. Salviamo tutto e chiudiamo Interface Builder.

3. Implementiamo il movimento del logo

Apriamo il file “TrashAppViewController.h” e dichiarando un paio di elementi che ci serviranno:

1
2
3
4
5
6
7
8
9
10
11
12
13

#import <UIKit/UIKit.h>
 
@interface TrashAppViewController : UIViewController {
    IBOutlet UIImageView *imageLogo;
    IBOutlet UIImageView *imageCestino;
 
	BOOL cancellato;
}
 
- (IBAction)ripristina;
- (void)cancella;
 
@end

Alla riga 7 abbiamo aggiunto una variabile che ci servirà per controllare se il nostro oggetto è già stato eliminato (quindi, al valore YES corrisponderà il logo eliminato, con NO il nostro logo sarà ancora visibile); lo stesso vale per il metodo “cancella”, che si occuperà invece dell’animazione legata all’eliminazione del logo.

Implementiamo ora i metodi necessari. Apriamo il file “TrashAppViewController.m” e inseriamo il seguente codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
	UITouch *touch = [[event allTouches] anyObject];
	if ([touch view] == imageLogo) {
		imageLogo.center = [touch locationInView:self.view];
	}
}
 
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
	if (CGRectContainsRect([imageCestino frame], [imageLogo frame])){
		imageCestino.image = [UIImage imageNamed:@"TrashIconFull.png"];
		[self cancella];
	}
}
 
- (void)cancella{
	cancellato = YES;
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:0.5];
	imageLogo.transform = CGAffineTransformMakeScale(.001, .001);
	[UIView commitAnimations];
}

Abbiamo definito tre metodi, che si occuperanno del movimento del logo di Windows e della sua cancellazione. vediamoli nel dettaglio:

• touchesMoved, (dalla riga 1 alla 6) In questo metodo, salviamo nella variabile “touch” l’evento che l’utente compie toccando un qualsiasi oggetto della nostra applicazione (riga 2). Controlliamo, poi, che l’oggetto toccato corrisponda a “imageLogo” (riga 3), cioè al logo di Windows: se l’oggetto è proprio quello, teniamo traccia del centro dell’oggetto (che nel frattempo viene mosso dall’utente) con la posizione del dito sullo schermo (riga 4). Ovvero, è come se spostassimo fisicamente l’oggetto con il nostro dito e lo muovessimo su un piano.
• touchesEnded, (dalla riga 8 alla 18) In questo metodo diciamo semplicemente che se il frame di “imageLogo” (ovvero il logo di Windows) è contenuto in quello del cestino (riga 9), deve essere chiamato il metodo “cancella”, che si occuperà dell’animazione della cancellazione (riga 11). Prima di chiamare tale metodo, inoltre, cambiamo l’immagine del cestino vuoto con quella del cestino pieno (riga 10). Se il logo, invece, non è stato spostato sopra il cestino, eseguiamo una semplice animazione, che riporta l’immagine al centro della vista (dalla riga 13 alla 16).
• cancella, (dalla riga 20 alla 26) In questo metodo definiamo l’animazione che avrà il logo di Windows quando verrà sposato sopra il cestino. Alla riga 16 cambiamo il valore della variabile “cancella”, in modo da sapere che il logo è stato eliminato. Alla riga 17 definiamo il punto di partenza della nostra animazione, mentre con l’istruzione successiva ne definiamo la durata. La riga 19 è l’animazione vera e propria, che farà scomparire il logo. Con l’ultima istruzione, infine, definiamo la fine dell’animazione.

4. Il ripristino del logo

Abbiamo quasi terminato la nostra applicazione, manca solo la definizione dell’azione “ripristina:”. Tale metodo è già stato definito da Interface Builder, quindi noi dobbiamo solo scrivere il codice al suo interno. Ecco le istruzioni da inserire:

1
2
3
4
5
6
7
8
9
10

- (IBAction)ripristina {
	if (cancellato) {
		[UIView beginAnimations:nil context:NULL];
		[UIView setAnimationDuration:0.5];
		imageLogo.transform = CGAffineTransformIdentity;
		imageCestino.image = [UIImage imageNamed:@"TrashIconEmpty.png"];
		imageLogo.center = CGPointMake(155.0, 100.0);
		[UIView commitAnimations];
	}
}

Questo metodo è speculare a “cancella”, in quanto dobbiamo eseguire l’animazione inversa! Andremo, quindi, ad eseguire un’animazione, che porterà il logo dal cestino (in cui si trova) alla posizione originale (o quasi, in quanto è definita in modo arbitrario da noi, alla riga 7).

Clicchiamo ora su “Build and Go!”, e testiamo la nostra applicazione funzionante!

Nota: se non avete l’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 disperate, 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 dimensione 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.

Se avete problemi con il tutorial, questo è il nostro file di progetto.