Nella prima parte del tutorial abbiamo visto come creare la struttura di base del nostro “Brushes”, inoltre abbiamo fatto in modo che l’utente possa disegnare all’interno dell’applicazione.

In questa seconda parte aggiungeremo alcuni aspetti fondamentali per migliorare l’applicazione: la possibilità di cambiare la dimensione e il colore del pennello, e la possibilità di salvare i disegni.

Vedremo, quindi, come due classi diverse possano comunicare tra loro, e come utilizzare il metodo “imageSavedToPhotosAlbum” che permette di salvare delle immagini nella galleria dell’utente.

1. Aggiungiamo le impostazioni

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

@protocol FlipsideViewControllerDelegate;

@interface FlipsideViewController : UIViewController {
 id <FlipsideViewControllerDelegate> delegate;

 IBOutlet UISlider *sliderRosso, *sliderBlu, *sliderVerde, *sliderAlpha, *sliderDimensione;
 IBOutlet UIImageView *viewColore;
 IBOutlet UILabel *labelDimensione;

 UIColor *colorePennello;
 float dimensionePennello;
}

@property (nonatomic, assign) id  delegate;
@property (nonatomic, assign) UIColor *colorePennello;
@property (nonatomic, assign) float dimensionePennello;

- (IBAction)done;
- (IBAction)cambiaColore;
- (IBAction)cambiaDimensione;

@end

@protocol FlipsideViewControllerDelegate
- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller;
@end

Parte di questo codice è già 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ù 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.

Salviamo il file e apriamo “FlipsideView.xib”. Inserite i componenti necessari in modo da avere una struttura come la seguente:

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:

Dobbiamo collegare anche le due azioni adesso. Collegate “cambiaColore” con tutti e quattro gli slider del colore, selezionando ogni volta “Value Changed” nel menù che vi appare. Collegate, infine, “cambiaDimensione” con lo slider della dimensione del pennello. Ecco come appare il vostro pannello con tutti i collegamenti effettuati:

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:

Controllate anche i restanti slider dedicati al colore.

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.

Abbiamo concluso la definizione grafica del pannello delle impostazioni. Salviamo il file e chiudiamo Interface Builder.

2. Scriviamo il codice necessario

Dobbiamo ora impostare il codice necessario. Apriamo il file “FlipsideViewController.m” e iniziamo ad inserire questo codice:

#import "FlipsideViewController.h"

@implementation FlipsideViewController

@synthesize delegate, colorePennello, dimensionePennello;

- (void)viewDidLoad {
 [super viewDidLoad];
 self.view.backgroundColor = [UIColor viewFlipsideBackgroundColor];

 const CGFloat *components = CGColorGetComponents([colorePennello CGColor]);
 [sliderRosso setValue:components[0]];
 [sliderVerde setValue:components[1]];
 [sliderBlu setValue:components[2]];
 [sliderAlpha setValue:components[3]];
 [viewColore setBackgroundColor:colorePennello];
 labelDimensione.text = [NSString stringWithFormat:@"%f",dimensionePennello];
 [sliderDimensione setValue:dimensionePennello];
}

Per prima cosa ricordatevi di inserire le @synthesize degli elementi “colorePennello” e “dimensionePennello”. Questi due valori li passeremo direttamente dalla “MainView”, quindi è importante che ci siano le due proprietà 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).

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ò, potranno essere variati dall’utente, quindi è 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à 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à così il colore del nostro pennello. Le ultime due righe, infine, servono per ricavare la dimensione del pennello e settare la label predisposta.

Dobbiamo ora definire le due azioni collegate agli slider. Ecco i due metodi (davvero semplici) da implemetare:

- (IBAction)cambiaColore{
 [viewColore setBackgroundColor:[UIColor colorWithRed:sliderRosso.value green:sliderVerde.value blue:sliderBlu.value alpha:sliderAlpha.value]];
}

- (IBAction)cambiaDimensione{
 labelDimensione.text = [NSString stringWithFormat:@"%f",sliderDimensione.value];
}

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?

Ci manca solo una modifica ad un metodo già 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:

