{"id":8037,"date":"2011-12-01T14:03:45","date_gmt":"2011-12-01T13:03:45","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=8037"},"modified":"2011-12-01T14:03:45","modified_gmt":"2011-12-01T13:03:45","slug":"t103-introduzione-all-uso-di-storyboard","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t103-introduzione-all-uso-di-storyboard\/","title":{"rendered":"T#103 – Introduzione all’uso di Storyboard"},"content":{"rendered":"

\"t103-usare-storyboard-xcode-introduzione-00\"<\/a> Avrete ormai capito che l’accoppiata iOS 5 e Xcode 4.2 ha portato tantissime novit\u00e0 per noi programmatori iPhone e iPad. Alcune di queste comportano delle vere piccole rivoluzioni nel “vecchio” modo di programmare.
\nMi riferisco soprattutto ad ARC (ne abbiamo parlato qui<\/a>) e all’argomento oggetto di questo nuovo tutorial: Storyboard<\/strong>.<\/p>\n

Ma cos’\u00e8 Storyboard?<\/h4>\n

Storyboard \u00e8 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.<\/p>\n

Su tutti i forum dedicati ad iOS (anche sul nostro)<\/a> le domande pi\u00f9 ricorrenti riguardano proprio il passaggio tra una view e un’altra, dimostrazione che la logica dietro ai viewcontroller non viene facilmente compresa.<\/p>\n

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.<\/p>\n

Ma storyboard non \u00e8 solo questo, perch\u00e9 ha introdotto tante altre novit\u00e0 nella gestione delle tableview e delle celle personalizzate (sembra che alla Apple leggano i forum per cercare i topic pi\u00f9 frequenti!)<\/p>\n

Il nostro progetto introduttivo a Storyboard<\/h4>\n

Oggi impareremo ad usare storyboard creando lo scheletro di una applicazione tipica, dotata di tabbarviewcontroller e di navigationcontroller, non entrer\u00f2 nel dettaglio di tutte le funzioni, ma alla fine di questo articolo sarete in grado di utilizzarlo con successo nelle vostre applicazioni.<\/p>\n

Bench\u00e9 questo sia un articolo introduttivo va considerato come un “aggiornamento” quindi ho dato per scontato che il lettore conosca gi\u00e0 cos’\u00e8 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.<\/p>\n

Apriamo Xcode ed iniziano con il nostro progetto. Per semplicit\u00e0 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”.<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-01\"<\/a>
\n<\/center><\/p>\n

Notiamo all’apertura del progetto che non sono presenti i classici file xib per il disegno dell’interfaccia, ma al suo posto \u00e8 presente un unico file “Mainstoryboard.storyboard<\/strong>“, dentro questo file andremo a gestire sia la grafica dei singoli viewcontroller che la navigazione tra di essi.<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-02\"<\/a>
\n<\/center><\/p>\n

Selezionando il file noteremo che \u00e8 gi\u00e0 presente un primo viewcontroller, o meglio una “scena”, come preferisce chiamarle Apple in questo caso. Una freccia entrante sulla sinistra indica che questa scena \u00e8 la prima scena che verr\u00e0 visualizzata. Tale opzione \u00e8 modificabile attraverso l’opzione dell’inspector che vedete in questa immagine:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-03\"<\/a>
\n<\/center><\/p>\n

Possiamo gestire la grafica di questo viewcontroller come abbiamo sempre fatto, trascinando gli oggetti dalla libreria direttamente sulla scena desiderata.<\/p>\n

ATTENZIONE:<\/strong> per poter trascinare gli oggetti \u00e8 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.<\/p>\n

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:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-04\"<\/a>
\n<\/center><\/p>\n

TabBarViewcontroller con Storyboard<\/h4>\n

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\u00e0 uno schermo piuttosto grande per visualizzare tutto contemporaneamente. Appariranno infatti nello schermo tre scene: il tabBarController e due viewController generici collegati da una freccia.<\/p>\n

Il significato \u00e8 piuttosto intuitivo: il tabBarController \u00e8 il “contenitore” e gli altri due viewController sono i “contenuti”. Questa relazione \u00e8 identificabile dal simbolo che vedete in foto:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-05\"<\/a>
\n<\/center><\/p>\n

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.<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-06\"<\/a>
\n<\/center><\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-07\"<\/a>
\n<\/center><\/p>\n

Navigationcontroller e Storyboard<\/h4>\n

Passiamo ora ad aggiungere alla nostra applicazione un navigationController, lo scopo \u00e8 quello di visualizzare in un terzo pulsante del tabBarController una tableView per visualizzare delle informazioni
\nPer farlo vedremo una nuova funzionalit\u00e0: trasciniamo nell’area di lavoro un tableViewController e, una volta selezionato, selezioniamo dal men\u00f9 “Edit->Embed in->Navigation controller” questo far\u00e0 apparire nell’area di lavo un navigationcontroller gi\u00e0 collegato al nostro tableviewcontroller:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-08\"<\/a>
\n<\/center><\/p>\n

Per far funzionare il tutto ci manca ancora un ultimo passaggio: collegare il navigation controller al tabBarController che abbiamo gi\u00e0 creato. Anche in questo caso \u00e8 tutto molto semplice infatti baster\u00e0 cliccare con il tasto destro del mouse sul tabBarController, trascinare il puntatore sul navigationController e scegliere infine “relationship” nel men\u00f9 che appare.<\/p>\n

L’effetto finale \u00e8 questo:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-09\"<\/a>
\n<\/center><\/p>\n

Se proviamo ad eseguire il nostro progetto vedremo che ora cliccando sul terzo tabItem apparir\u00e0 la tableView con tanto di barra del navigationController.<\/p>\n

Vi sarete accorti per\u00f2 che non abbiamo inserito n\u00e9 IBOutlet n\u00e9 IBAction e soprattutto che la tabella \u00e8 vuota. Questo perch\u00e9 gli oggetti che abbiamo trascinato nell’area di lavoro sono dei controller generici, non sono i nostri<\/b> viewcontroller.<\/p>\n

Possiamo creare quindi i nostri viewcontroller tramite il men\u00f9 “file->new->new file”. Nel nostro esempio ho creato un tableViewController:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-10\"<\/a>
\n<\/center><\/p>\n

Ed ho selezionato il tableViewController presente nell’area di lavoro modificando la sua propriet\u00e0 Class come si vede in foto:<\/p>\n


\n\"t103-usare-storyboard-xcode-introduzione-11\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"

Avrete ormai capito che l’accoppiata iOS 5 e Xcode 4.2 ha portato tantissime novit\u00e0 per noi programmatori…<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[981,983,982,984,985,568],"class_list":["post-8037","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-mainstoryboard-storyboard","tag-navigationcontroller","tag-storyboard-xcode","tag-tabbarviewcontroller","tag-usare-storyboard-xcode","tag-viewcontroller"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=8037"}],"version-history":[{"count":21,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8037\/revisions"}],"predecessor-version":[{"id":8097,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8037\/revisions\/8097"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=8037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=8037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=8037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}