Eccoci al quarto tutorial dei “DevTutorial”. Nella scorsa puntata ci siamo occupati della gestione delle immagini, di come muoverle e come creare un’animazione con esse. Oggi, invece, vedremo come implementare un’aspetto più comune, ovvero quello di realizzare una barra posta nella parte bassa dell’applicazione, che abbia dei pulsanti che compiano una determinata azione. Nel nostro caso questi due bottoni ci permetteranno di incrementare e decrementare un contatore posto al centro della schermata. Vedremo, infine, come implementare una funzione tanto gradia dell’iPhone/iPod Touch: l’autorotazione dello schermo.

1. Creiamo un nuovo progetto

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

Iniziamo, come sempre, definendo gli elementi necessari. Apriamo il file  “CountRotateAppViewController.h” e inseriamo le seguenti dichiarazioni:

#import <UIKit/UIKit.h>

@interface CountRotateAppViewController : UIViewController {
	IBOutlet UILabel *labelNumero;
}

-(IBAction)aggiungi;
-(IBAction)sottrai;

@end

Abbiamo definito una label, che ospiterà un numero, che sarà incrementato o decrementato in base al pulsante che verrà premuto (ovviamente saranno le azioni “aggiungi” e “sottrai” che si occuperanno di questo compito). Salviamo il file appena modificato e facciamo doppio clic su “CountRotateAppViewController.xib”, in cui andremo a definire l’aspetto della nostra applicazione.

2. Definiamo l’aspetto grafico

Iniziamo inserendo nella parte bassa della vista una UIToolbar, con due UIBarButtonItem: in uno scrivete “-”, nell’altro “+”. Noterete che i due bottoni sono quasi attaccati. Noi vogliamo che siano ai due estremi, quindi tra di essi inseriamo un “Flexible Space Bar Button Item”, in modo che restino sempre separati. Ecco come si presenterà la vostra toolbar:

Questo spazio flessibile ha una grossa utilità: non solo ci separa i due bottoni, ma ci permette di non doverci occupare della giusta distanza tra essi, anche nel caso che ne aggiungessimo un terzo. Inoltre esso ci permette di tenere i due bottoni alle estremità della barra anche nel caso in cui ruotassimo la nostra applicazione. Come facciamo a testarlo? Semplice. Cliccate sulla freccia presente nel titolo della finestra della nostra applicazione:

Vedrete che la schermata ruoterà!

E come possiamo notare i due bottoni restano agli estremi della nostra barra. Proprio il risultato che volevamo!

Riportiamo la finestra alla sua posizione originale, e inseriamo al centro una UILabel, partendo da un angolo in alto a sinistra, per poi ingrandirla fino all’angolo opposto. Nell’Attribute In- spector settate i seguenti parametri:

• “Text”: 0 (zero);
• Allineamento centrale;
• “Font Size”: 200

Dovreste avere il seguente risultato:

Proviamo ora a far ruotare la schermata come abbiamo fatto poco fa. Noteremo che lo zero non rimane in posizione centrale, ma addirittura viene per metà nascosto. Come facciamo a lasciarlo centrato? Anche qui ci viene in aiuto l’Interface Builder, che offre grandi potenzialità anche in questo aspetto.

Selezioniamo la label che contiene lo zero e apriamo il “Size Inspector”. Nella seconda parte possiamo vedere che vi è una sezione denominata “Autosizing”. Clicchiamo sulle due freccette rosse che vediamo nel riquadro piccolo, in modo da avere questo schema:

Proviamo ora a ruotare la nostra applicazione: lo zero resterà perfettamente in posizione centrale!

Ora che abbiamo definito la struttura grafica dell’applicazione, non ci resta altro che collegare l’elemento e le due azioni che abbiamo definito all’inizio del tutorial. Dal Pannello dei Documenti selezioniamo il File’s Owner e spostiamoci poi nel “Controller Connections” (come abbiamo già fatto nel capitolo 4). Dovete avere un pannello come questo:

Colleghiamo “labelNumero” con l’unica label presente al centro della vista, e le due azioni ai rispettivi bottoni (al bottone “+” l’azione “aggiungi”, mentre al bottone “-” l’azione “sottrai”). Se avete eseguito tutto in maniera corretta avrete questo risultato:

Salviamo tutto e chiudiamo Interface Builder.

3. Scriviamo il codice necessario

Prima di iniziare ad implementare i metodi che abbiamo già definito, aggiungete questa varia- bile al file “CountRotateAppViewController.h”:

@interface CountRotateAppViewController : UIViewController {
	IBOutlet UILabel *labelNumero;
	int numero;
}

Semplicemente, abbiamo definito una variabile intera alla riga 3, di nome “numero”, che conterrà il valore mostrato dalla label.

Passiamo, quindi, al file “CountRotateAppViewController.m”. Iniziamo con questo semplice metodo (dovreste trovarlo già presente nella classe, vi basterà eliminare i commenti che lo rendono nascosto):

- (void)viewDidLoad {
	[super viewDidLoad];
	numero = 0;
}

Questo metodo viene richiamato sempre all’avvio del file “.xib” associato alla classe (i file “.xib” sono quelli creati da InterfaceBuilder). In questo metodo possiamo inizializzare tutti i componenti che ci serviranno. Qui, in pratica, dobbiamo inserire tutte quelle operazioni che vogliamo vengano eseguite all’avvio dell’applicazione. Nel nostro esempio, vogliamo che la variabile “numero” sia impostata a zero. Prendete confidenza con tale metodo perchè lo incontrerete spesso nei prossimo tutorial.

Aggiungiamo, ora, le implementazioni per i due metodi che si occupano di aumentare e diminuire il valore della variabile “numero”:

- (IBAction)aggiungi{
	numero++;
	labelNumero.text = [[NSString alloc] initWithFormat:@"%i",numero];
}

- (IBAction)sottrai{
    numero--;
	labelNumero.text = [[NSString alloc] initWithFormat:@"%i",numero];
}

Questo due metodi non eseguono niente di complesso, si limitano a incrementare (o decrementare) la variabile “numero”, per poi visualizzarla nella label. Semplice vero?

L’ultima cosa da implementare è la rotazione della vista. Sempre nel file “CountRotateAppViewController.m” cercate e decommentate il seguente metodo (è già presente, vi basterà decommentarlo e modificare l’istruzione alla riga 2):

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
 // Return YES for supported orientations
 return YES;
}

Questo è un metodo della classe “UIViewController”, che implementa già la rotazione automatica dello schermo. Ancora una volta non dovremo fare veramente niente, in quanto sono le librerie del SDK a fornirci tutti pronto. Piccola nota: se non volessimo implementare l’auto-rotazione, ci basterebbe ritornare come valore “NO”, oppure semplicemente non inserire il metodo nell’applicazione.

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

Se Avete Problemi, questo è il file di progetto.

La guida è stata tradotta e ampliata da Andrea Busi per “iSpazio” e “Bubi Devs“. Trovare il video tutorial originale a questo indirizzo: “UIToolbar and AutoRotation” – iPhone Development Central. I meriti delle rispettive versioni, quindi, sono dei legittimi autori.