- (IBAction)done {
 dimensionePennello = sliderDimensione.value;
 colorePennello = [UIColor colorWithRed:sliderRosso.value green:sliderVerde.value blue:sliderBlu.value alpha:sliderAlpha.value];
 [self.delegate flipsideViewControllerDidFinish:self nuovoColore:colorePennello nuovaDimensione:dimensionePennello];
}

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).

Torniamo al file “FlipsideViewController.h” e modifichiamo anche l’intestazione del metodo che troviamo nel fondo della classe:

@protocol FlipsideViewControllerDelegate
- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller nuovoColore:(UIColor*)colore nuovaDimensione:(float)dimensione;
@end

Abbiamo quasi terminato.

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.

Iniziate modificando il metodo “flipsideViewControllerDidFinish”, che trovate già nella vostra classe:

- (void)flipsideViewControllerDidFinish:(FlipsideViewController *)controller nuovoColore:(UIColor*)colore nuovaDimensione:(float)dimensione{

 const CGFloat *components = CGColorGetComponents([colore CGColor]);
 colorePennello = [[UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:components[3]] retain];
 dimensionePennello = dimensione;

 [self dismissModalViewControllerAnimated:YES];
}

Come potete vedere, è 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.

Il secondo metodo da modificare è “showInfo”, anch’esso già definito da XCode:

- (IBAction)showInfo {    

 FlipsideViewController *controller = [[FlipsideViewController alloc] initWithNibName:@"FlipsideView" bundle:nil];
 controller.delegate = self;
 controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;

 controller.dimensionePennello = dimensionePennello;
 controller.colorePennello = colorePennello;

 [self presentModalViewController:controller animated:YES];

 [controller release];
}

A questo metodo aggiungiamo solo le righe 7 e 8, in modo da passare alla vista delle impostazioni le proprietà correnti del nostro pennello (quelle che vengono lette nel metodo “viewDidLoad” che abbiamo scritto prima).

Abbiamo concluso anche questa parte.

3. Inseriamo il salvataggio delle nostre immagini

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.

Iniziamo definendo in “MainViewController” un metodo che assoceremo ad un pulsante nella nostra applicazione. Ecco cosa dovete aggiungere nel file “MainViewController.h”:

#import "FlipsideViewController.h"

@interface MainViewController : UIViewController <FlipsideViewControllerDelegate> {
 IBOutlet UIImageView *viewDisegno;

 CGPoint ultimoPunto;

 float dimensionePennello;
 UIColor *colorePennello;
}

- (IBAction)showInfo;
- (IBAction)cancella;
- (IBAction)salva;

@end

Come vedete abbiamo aggiunto solo la definizione del metodo “salva” alla riga 14.

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:

Salvate tutto e spostatevi nel file “MainViewController.m”.

Dobbiamo ora definire il metodo salva, scrivendo il codice necessario per salvare l’immagine nella galleria dell’utente. Ecco il codice da inserire:

- (IBAction) salva{
 UIImageWriteToSavedPhotosAlbum(viewDisegno.image, self, @selector(imageSavedToPhotosAlbum: didFinishSavingWithError: contextInfo:), nil);
}

- (void)imageSavedToPhotosAlbum:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo {
 NSString *messaggio;
 NSString *titolo;
 if (!error) {
 titolo = @"Salvataggio";
 messaggio = @"Immagine salvata con successo";
 } else {
 titolo = @"Errore";
 messaggio = [error description];
 }
 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:titolo message:messaggio delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
 
×
;
 
×
;
}

Come potete vedere il codice è molto semplice. Il metodo salva non fa altro che richiamare un metodo “imageSavedToPhotosAlbum”, che si occupa di salvare l’immagine nella galleria. In tale metodo, infatti, non vedrete istruzioni che si occupano del salvataggio, ma solo un controllo se l’operazione è andata a buon fine. Viene infatti controllata la variabile “error” (riga 8), e viene impostato un messaggio da visualizzare poi all’utente, che dovrà essere avvisato se il salvataggio si è concluso correttamente oppure se ci sono stati degli errori.

Tutto molto semplice come sempre!

Abbiamo concluso! Cliccate su “Build and Go!” e testate il vostro programma funzionante!

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