{"id":3680,"date":"2010-06-17T15:29:15","date_gmt":"2010-06-17T13:29:15","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3680"},"modified":"2010-06-22T10:05:42","modified_gmt":"2010-06-22T08:05:42","slug":"t053-trashapp-come-utilizzare-le-immagini-tramite-touch","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t053-trashapp-come-utilizzare-le-immagini-tramite-touch\/","title":{"rendered":"T#053 – TrashApp, come utilizzare le immagini tramite “touch”"},"content":{"rendered":"

\"Tutorial<\/a> In questo nuovo tutorial dedicato alla programmazione per iPhone SDK realizzeremo un’applicazione che ci dar\u00e0 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\u00e0 di una semplice animazione interattiva, nulla di pi\u00f9, giusto per capire come funzionano alcuni metodi legati ai comandi imposti via touchscreen.<\/p>\n

1. Definiamo il progetto<\/h4>\n

Aprimo Xcode, selezioniamo “File -> New Project”. Nel men\u00f9 che ci appare selezioniamo “View-based Application”, clicchiamo su “Choose\u2026” e immettiamo come nome “TrashApp”, facciamo infine clic su “Save”. Abbiamo cos\u00ec creato il nostro nuovo progetto.<\/p>\n


\n\"Tutorial<\/a>
\n<\/center><\/p>\n

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


\n\"Tutorial<\/a> \"Tutorial<\/a> \"Tutorial<\/a>
\n<\/center><\/p>\n

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


\n\"Tutorial<\/a>
\n<\/center><\/p>\n

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:<\/p>\n

\r\n#import \r\n \r\n@interface TrashAppViewController : UIViewController {\r\n    IBOutlet UIImageView *imageLogo;\r\n    IBOutlet UIImageView *imageCestino;\r\n}\r\n \r\n- (IBAction)ripristina;\r\n \r\n@end\r\n<\/pre>\n
Abbiamo definito gli elementi necessari: alle righe 4 e 5 due UIImageView<\/em>, 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\u00e0 di ripristinare il logo dopo la sua eliminazione.<\/p>\n
2. Definiamo l’aspetto grafico dell’applicazione<\/h4>\n
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\u00e0 Interface Builder<\/em>. La finestra \u00e8 per ora molto semplice e si presenter\u00e0 cos\u00ec:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Inseriamo, per prima cosa, gli elementi necessari: due componenti UIImageView<\/em> e un UIButton<\/em>. <\/p>\n
Attenzione:<\/strong> la prima UIImageView che inserite deve essere quella in basso, altrimenti avrete problemi nelle fasi successive!<\/em><\/p>\n
Ecco come si presenter\u00e0 la nostra applicazione:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Ora dobbiamo collegare i vari componenti alle immagini che abbiamo inserito all’inizio del progetto. Clicchiamo sul primo componente UIImageView<\/em> (quello pi\u00f9 in alto, il secondo che avete inserito!) e apriamo il pannello “Attributes Inspector”. Nel men\u00f9 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\u00ec impostato:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Facciamo la stessa cosa per la UIImageView<\/em> 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<\/em> coincidano con le immagini al loro interno) fino ad avere un risultato come questo:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Ora non dobbiamo fare alto che collegare gli elementi che abbiamo definito all’inizio di questo tutorial con i componenti all\u2019interno della nostra applicazione. Dal Pannello dei Documenti selezioniamo il “File’s Owner”:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Se apriamo ora il “Connections Inspector”, dovremmo vedere i seguenti elementi:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
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\u00f9 che appare selezioniamo “Touch Up Inside”. Se abbiamo eseguito tutto in maniera corretta avremo un pannello come il seguente:<\/p>\n

\n\"Tutorial<\/a>
\n<\/center><\/p>\n
Abbiamo concluso questa fase del tutorial. Salviamo tutto e chiudiamo Interface Builder.<\/p>\n
3. Implementiamo il movimento del logo<\/h4>\n
Apriamo il file “TrashAppViewController.h” e dichiarando un paio di elementi che ci serviranno:<\/p>\n
\r\n#import \r\n \r\n@interface TrashAppViewController : UIViewController {\r\n    IBOutlet UIImageView *imageLogo;\r\n    IBOutlet UIImageView *imageCestino;\r\n \r\n\tBOOL cancellato;\r\n}\r\n \r\n- (IBAction)ripristina;\r\n- (void)cancella;\r\n \r\n@end\r\n<\/pre>\n
Alla riga 7 abbiamo aggiunto una variabile che ci servir\u00e0 per controllare se il nostro oggetto \u00e8 gi\u00e0 stato eliminato (quindi, al valore YES corrisponder\u00e0 il logo eliminato, con NO il nostro logo sar\u00e0 ancora visibile); lo stesso vale per il metodo “cancella”, che si occuper\u00e0 invece dell’animazione legata all’eliminazione del logo.<\/p>\n
Implementiamo ora i metodi necessari. Apriamo il file “TrashAppViewController.m” e inseriamo il seguente codice:<\/p>\n
\r\n- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {\r\n\tUITouch *touch = [[event allTouches] anyObject];\r\n\tif ([touch view] == imageLogo) {\r\n\t\timageLogo.center = [touch locationInView:self.view];\r\n\t}\r\n}\r\n \r\n- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {\r\n\tif (CGRectContainsRect([imageCestino frame], [imageLogo frame])){\r\n\t\timageCestino.image = [UIImage imageNamed:@\"TrashIconFull.png\"];\r\n\t\t[self cancella];\r\n\t}\r\n}\r\n \r\n- (void)cancella{\r\n\tcancellato = YES;\r\n\t[UIView beginAnimations:nil context:NULL];\r\n\t[UIView setAnimationDuration:0.5];\r\n\timageLogo.transform = CGAffineTransformMakeScale(.001, .001);\r\n\t[UIView commitAnimations];\r\n}\r\n<\/pre>\n
Abbiamo definito tre metodi, che si occuperanno del movimento del logo di Windows e della sua cancellazione. vediamoli nel dettaglio:<\/p>\n