Avrete ormai capito che l’accoppiata iOS 5 e Xcode 4.2 ha portato tantissime novità per noi programmatori iPhone e iPad. Alcune di queste comportano delle vere piccole rivoluzioni nel “vecchio” modo di programmare.
Mi riferisco soprattutto ad ARC (ne abbiamo parlato qui) e all’argomento oggetto di questo nuovo tutorial: Storyboard.
Ma cos’è Storyboard?
Storyboard è un nuovo modo introdotto da Apple per disegnare le interfacce grafiche dei nostri programmi iPhone e iPad, ma soprattutto per gestire la navigazione tra i vari viewcontroller.
Su tutti i forum dedicati ad iOS (anche sul nostro) le domande più ricorrenti riguardano proprio il passaggio tra una view e un’altra, dimostrazione che la logica dietro ai viewcontroller non viene facilmente compresa.
Storyboard si prefigge proprio questo scopo: fornire un modo semplice, grafico e per quanto sia possibile privo di codice, per navigare tra i viewcontroller che compongono la nostra applicazione.
Ma storyboard non è solo questo, perché ha introdotto tante altre novità nella gestione delle tableview e delle celle personalizzate (sembra che alla Apple leggano i forum per cercare i topic più frequenti!)
Il nostro progetto introduttivo a Storyboard
Oggi impareremo ad usare storyboard creando lo scheletro di una applicazione tipica, dotata di tabbarviewcontroller e di navigationcontroller, non entrerò nel dettaglio di tutte le funzioni, ma alla fine di questo articolo sarete in grado di utilizzarlo con successo nelle vostre applicazioni.
Benché questo sia un articolo introduttivo va considerato come un “aggiornamento” quindi ho dato per scontato che il lettore conosca già cos’è un viecontroller, come si crea una nuova classe su Xcode e come si popoli una tableview, se non avete chiari questi concetti date una lettura alle nostre precedenti guide e parliamone sul forum.
Apriamo Xcode ed iniziano con il nostro progetto. Per semplicità partiremo con un progetto per iPhone utilizzando il template “single view application”. Io ho chiamato il mio “devappStoryBoards”. Assicuriamoci che sia spuntata la voce “Use Storyboard” e “Use Automatic Retain Counter”.
Notiamo all’apertura del progetto che non sono presenti i classici file xib per il disegno dell’interfaccia, ma al suo posto è presente un unico file “Mainstoryboard.storyboard“, dentro questo file andremo a gestire sia la grafica dei singoli viewcontroller che la navigazione tra di essi.
Selezionando il file noteremo che è già presente un primo viewcontroller, o meglio una “scena”, come preferisce chiamarle Apple in questo caso. Una freccia entrante sulla sinistra indica che questa scena è la prima scena che verrà visualizzata. Tale opzione è modificabile attraverso l’opzione dell’inspector che vedete in questa immagine:
Possiamo gestire la grafica di questo viewcontroller come abbiamo sempre fatto, trascinando gli oggetti dalla libreria direttamente sulla scena desiderata.
ATTENZIONE: per poter trascinare gli oggetti è necessario che non sia attivo lo zoom, quindi, se non riuscite a rilasciare gli oggetti, fate semplicemente doppio click su un’area vuota per riportare tutto alle dimensioni normali.
Nell’esempio che vi sto mostrando ho trascinato un paio di controlli (fatelo anche voi fino ad ottenere l’effetto desiderato) quindi ho compilato il progetto ed ecco il risultato:
TabBarViewcontroller con Storyboard
Andiamo avanti con il nostro progetto, ci eravamo prefissati di creare un’applicazione con un tabBarViewController… quindi, ora che abbiamo preso un po’ la mano, cancelliamo il viewcontroller che abbiamo personalizzato poco fa e trasciniamo al centro dell’area di lavoro un tabBarViewController. Vi servirà uno schermo piuttosto grande per visualizzare tutto contemporaneamente. Appariranno infatti nello schermo tre scene: il tabBarController e due viewController generici collegati da una freccia.
Il significato è piuttosto intuitivo: il tabBarController è il “contenitore” e gli altri due viewController sono i “contenuti”. Questa relazione è identificabile dal simbolo che vedete in foto:
Personalizziamo a piacere i due viewcontroller e proviamo a compilare l’applicazione… Che ne dite? Abbiamo ottenuto un ottimo risultato senza aver scritto neanche una riga di codice.
Navigationcontroller e Storyboard
Passiamo ora ad aggiungere alla nostra applicazione un navigationController, lo scopo è quello di visualizzare in un terzo pulsante del tabBarController una tableView per visualizzare delle informazioni
Per farlo vedremo una nuova funzionalità: trasciniamo nell’area di lavoro un tableViewController e, una volta selezionato, selezioniamo dal menù “Edit->Embed in->Navigation controller” questo farà apparire nell’area di lavo un navigationcontroller già collegato al nostro tableviewcontroller:
Per far funzionare il tutto ci manca ancora un ultimo passaggio: collegare il navigation controller al tabBarController che abbiamo già creato. Anche in questo caso è tutto molto semplice infatti basterà cliccare con il tasto destro del mouse sul tabBarController, trascinare il puntatore sul navigationController e scegliere infine “relationship” nel menù che appare.
L’effetto finale è questo:
Se proviamo ad eseguire il nostro progetto vedremo che ora cliccando sul terzo tabItem apparirà la tableView con tanto di barra del navigationController.
Vi sarete accorti però che non abbiamo inserito né IBOutlet né IBAction e soprattutto che la tabella è vuota. Questo perché gli oggetti che abbiamo trascinato nell’area di lavoro sono dei controller generici, non sono i nostri viewcontroller.
Possiamo creare quindi i nostri viewcontroller tramite il menù “file->new->new file”. Nel nostro esempio ho creato un tableViewController:
Ed ho selezionato il tableViewController presente nell’area di lavoro modificando la sua proprietà Class come si vede in foto:
27 Responses to “T#103 – Introduzione all’uso di Storyboard”
1 Dicembre 2011
ignaziocSono l’autore dell’articolo…per qualsiasi domanda non esitate a scrivere sul forum.
1 Dicembre 2011
JJSaccolol’unica pecca, l’unica GROSSA pecca, è che funziona solo con iOS >= 5… e quindi bisognerebbe togliere tutta l’utente di iPhone 3G (e perché no, anche di iPhone EDGE)! Per cui aspetterò almeno un anno prima di iniziare ad usarlo
1 Dicembre 2011
Antoniocomplimenti, articolo molto interessante. sono passato ad xcode 4.2 dopo aver usato per moltissimo tempo la versione 3.2.6. trovo lo storyboard uno strumento molto utile!
1 Dicembre 2011
LucaTi semplifica la vita nello sviluppo o no? io sinceramente ho provato ad utilizzarlo per la realizzazione di un progetto tipo drill down tableView, ma non è chemi sia trovato bene.. anche ses ad essere sincero non so se il problema era più che altro mio nel dover un po’ cambiare impostazione di lavoro..
1 Dicembre 2011
LucaSpero di non aver sbagliato a chiedere direttamente nel commento!!!!!
1 Dicembre 2011
GabuStoryboard da molto l’idea di uno strumento che permette di fare il mock-up dell’app. sembra molto utile. ma io sapevo che si può usarlo soltanto nelle applicazioni openGL. non per altri template. giusto? anche perché avevo provato a fare un’app una specie di hallo world ma non riuscivo a trovare lo storyboard.
3 Dicembre 2011
ignaziocnon è solo per fare mockup e si può usare per tutti i tipi di app, non solo opengl. bisogna solo setterlo all’inizio.
Personalmente lo trovo molto attraente anche se faccio molto via codice e poco da interface builder. penso che il prox progetto lo farò usando arc e storyboard.
4 Dicembre 2011
habbyCiao e invece per collegare semplicemente un bottone ad un’altra view e dargli un animazione come si fa? Si deve usare sempre il vecchio metodo come con le XIB?
4 Dicembre 2011
Davideè possibile scaricare questo mini progetto che avete creato nell’articolo?
6 Dicembre 2011
Francescox habby: per collegare un uibutton alla view successiva basta che ci clikki sopra con il tasto destro e trascini sulla view a cui vuoi collegarti, a questo punto scegli la modalità di visualizzazione della view nel menu a tendina.
per il tipo di transizione la puoi scegliere successivamente tra le proprietà del “segues”
8 Dicembre 2011
ByterosSpettacolo.
8 Dicembre 2011
Ignazioc😀
29 Dicembre 2011
FrancescoRagazzi ho una domanda! Allora io faccio tutto quanto, ma se volessi che alla pressione di un elemento di una tabella mi porti a una view dedicata? come faccio? perfavore potreste fare un tutorial?
in pratica io ho una lista di oggetti e vorrei che alla pressione del primo mi porti alla sua view dedicata, al secondo idem.. ecc…
Grazie!
4 Gennaio 2012
Matteo)
Interessa molto anche a me …
12 Gennaio 2012
GiuseppexMatteo e Francesco:
Guarda non ricordo se i ragazzi del sito quando hanno trattato della TableViewController hanno parlato di questo, probabilmente si (consultate le prime guide), ad ogni modo quando inserite un TableViewCotroller, nei metodi presenti nel file vostroTableController.m esiste il metodo
(void) tableView:(UITableView*) tableView didSelectRowAtIndexPath:(NSIndexPath*) indexPath
Che permette proprio di gestire la selezione di una voce inserita in una tabella. Alla selezione potreste decidere di far comparire un popover in cui caricare la view specifica per quella voce selezionata.
12 Gennaio 2012
Ignaziocè in preparazione un tutorial che parla anche di questo. comunque se cerchi sul forum ne abbiamo parlato tanto
1 Febbraio 2012
GiulioCiao ho un problema.
Ho aggiunto ad una delle due ViewController un UIButton che mi rimanda ad una nuova View.
Il mio problema è che nel momento in cui viene visualizzata questa nuova View, la Tab Bar SCOMPARE.
Come posso fare per tenerla SEMPRE, qualunque percorso faccia?
Grazie.
6 Marzo 2012
LucaDomanda sull’uso di sotyboard, spero che possiate aiutarmi… ho un alibreria che fa un subclasse del navigation controller (nimbus, della quale parlavo tempo fa sul forum), quindi nell’App delegate imposto solitamente il navigation controller dell’applicazione essere la sottoclasse creata.. come posso fare da storyboard? mi dice che il navigation controller è bloccato!
4 Aprile 2012
LucioIo per ora mi trovo benissimo, e sto iniziando proprio ora a programmare.
direi che è un buon compromesso.
Sto trovando fatica a creare una slideshow con lo storyboard, qualcuno sa darmi 2 dritte?
grazie.
18 Ottobre 2012
RenusRagazzi, devo adattare un’app per l’iphone 5 ho scaricato xcode 4.5 ma non riesco ad adattare gli xib creati con dimensioni per l’iphone 4 in giù. Avevo letto che per interface builder l’adattamento avveniva con un determinato pulsante posto nell’interface builder, qualcuno sà aiutarmi per favore?
Grazie
24 Ottobre 2012
FrankyGiaComplimenti Ignazio, sempre ottime guide, son o alcuni anni che nn mi diletto nella programmazione, sono un autodidatta, ho canto un applicano gratuita per un sito con il quale collaboro con un lettore rss, è giunto il momento di aggiornarlo, come dovrò comportarmi per Iphone 5? Vorrei che esso sia compatibile per tutti i decide che abbiamo da iOS 5 in su, usare lo storyboard in questo caso è possibile?
13 Novembre 2012
LucaScusate l’ignoranza ma non riesco a trovare la voce use storyboard nel mio xcoode 4.5.
L’articolo parla di xcode 3.2, è stato eliminato o spostato?
Grazie
13 Novembre 2012
Lucaperdonatemi l’ho trovato… creavo un progetto vuoto e non single view.
pardon
8 Febbraio 2013
MassimilianoSalve,
io imposto il segue tra due viste.
Come si fa a vincolare la scelta ?
Del tipo se la variablie A = 1 allora vai alla vista nuova,
altrimenti resta in questa.
Saluti,
Max
8 Febbraio 2013
MassimilianoSalve,
io imposto il segue tra due viste.
Come si fa a vincolare la scelta ?
Del tipo se la variablie A = 1 allora vai alla vista nuova,
altrimenti resta in questa.
Saluti,
Max
15 Marzo 2013
DonkaCiao, ho una vecchia applicazione che vorrei utilizzare con xcode 4.6, ma vedo che durante il building dell’app, la barra progressiva si ferma anche se a sinistra vedo che il build task sembra che lavori. Mi pare che il problema possa essere il vecchio xib (sull’ipad deployment info, non ho nessuno main storyboard visto che l’app è precedente), se provo a cliccare sul file xib a sinistra appare la sfera colorata di attesa e non accade nulla, il programma stalla. Può essere che vi sia qualche problema dovuto all’assenza dello storyboard, cosa accede normalmente con le vecchie app che ne sono sprovviste? Grazie dell’aiuto, spero di essere stato chiaro 🙂
28 Marzo 2013
FilippoIo ho fatto tutto, ma nella lista Table view cosa dovrebbe esserci? Io non ci vedo niente. Nei due view controller ho messo due immagini.
Grazie