{"id":3848,"date":"2010-07-01T10:44:31","date_gmt":"2010-07-01T08:44:31","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3848"},"modified":"2010-07-01T10:48:33","modified_gmt":"2010-07-01T08:48:33","slug":"t060-creiamo-unapplicazione-per-iphone-in-stile-brushes-parte-2","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t060-creiamo-unapplicazione-per-iphone-in-stile-brushes-parte-2\/","title":{"rendered":"T#060 – Creiamo un’applicazione per iPhone in stile “Brushes” [Parte 2]"},"content":{"rendered":"

\"pennelli-brushes-iphone\"<\/a> Nella prima parte del tutorial abbiamo visto come creare la struttura di base del nostro \u201cBrushes\u201d, inoltre abbiamo fatto in modo che l\u2019utente possa disegnare all\u2019interno dell\u2019applicazione.<\/p>\n

In questa seconda parte aggiungeremo alcuni aspetti fondamentali per migliorare l\u2019applicazione: la possibilit\u00e0 di cambiare la dimensione e il colore del pennello, e la possibilit\u00e0 di salvare i disegni.<\/p>\n

Vedremo, quindi, come due classi diverse possano comunicare tra loro, e come utilizzare il metodo \u201cimageSavedToPhotosAlbum\u201d che permette di salvare delle immagini nella galleria dell\u2019utente.<\/p>\n

1. Aggiungiamo le impostazioni<\/h4>\n

Iniziamo dichiarando nella classe “FlipsideViewController.h” gli elementi che poi andremo a definire in Interface Builder. Ecco il codice da inserire:<\/p>\n

\r\n@protocol FlipsideViewControllerDelegate;\r\n\r\n@interface FlipsideViewController : UIViewController {\r\n id <FlipsideViewControllerDelegate> delegate;\r\n\r\n IBOutlet UISlider *sliderRosso, *sliderBlu, *sliderVerde, *sliderAlpha, *sliderDimensione;\r\n IBOutlet UIImageView *viewColore;\r\n IBOutlet UILabel *labelDimensione;\r\n\r\n UIColor *colorePennello;\r\n float dimensionePennello;\r\n}\r\n\r\n@property (nonatomic, assign) id  delegate;\r\n@property (nonatomic, assign) UIColor *colorePennello;\r\n@property (nonatomic, assign) float dimensionePennello;\r\n\r\n- (IBAction)done;\r\n- (IBAction)cambiaColore;\r\n- (IBAction)cambiaDimensione;\r\n\r\n@end\r\n\r\n@protocol FlipsideViewControllerDelegate\r\n- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller;\r\n@end\r\n<\/pre>\n
Parte di questo codice \u00e8 gi\u00e0 presente nella classe. Alle righe 6, 7, 8 abbiamo definito gli elementi grafici che ci serviranno. Come potete vedere, ci serviranno tre slider per cambiare il colore del pennello (pi\u00f9 uno per la trasparenza alpha), una UIImageView in cui mostreremo il colore corrente, in modo che l’utente possa vedere subito quale colore sta selezionando, uno slider e una label per la dimensione del pennello. Abbiamo, inoltre, definito due nuove azioni (righe 15 e 16): essese verranno richiamate quando si muovono gli slider.<\/p>\n
Salviamo il file e apriamo “FlipsideView.xib”. Inserite i componenti necessari in modo da avere una struttura come la seguente:<\/p>\n
\"\"<\/a><\/p>\n
Dobbiamo eseguire i collegamenti con gli elementi che abbiamo definito in precedenza. Selezionate “File’s Owner” e nel pannello “Connection Inspector” collegate i vari slider e la UIImageView (niente di difficile). Se avete eseguito questi collegamenti correttamente avrete un pannello come questo:<\/p>\n
\"\"<\/a><\/p>\n
Dobbiamo collegare anche le due azioni adesso. Collegate “cambiaColore” con tutti e quattro gli slider del colore, selezionando ogni volta “Value Changed” nel men\u00f9 che vi appare. Collegate, infine, “cambiaDimensione” con lo slider della dimensione del pennello. Ecco come appare il vostro pannello con tutti i collegamenti effettuati:<\/p>\n
\"\"<\/a><\/p>\n
Abbiamo quasi concluso questa parte. Ci manca solo la definizione dei valori massimi e minimi dei vari slider. Selezioniamo il primo slider (quello per il rosso), spostiamoci nell’Attributes Inspector e controlliamo che come “Minumum Value” sia impostato 0.0, mentre come “Maximum Value” ci sia 1.0:<\/p>\n
\"\"<\/a><\/p>\n
Controllate anche i restanti slider dedicati al colore.<\/p>\n
Per lo slider della dimensione, invece, dobbiamo impostare dei valori diversi. Io ho scelto 1.0 come minimo, e 25.0 come massimo. Ovviamente potete variare come volete questi valori, magari effettuando delle prove.<\/p>\n
\"\"<\/a><\/p>\n
Abbiamo concluso la definizione grafica del pannello delle impostazioni. Salviamo il file e chiudiamo Interface Builder.<\/p>\n
2. Scriviamo il codice necessario<\/h4>\n
Dobbiamo ora impostare il codice necessario. Apriamo il file “FlipsideViewController.m” e iniziamo ad inserire questo codice:<\/p>\n
\r\n#import \"FlipsideViewController.h\"\r\n\r\n@implementation FlipsideViewController\r\n\r\n@synthesize delegate, colorePennello, dimensionePennello;\r\n\r\n- (void)viewDidLoad {\r\n [super viewDidLoad];\r\n self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];\r\n\r\n const CGFloat *components = CGColorGetComponents([colorePennello CGColor]);\r\n [sliderRosso setValue:components[0]];\r\n [sliderVerde setValue:components[1]];\r\n [sliderBlu setValue:components[2]];\r\n [sliderAlpha setValue:components[3]];\r\n [viewColore setBackgroundColor:colorePennello];\r\n labelDimensione.text = [NSString stringWithFormat:@\"%f\",dimensionePennello];\r\n [sliderDimensione setValue:dimensionePennello];\r\n}\r\n<\/pre>\n
Per prima cosa ricordatevi di inserire le @synthesize degli elementi “colorePennello” e “dimensionePennello”. Questi due valori li passeremo direttamente dalla “MainView”, quindi \u00e8 importante che ci siano le due propriet\u00e0 impostate correttamente. Passeremo i due valori in modo che all’apertura del pannello per modificare il pennello l’utente trovi i valori correnti che sta utilizzando (quindi colore e dimensione attuali).<\/p>\n
Nel metodo “viewDidLoad” facciamo proprio quello che vi ho appena detto, ovvero inizializziamo i componenti grafici ai valori del pennello. All’avvio dell’applicazione tali valori saranno rosso per il colore, e 5.0 per la dimensione. Questi valori, per\u00f2, potranno essere variati dall’utente, quindi \u00e8 necessario che ogni volta che viene aperta la vista delle impostazioni essi siano settati correttamente. In particolare, ricaviamo dal colore le varie componenti (come abbiamo gi\u00e0 visto nella prima parte del tutorial), e settiamo il valore degli slider (righe 11-15). Alla riga 16 impostiamo il colore della UIImageView, che ci mostrer\u00e0 cos\u00ec il colore del nostro pennello. Le ultime due righe, infine, servono per ricavare la dimensione del pennello e settare la label predisposta.<\/p>\n
Dobbiamo ora definire le due azioni collegate agli slider. Ecco i due metodi (davvero semplici) da implemetare:<\/p>\n
\r\n- (IBAction)cambiaColore{\r\n [viewColore setBackgroundColor:[UIColor colorWithRed:sliderRosso.value green:sliderVerde.value blue:sliderBlu.value alpha:sliderAlpha.value]];\r\n}\r\n\r\n- (IBAction)cambiaDimensione{\r\n labelDimensione.text = [NSString stringWithFormat:@\"%f\",sliderDimensione.value];\r\n}\r\n<\/pre>\n
Il primo metodo (“cambiaColore”) non fa altro che leggere i valori degli slider e settare lo sfondo dell’immagine con l’UIColor corrispondente. Il secondo metodo lavora nello stesso modo, solamente che visualizza il valore dello slider della dimensione del pennello. Semplici vero?<\/p>\n
Ci manca solo una modifica ad un metodo gi\u00e0 esistende. Dobbimo, infatti, passare alla classe “MainView” i nuovi valori della dimensione e del colore del pennello. Modifichiamo, quindi, il metodo “done” nel seguente modo:<\/p>\n
\r\n- (IBAction)done {\r\n dimensionePennello = sliderDimensione.value;\r\n colorePennello = [UIColor colorWithRed:sliderRosso.value green:sliderVerde.value blue:sliderBlu.value alpha:sliderAlpha.value];\r\n [self.delegate flipsideViewControllerDidFinish:self nuovoColore:colorePennello nuovaDimensione:dimensionePennello];\r\n}\r\n<\/pre>\n
Abbiamo semplicemente letto il valore della dimensione e del colore del pennello, per poi passarlo al metodo “flipsideviewControllerDidFinish”, che abbiamo opportunamente modificato (infatti vedrete che ci sono dei nuovi parametri che gli vengono passati).<\/p>\n
Torniamo al file “FlipsideViewController.h” e modifichiamo anche l’intestazione del metodo che troviamo nel fondo della classe:<\/p>\n
\r\n@protocol FlipsideViewControllerDelegate\r\n- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller nuovoColore:(UIColor*)colore nuovaDimensione:(float)dimensione;\r\n@end\r\n<\/pre>\n
Abbiamo quasi terminato.<\/p>\n
Torniamo al file “MainViewController.m”, dobbiamo modificare due cose. Dobbiamo fare in modo che venga passato alla vista delle impostazioni i valori del pennello, e, viceversa, che vengano aggiornati dopo che l’utente li ha variati.<\/p>\n
Iniziate modificando il metodo “flipsideViewControllerDidFinish”, che trovate gi\u00e0 nella vostra classe:<\/p>\n
\r\n- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller nuovoColore:(UIColor*)colore nuovaDimensione:(float)dimensione{\r\n\r\n const CGFloat *components = CGColorGetComponents([colore CGColor]);\r\n colorePennello = [[UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:components[3]] retain];\r\n dimensionePennello = dimensione;\r\n\r\n [self dismissModalViewControllerAnimated:YES];\r\n}\r\n<\/pre>\n
Come potete vedere, \u00e8 stata per prima cosa modificata l’intestazione del metodo (proprio quello che vi ho accennato poco fa). Vengono, poi, aggiornate le caratteristiche del pennello, inserendo il nuovo colore e la nuova dimensione.<\/p>\n
Il secondo metodo da modificare \u00e8 “showInfo”, anch’esso gi\u00e0 definito da XCode:<\/p>\n
\r\n- (IBAction)showInfo {\u00a0\u00a0 \u00a0\r\n\r\n FlipsideViewController *controller = [[FlipsideViewController alloc] initWithNibName:@\"FlipsideView\" bundle:nil];\r\n controller.delegate = self;\r\n controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;\r\n\r\n controller.dimensionePennello = dimensionePennello;\r\n controller.colorePennello = colorePennello;\r\n\r\n [self presentModalViewController:controller animated:YES];\r\n\r\n [controller release];\r\n}\r\n<\/pre>\n
A questo metodo aggiungiamo solo le righe 7 e 8, in modo da passare alla vista delle impostazioni le propriet\u00e0 correnti del nostro pennello (quelle che vengono lette nel metodo “viewDidLoad” che abbiamo scritto prima).<\/p>\n
Abbiamo concluso anche questa parte.<\/p>\n
3. Inseriamo il salvataggio delle nostre immagini<\/h4>\n
Voglia ora aggiungere una funzione molto importante: il salvataggio del disegno creato. Vogliamo permettere all’utente, quindi, di salvare il suo disegna, in modo che possa poi ritrovarlo nel Rullino Fotografico.<\/p>\n
Iniziamo definendo in “MainViewController” un metodo che assoceremo ad un pulsante nella nostra applicazione. Ecco cosa dovete aggiungere nel file “MainViewController.h”:<\/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- (IBAction)salva;\r\n\r\n@end\r\n<\/pre>\n
Come vedete abbiamo aggiunto solo la definizione del metodo “salva” alla riga 14.<\/p>\n
Salviamo il file e apriamo la vista “MainView.xib”. Nella toolbar inseriamo un bottone, dal “File’s Owner” colleghiamo l’azione salva a tale bottone. Se avrete eseguito tutto correttamente avrete i seguenti risultati:<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a><\/p>\n
Salvate tutto e spostatevi nel file “MainViewController.m”.<\/p>\n
Dobbiamo ora definire il metodo salva, scrivendo il codice necessario per salvare l’immagine nella galleria dell’utente. Ecco il codice da inserire:<\/p>\n
\r\n- (IBAction) salva{\r\n UIImageWriteToSavedPhotosAlbum(viewDisegno.image, self, @selector(imageSavedToPhotosAlbum: didFinishSavingWithError: contextInfo:), nil);\r\n}\r\n\r\n- (void)imageSavedToPhotosAlbum:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {\r\n NSString *messaggio;\r\n NSString *titolo;\r\n if (!error) {\r\n titolo = @\"Salvataggio\";\r\n messaggio = @\"Immagine salvata con successo\";\r\n } else {\r\n titolo = @\"Errore\";\r\n messaggio = [error description];\r\n }\r\n UIAlertView *alert = [[UIAlertView alloc] initWithTitle:titolo message:messaggio delegate:nil cancelButtonTitle:@\"OK\" otherButtonTitles:nil];\r\n