{"id":3839,"date":"2010-06-30T14:58:28","date_gmt":"2010-06-30T12:58:28","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3839"},"modified":"2010-07-01T10:11:10","modified_gmt":"2010-07-01T08:11:10","slug":"t059-creiamo-unapplicazione-per-iphone-in-stile-brushes","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t059-creiamo-unapplicazione-per-iphone-in-stile-brushes\/","title":{"rendered":"T#059 – Creiamo un’applicazione per iPhone in stile “Brushes” [Parte 1]"},"content":{"rendered":"

Quello che ho pensato per voi questa volta \u00e8 un po’ particolare, ma secondo me molto carino e con molte cose utili all’interno da imparare. Sicuramente tutti voi conoscerete\u00a0Brushes<\/strong> (link iTunes<\/a>), un programma molto famoso per disegnare sul proprio iPhone e iPod Touch con le dita.<\/p>\n

Ho pensato, quindi, di spiegarvi come realizzarne uno tutto vostro! In questa prima parte vedremo come fare in modo che l’utente possa, muovendo il dito sullo schermo, disegnare a suo piacimento.<\/p>\n

Ovviamente in questa prima parte ci occuperemo solo di questo aspetto. Nel prossimo tutorial, invece, vedremo come rendere possibile la definizione di un pennello personale, con dimensione e colore a scelta.<\/p>\n

Ora, per\u00f2, concentriamoci sulla prima parte. Buon tutorial a tutti!<\/p>\n

1. Creiamo un nuovo progetto<\/h4>\n

Iniziamo creando il progetto per la nostra applicazione. Create un nuovo progetto edi tipo “Utility Application” e inserite “SampleBrushes” come nome.<\/p>\n

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

La struttura che abbiamo selezionato ci mette a disposizione due viste: una “Main View” che \u00e8 quella che appare inizialmente, e una “Flipside View”, che appare se viene premuto il pulsante “i” (info), con un’animazione gi\u00e0 definita. Queste due viste, quindi, potremo sfruttarle per creare la nostra applicazione: nella “Main View” creeremo la zona in cui l’utente potr\u00e0 disegnare, mentre nella “Flipside View” inseriremo le impostazioni (quindi il colore del pennello, la dimensione, etc).<\/p>\n

Prima di definire l’aspetto grafico della nostra applicazione, definiamo un componente che poi andremo a collegare con un elemento in Interface Builder.<\/p>\n

Aprite, quindi, il file “MainViewController.h” (nella sottocartella “Main View) e inserite le seguenti definizioni:<\/p>\n

\r\n#import \"FlipsideViewController.h\"\r\n\r\n@interface MainViewController : UIViewController <FlipsideViewControllerDelegate> {\r\n IBOutlet UIImageView *viewDisegno;\r\n\r\n}\r\n\r\n- (IBAction)showInfo;\r\n- (IBAction)cancella;\r\n\r\n@end\r\n<\/pre>\n
Alla riga 4 abbiamo definito un oggetto di tipo UIImageView, che sar\u00e0 l’oggetto in cui l’utente disegner\u00e0, e che visualizzer\u00e0, quindi, una serie di componenti grafiche colorate. Alla riga 10, invece, abbiamo definito un’azione, che ci servir\u00e0 per cancellare tutto ci\u00f2 che l’utente ha disegnato.<\/p>\n
2. Definiamo l’aspetto grafico dell’applicazione<\/h4>\n
Salviamo il file e apriamo “MainView.xib”. Ci ritroveremo con una vista come questa:<\/p>\n
\"\"<\/a><\/p>\n
Dobbiamo modificarne un po’ l’aspetto. Iniziamo scegliendo come colore di sfondo il bianco (lo fate semplicemente dal pannello Attributes Inspector). Cancellate, inoltre, il bottone “i” che \u00e8 presente nell’angolo basso destro della vista.
\nInserite, quindi, un componente di tipo “UIImageView”, in modo che occupi tutta la vista:<\/p>\n
\"\"<\/a><\/p>\n
Aggiungete, poi, una UIToolbar sul fondo della vista stessa. Io ho messo come stile della toolbar “Black Translucent”, ovviamente voi potete farla come preferite. Inserite, inoltre, due bottoni “Bar Button Item”, e un “Flexible Space Bar Button Item” tra i due. Il primo bottone rinominatelo in “Cancella” mentre il secondo in “Settings” (Impostazioni \u00e8 troppo lunga come dicitura xD). Ecco l’aspetto finale della mia applicazione:<\/p>\n
\"\"<\/a><\/p>\n
Ovviamente sarebbe pi\u00f9 carino inserire delle immagini nei bottoni, ma per semplicit\u00e0 ho inserito dei semplici nomi.<\/p>\n
Colleghiamo, ora, l’elemento e le azioni che abbiamo definito poco fa via codice (l’azione “showInfo” era gi\u00e0 presente di default). Dal pannello dei documenti selezioniamo “File’s Owner” e spostiamoci in “Connections Inspector”. Colleghiamo “viewDisegno” con la UIImageView che abbiamo inserito, l’azione “cancella” colleghiamola con l’omonimo pulsante, mentre “showInfo” collegatela con il bottone “Settings”. Se avrete eseguito tutto correttamente avrete un pannello delle connesioni come questo:<\/p>\n
\"\"<\/a><\/p>\n
Abbiamo concluso questa fase. Possiamo salvare il tutto e chiudere Interface Builder.<\/p>\n
3. Definiamo i metodi necessari<\/h4>\n
Torniamo ora al file “MainViewController.h”. Dobbiamo definire degli elementi che ci serviranno nel nostro programma. Ecco il codice da aggiungere a quello gi\u00e0 presente:<\/p>\n
\r\n#import \"FlipsideViewController.h\"\r\n\r\n@interface MainViewController : UIViewController <FlipsideViewControllerDelegate> {\r\n IBOutlet UIImageView *viewDisegno;\r\n\r\n CGPoint ultimoPunto;\r\n\r\n float dimensionePennello;\r\n UIColor *colorePennello;\r\n}\r\n\r\n- (IBAction)showInfo;\r\n- (IBAction)cancella;\r\n\r\n@end\r\n<\/pre>\n
Analizziamo gli elementi che abbiamo appena inserito. Alla riga 6 abbiamo definito un oggetto CGPoint, che non \u00e8 altro che un contenitore delle deu componenti di un punto: le coordinate x e y. Questo ci servir\u00e0 per sapere il punto precedente a quello considerato, permettendoci cos\u00ec di tracciare una linea. Alla riga 9 e 10 definiamo le caratteristiche del pennello: dimensione e colore. La dimensione \u00e8 una variabile di tipo reale (float), mentre il colore \u00e8 definito dal tipo UIColor, che inizializzeremo con lo standard RGB.<\/p>\n
Queste sono le uniche dichiarazioni di cui abbiamo bisogno. Salviamo quindi questo file e spostiamoci in “MainViewController.m”.<\/p>\n
Le azioni che ci interessa definire saranno da implementare in 3 metodi tipici della gestione del multitouch:<\/p>\n