{"id":9410,"date":"2012-09-17T14:57:06","date_gmt":"2012-09-17T12:57:06","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=9410"},"modified":"2012-09-17T14:57:06","modified_gmt":"2012-09-17T12:57:06","slug":"t111-come-utilizzare-uipageviewcontroller-con-lo-storyboard","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t111-come-utilizzare-uipageviewcontroller-con-lo-storyboard\/","title":{"rendered":"T#111 – Come utilizzare UIPageViewController con lo Storyboard"},"content":{"rendered":"

\"tutorial-beginner-devAPP\"<\/a> Cos’\u00e8 UIPageViewController? Come da nome, UIPageViewController \u00e8 un controller nativo di iOS (introdotto con la release 5.0) che permette di gestire le nostre viste in una struttura “a pagine”. Per fare un’esempio pratico \u00e8 quel controllo che viene normalmente utilizzato per visualizzare le pagine in iBooks e che ci fornisce out-of-the-box il bell’effetto “pagina piegata” (page curl) mentre sfogliamo.
\nStranamente la documentazione Apple, in merito, \u00e8 un po’ frammentaria e, a dirla tutta, non esiste una vera e propria guida ufficiale su come utilizzare questo controllo, ne tantomeno di come farlo usando lo Storyboard.<\/p>\n

Ovviamente, l’uso tramite Storyboard \u00e8 assolutamente opzionale, e potremmo utilizzare i classici nib\/xib; tuttavia lo Storyboard funziona in maniera un pochino pi\u00f9 intelligente, ci permette infatti di avere l’intera interfaccia della nostra applicazione in un’unico file, nel quale si va anche a descrivere il flusso delle applicazioni.<\/p>\n

Cosa faremo<\/h4>\n

Con questo tutorial andremo a realizzare una semplice applicazione che ci permetter\u00e0 di sfogliare avanti ed indietro due differenti viste.
\nCome vedrete le viste sono decisamente semplici, e la struttura del progetto anche, ma credo sia un buon punto di partenza per capire come funziona questo controllo.<\/p>\n

Iniziamo con il progetto<\/h4>\n

Per mostrare bene il funzionamento creeremo un nuovo progetto che popoleremo con tutto il necessario.
\nPer iniziare, quindi, lanciamo il nostro fidato Xcode e creiamo una nuova “Empty Application”.<\/p>\n

Chiamiamola “Pager” ed assicuriamoci di impostare come device iPhone e di utilizzare ARC:<\/p>\n


\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-01\"<\/a>
\n<\/center><\/p>\n

Premiamo “Next”, quindi “Create” ed eccoci: abbiamo un bel progetto che, fondamentalmente, non fa nulla.<\/p>\n

Per prima cosa, andiamo a rimuovere le parti che non ci interessano dal progetto e aggiungiamo lo Storyboard, istruendo il progetto per utilizzarlo.<\/p>\n

Creiamo quindi il file Storyboard premendo su File -> New -> File (oppure cmd+N) e selezionando “Storyboard” dalla sezione “User Interface”.
\nSelezioniamo quindi iPhone come “Device Family” e chiamiamolo “Storyboard”.<\/p>\n

A questo punto, i passaggi per dire al progetto di utilizzarlo sono due: per prima cosa dobbiamo agganciare il nostro Storyboard al progetto stesso; per fare questo premiamo sul progetto e, nella sezione “Main Storyboard” scegliamo il nostro file dalla lista:<\/p>\n


\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-02\"<\/a>
\n<\/center><\/p>\n

Dopodich\u00e8, dobbiamo rimuovere dal metodo application:didFinishLaunchingWithOptions:<\/em> tutte le parti relative al caricamento della UIWindow di default.
\nApriamo quindi il file AppDelegate.m e rimpiazziamo il suddetto metodo con il seguente:<\/p>\n

\r\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\r\n{\r\n    return YES;\r\n}\r\n<\/pre>\n
A questo punto siamo pronti per creare la nostra interfaccia.<\/p>\n
Definiamo l’interfaccia<\/h4>\n
Andiamo a definire la nostra interfaccia grafica; aprendo lo Storyboard ci troveremo davanti ad un file vuoto. Aggiungiamo il nostro bel UIPageViewController (lo trovate negli Objects, indicato dalla classica sfera gialla (che indica i controllers) e da un’icona a forma di libro. Prendiamo e trasciniamo:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-03\"<\/a>
\n<\/center><\/p>\n
Come vedete Xcode aggiunge una freccia che punta al nostro controller appena aggiunto. Questo indica che, all’avvio dell’applicazione, questo sar\u00e0 la prima vista mostrata. Nel caso in cui non dovesse apparire, comunque, potete tranquillamente selezionare l’UIPageViewController e dall'”Attribute Inspector” selezionare “Is Initial View Controller”.<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-04\"<\/a>
\n<\/center><\/p>\n
Adesso aggiungiamo due semplici UIViewController, che altro non sono che le varie “pagine” visualizzate da UIPageViewController.
\nIo ho configurato uno sfondo colorato ed una UILabel con del testo. Questo \u00e8 il risultato finale:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-05\"<\/a>
\n<\/center><\/p>\n
Ok, tutto semplice, no? Perfetto, adesso buttiamoci un po’ sul codice.<\/p>\n
Definiamo i file necessari<\/h4>\n
Creeremo ora i file relativi ad ogni singolo view controller che abbiamo specificato nello Storyboard.
\nSelezioniamo quindi File -> New -> File (o premiamo cmd+N) e, dalla sezione “Cocoa Touch” selezioniamo “Objective-C class”.<\/p>\n
Il primo controller sar\u00e0 una sottoclasse di UIPageViewController e lo chiameremo “RootViewController”; sar\u00e0 per iPhone o non ci interesser\u00e0 avere un file di interfaccia xib. Inseriamo i dati e premiamo Next:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-06\"<\/a>
\n<\/center><\/p>\n
Verranno creati due file: RootViewController.h e RootViewController.m
\nSeguendo la stessa procedura, andiamo a creare due sottoclassi di UIViewController chiamate “FirstViewController” e “SecondViewController”. Alla fine avremo sei file in pi\u00f9 nel nostro progetto:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-07\"<\/a>
\n<\/center><\/p>\n
Ora eliminiamo un po’ di codice inutile: selezioniamo, uno per uno, i tre file di implementazione (i file .m per intenderci) e rimuoviamo da essi il metodo initWithNibName:bundle:<\/p>\n
\r\n- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil\r\n{\r\n    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];\r\n    if (self) {\r\n        \/\/ Custom initialization\r\n    }\r\n    return self;\r\n}\r\n<\/pre>\n
Questo lo facciamo perch\u00e9 utilizziamo lo Storyboard e, questo metodo, viene utilizzato solo in fase di caricamento da nib\/xib. A noi quindi non serve e preferiamo avere del codice pulito, giusto??
\nOra che abbiamo i file base, dobbiamo associarli ai contenuti dello Storyboard.<\/p>\n
Uniamo codice e Storyboard<\/h4>\n
Cosa occorre fare ora? Dobbiamo dire ai controller presenti nello Storyboard quali classi hanno associate.<\/p>\n
Selezioniamo quindi il nostro UIPageViewController e, nel “Identity Inspector” alla voce “Class” inseriamo il nome della nostra sottoclasse di UIPageViewController, quindi RootViewController:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-08\"<\/a>
\n<\/center><\/p>\n
Selezioniamo quindi le due viste e facciamo la stessa cosa, selezionando per\u00f2 come “Class” prima “FirstViewController” e poi “SecondViewController”.<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-09\"<\/a>
\n<\/center><\/p>\n
Infine, dobbiamo applicare ad ognuna delle due viste un identificativo che ci permetta, dal codice, di fare riferimento ad esse.
\nSelezioniamo “Attribute Inspector” ed impostiamo alla voce “Identifier” il nostro identificativo; personalmente ho utilizzato “First View” per la prima pagina e “Second View” per la seconda:<\/p>\n

\n\"t111-utilizzare-UIPageViewController-con-lo-Storyboard-10\"<\/a>
\n<\/center><\/p>\n
Salviamo lo Storyboard, e torniamo sul codice, dove avverr\u00e0 la magia.<\/p>\n
Mettiamo insieme il tutto<\/h4>\n
Perfetto, abbiamo lo Storyboard terminato e correttamente associato alle classi che abbiamo creato. Ora dobbiamo dire al nostro UIPageViewController di utilizzare le nostre due viste come pagine.<\/p>\n
Andiamo quindi ad aggiungere due propriet\u00e0 private al nostro RootViewController, che vadano ad identificare le nostre viste. All’inizio del file includiamo i relativi header:<\/p>\n
\r\n#import \"FirstViewController.h\"\r\n#import \"SecondViewController.h\"\r\n<\/pre>\n
Dopodich\u00e9 nell’estensione privata della classe RootViewController (la trovate in cima al file RootViewController.m), andiamo ad aggiungere le due property; avremo questa estensione:<\/p>\n
\r\n@interface RootViewController ()\r\n@property (nonatomic, retain) FirstViewController *firstViewController;\r\n@property (nonatomic, retain) SecondViewController *secondViewController;\r\n@end\r\n<\/pre>\n
Ora, quando creiamo una property in realt\u00e0 stiamo facendo un sacco di cose; nel nostro caso quello che abbiamo fatto \u00e8 stato:<\/p>\n