Finalmente ecco un nuovo tutorial sulla programmazione per iPhone DK!! È passato più di un mese dalla pubblicazione del mio ultimo tutorial, purtroppo a causa di impegni personali (esami universitari su tutti) non ero riuscito a preparare niente di nuovo.
Oggi vi presento un tutorial che in molti mi hanno richiesto via mail, ovvero come implementare la struttura a “Tab Bar”, un componente molto utilizzato in tutte le applicazioni che però spesso risulta un po’ difficile da utilizzare, soprattutto per chi è alle prime armi. Il tutorial sarà suddiviso in più parti (penso due, al massimo tre): in questa prima “puntata” vedremo come creare la struttura a tab, inserendo solamente due viste.
Nella seconda parte (che penso di pubblicare la prossima settimana) vedremo invece un aspetto molto interessante: come integrare alla Tab Bar una UINavigation e una UITableView, ovvero la struttura presente, ad esempio, nell’applicazione nativa “iPod”.
Ma ora non corriamo troppo, iniziamo dai concetti base! Buona programmazione!
1) Creiamo una Tab Bar Application “pulita”
Iniziamo creando un nuovo progetto di tipo “Tab Bar Application” e chiamandolo “TabBarTutorial”.
Vogliamo ora creare una struttura base pulita, personalizzandola poi a nostro piacimento. Andiamo, quindi, ad eliminare alcuni componenti che XCode ha già creato per noi, ma che non vogliamo sfruttare: cancelliamo il file “SecondView.xib”, “FirstViewController.h” e “FirstViewController.m”.
Possiamo ora fare doppio clic su “MainWindow.xib”, si aprirà Interface Builder che ci mostrerà questo layout per la nostra applicazione:
Selezioniamo ognuno dei tab ed eliminiamolo, ottenendo questa struttura:
Salviamo questo file e chiudiamo pure Interface Builder.
2) Definiamo le due viste
Dobbiamo ora definire le due viste che implementeremo nella nostra applicazione. Dal menù “File” scegliamo “New File…” e selezioniamo “Empty XIB”. Creiamo due di questi file chiamandoli, rispettivamente, “PrimaVista” e “SecondaVista”.
Nella cartella “Resources” del nostro progetto vedremo i due file appena creati:
Dobbiamo ora creare anche le due classi che gestiranno le due viste: nel tutorial non serviranno a niente, ma voglio implementarle in modo da darvi già una struttura che potrete utilizzare nelle vostre applicazioni.
Andiamo, quindi, in “File -> New File…” e spostiamoci nella sezione “Cocoa Touch Class”, in cui selezioniamo il modello “UIViewController”: anche in questo caso dobbiamo creare due classi, chiamate “PrimaVistaController” e “SecondaVistaController”.
Possiamo spostare i file appena creati nella sezione “Classes” del nostro progetto, per avere un risultato come questo:
Abbiamo così definito tutti i componenti necessari, non ci resta che definire la struttura grafica delle due viste.
3) Creiamo l’aspetto delle due viste
Clicchiamo su “PrimaVista.xib” per aprirla in Interface Builder. Dalla Libreria, inseriamo una “UIView” all’interno del Pannello dei Documenti (“Tools -> Reveal in Document Window”).
Apriamo la vista appena inserita e modifichiamone l’aspetto a nostro piacimento (io per semplicità inserirò solo due label, in questo tutorial non ci servirà altro). Dall'”Attributes Inspector” selezioniamo “Tab Bar” nel menù a tendina “Bottom Bar”:
Questa proprietà non ha nessun fine pratico, però ci consente di aver una visione completa della nostra vista, tenendo presente anche la tab bar (in questo modo saprete esattamente quanto spazio avete a disposizione per i vostri componenti). Ecco come si presenta la nostra vista:
Ora dobbiamo collegare questa vista con la classe che abbiamo definito in precedenza. Sempre dal Pannello dei Documenti selezioniamo il “File’s Owner”:
In “Identity Inspector” selezioniamo “PrimaVistaController” dal menù a tendina “Class”.
Andiamo poi in “Connections Inspector” e colleghiamo l’elemento “view” con la vista che abbiamo appena creato (quella contenente le due label per intenderci). Se abbiamo eseguito il passaggio in maniera corretta avremo questo risultato:
Abbiamo così completato la definizione della vista. Eseguiamo lo stesso procedimento anche per il file “SecondaVista.xib”, collegandola però alla classe “SecondaVistaController”.
Possiamo poi salvare tutto e chiudere Interface Builder.
4) Impostiamo la Tab Bar
Ora è giunto il momento di impostare la struttura vera e propria della nostra Tab Bar. Apriamo il file “MainWindow.xib”
Dalla Libreria inseriamo due componenti UIViewController trascinandoli nella “Tab Bar” posta a fondo vista:
Il risultato finale sarà il seguente:
Iniziamo facendo doppio clic sul primo elemento, facendo attenzione che si evidenzi in questo modo:
Per prima cosa impostiamo la classe di questo UIViewController. Andiamo nel pannello “Identity Inspector” e selezioniamo “PrimaVistaController” come classe:
Spostiamoci, poi, nel pannello “Attributes Inspector”, selezioniamo “PrimaVista” dal menù “NIB Name”:
Ora facciamo doppio clic sul nome del tab (che per default è “Item”), e rinominiamolo a nostro piacere. Ripetiamo, poi, lo stesso procedimento con il secondo tab, associano questa volta la “SecondaVista”.
Se avete eseguito tutto in maniera corretta avrete il seguente risultato:
Chiudiamo ora Interface Builder, salvando tutti i file. Da XCode clicchiamo su “Build and Go!” e testiamo se tutto funziona in maniera corretta!
Se Avete Problemi, questo è il nostro file di progetto.
La guida è stata creata da Andrea Busi per “Bubi Devs”, prendendo spunto da questo guida: “Getting to know Xcode/Interface Buider: PARTS I & II: UITabBar projects” I meriti, quindi, sono del legittimo autore.
19 comments On DevTutorial #17 – TabBar Application, parte 1: la struttura di base
Grande!!! ma aggiornerai il tuo mitico pdf (che ho acquistato) anche con queste nuove guide? 🙂
@paolo: certamente, aspetto però di pubblicare altri tutorial (che arriveranno a breve ;-).
Comunque quando ci sarà una nuova versione del libro troverete sicuramente un post qui sul blog..
grandissimo tutorial andrea ! mi metto subito a lavoro per realizzare ciò che hai appena spiegato !
Grazie.
Ciao Andrea scusa una cosa..ho creato 2 viste una tabBar..ma se cerco di collegare delle textBox a delle variabili in una delle viste mi crasha l’applicazione…premesso che quando avevo fatto la vista unica senza tabbar funzionava tutto..
@MarcoBischero:
Questa cosa capita anche a me, ho fatto un semplice programmino con una text, una label e un pulsante, il tutto funziona, se trasporto questo programmino in un tab mi crasha l’applicazione… Ahhhh!!
@Sal: strano.. se vuoi mandami l’esempio via mail, così provo a vedere se trovo l’errore 😉
@Andrea Busi: Grazie Andrea, vorrei inviarti il progettino ma non riesco a recupera la tu mail, il link cotattami mi porta al feed rss…
@Sal: ogni tanto non so perchè ma si presenta quel problema.. comunque la mail è bubidevs @ gmail.com
@Andrea Busi: mi permetto di aggiungere che il problema riscontrato da qualcuno con il tuo codice ha un fondamento. Nel Tab Bar Controller Identity, in IB, dovrebbero essere specificate le classi che vengono usate per ogni vista.
Fabio
@Fabio Roma: grazi della precisazione, nel progetto infatti era corretto, mi ero dimenticato di inserirlo nella guida 😉
grazie della segnalazione comunque!
Prego, comunque ci tengo anche a dire che le tue iniziative ed il tuo blog sono strumenti utilissimi! Continua così 🙂
Fabio
ciao, anche questo tutorial è ottimo!! volevo chiederti, come posso modificare il titolo della tabBarItem?
ho provato cosi, tabBarItem.tilte = @”prova”;
o anche creare un tab bar item nella prima vista, entrare nella vista principale e collegare l’oggetto tabBaraItem e fare la stessa cosa da qui…. mi sapresti dare un aiuto?? non so da k parte sbattere la testa…
@andrea: ma l’hai creata in IB la scheda della TabBar? se clicchi due volte sul nome non te lo lascia modificare?
io ho seguito il tutorial in tutto e per tutto, solo che non mi trovo con una cosa: qui quando si passa da una vista all’altra la tab bar sotto rimane, mentre a me sparisce. Perchè?
scusami, ho detto una fesseria: quando mi sposto da un tab all’altro non ho problemi, continuo ad averlo. Uno dei tab mi richiama la rubrica del telefono e li non ho più la tab bar sotto, ho modo di farla visualizzare?
@babygirl: Ciao, quando apri la rubrica del telefono non penso ci sia un modo per far rimanere la tab in basso, è un aspetto “standard” che ha definito Apple. Potrei anche dirti una fesseria però, bisognerebbe controllare bene la documentazione e vedere cosa dice al riguardo. Provo a cercare, se trovo qualcosa ti faccio sapere 😉