Oggi vedremo come configurare e utilizzare più viste nelle nostre applicazioni usando, questa volta, un oggetto Tab Bar, ovvero la tipica barra presente in molte applicazioni per iPhone con al suo interno dei pulsanti che permettono di muoversi tra le varie viste.
Apriamo Xcode e selezioniamo “Create a new Xcode project”, dall’elenco dei template disponibili scegliamo “Tab Bar Application”. Diamo un nome alla nostra applicazione, ad esempio “myTabBar”, scegliamo la posizione dove salvare e procediamo. A questo punto, la nostra applicazione ha già 2 viste, una principale e una secondaria, pronte per essere riempite e usate come meglio crediamo. Se proviamo ad avviare l’applicazione appena creata tramite “Build and Run” in Xcode, vedremo che tutto funziona già perfettamente. Ma nella realtà due sole viste potrebbero essere poche, vediamo quindi un paio di tecniche per aggiungere ulteriori view al nostro programma. Il metodo più semplice è aprire Interface Builder facendo doppio click sul file “MainWindow.xib” e trascinare un “UITabBarItem” a fianco ad uno dei pulsanti esistenti nella Tab Bar. A questo punto non ci resta che cliccare sul nuovo item aggiunto e inserire, tramite un doppio-click o trascinamento, una UIView che andremo poi a riempire come meglio crediamo. Il risultato, già pronto per l’esecuzione è simile a quello mostrato in figura:
Cliccando due volte sull’UITabBarItem appena inserito e aprendo la scheda “Tab Bar Item Attributes”, possiamo personalizzare diversi aspetti del nostro oggetto:
- Title, ovvero il titolo mostrato sotto l’immagine
- Image, in questo caso occorrerà inserire nel progetto un file .png trasparente, i colori non verranno presi in considerazione, non più grande di 30×30 pixel per ogni icona necessaria
- Identifier contiene una serie di Title+Image preconfezionati e pronti per l’uso (non personalizzabili a parte il tipo “custom”)
- Badge può tornare utile in molti progetti in quanto permette di inserire un numero o un testo su un “bollino” rosso in alto a destra dell’Item, (immaginate un contatore di messaggi non letti in un programma di posta o in un lettore di feed rss)
- Tag è un identificativo univoco per il nostro oggetto
Questo è sicuramente il metodo più semplice di aggiungere una vista ad una Tab Bar, ma non l’unico.
Altro medoto è creare un nuovo file .xib, come viene fatto ad esempio per seconda vista generata automaticamente dal template. Vediamo come fare in questo caso.
Torniamo su Xcode, clicchiamo col il pulsante destro del mouse su “Resources” in “Groups & Files”, celezioniamo “Add” e infine facciamo click su “New File…”. Andiamo nella scheda “User Interface” e selezioniamo “View XIB”. Clicchiamo su “Next” e diamo un nome, ad esempio “vistaQuattro”, quindi proseguiamo. Il file a questo punto è creato, ma per far si che tutto funzioni a dovere avremo bisogno anche di una nuova classe che fungerà da controllore di questa nuova vista. Aggiungiamone quindi una cliccando col il tasto destro del mouse su “Classes” sempre in “Groups & Files”, quindi su “Add” e infine su “New File…”. Selezioniamo la scheda “Cocoa Touch Class” e selezioniamo “UIViewController Subclass”, chiamiamo il nuovo file “controllerVistaQuattro” e salviamo.
A questo punto possiamo tornare su Interface Builder per collegare il nuovo file XIB al nostro progetto.
Clicchiamo su “MainWindow.xib” e inseriamo un nuovo oggetto “UITabBarItem”. Selezioniamolo cliccandoci sopra e apriamo la finestra “View Controller Attributes”, impostiamo quindi “vistaQuattro” dalla casella combinata “NIB Name”. Otterremo una configurazione simile a quella mostrata in figura:
Abbiamo quasi concluso, non ci resta infatti che aprire “vistaQuattro.xib”, cliccare su “File’s Owner” e dalla finestra “Controller Vista Quattro Connection” collegare l’outlet view con la UIView dell’interfaccia. Possiamo salvare tutto e chiudere Interface Builder e testare la nostra applicazione su iPhone Simulator o sul nostro dispositivo cliccando “Build and Run” da Xcode. Qui sotto il programma in esecuzione:
Video Tutorial
by David Pollak
17 Responses to “T#010 – Usiamo le Tab Bar”
21 Novembre 2009
il profetaDavvero un ottimo TUTORIAL!! Sono programmatore da pochi mesi ma penso che le Tab Bar siano uno strumento davvero indispensabile da integrare nei nostri progetti!!! BRAVI COMPLIMENTI!
3 Dicembre 2009
The AnonymousGrazie… ottimo tutorial… continuate cosi!! siete mitici
4 Febbraio 2010
FaLc[ON]2Ciao raga il tutorial è fatto davvero bene ma le ultime 4 righe sono un pò confusionarie … ho dovuto smanettare un pò per far funzionare la 4° view.
Viene saltato qualche passaggio.
Alla fine si apre il file vistaQuattro.xib e si inserisce una UIView e magari anche una label per non mandare la pagina in bianco quando si runna.
Poi si seleziona File’s Owner e nella finestra Identity nel menu Class si seleziona controllerVistaQuattro.
Si torna alla finestra Connection e si collega l’Outlet view all’UIView.
Così è andato tutto liscio come l’olio.
Scusate la precisazione ma sono newbeessimoo!!! 😛
Procedo con il prossimo tutorial 🙂
Grazie mille!
29 Marzo 2010
Video Tutorial di programmazione iPhone SDK (in italiano) | devAPP[…] Oggi vedremo come configurare e utilizzare più viste nelle nostre applicazioni usando, questa volta, un oggetto Tab Bar, ovvero la tipica barra presente in molte applicazioni per iPhone con al suo interno dei pulsanti che permettono di muoversi tra le varie viste. (visualizza l’articolo completo) […]
29 Marzo 2010
jackMolto bello come spiegazione ma nn è in hd nn vedo quasi niente………
Cmq siete grandi Ciao
29 Marzo 2010
Staff devAPPIl Video Tutorial di questo articolo è stato caricato proprio pochi minuti fa, è ancora in fase di ottimizzazione da parte di YouTube. Riprova a guardarlo tra un’oretta, dovrebbe essere leggibile.. scusate l’inconveniente..
12 Luglio 2010
Domanda da nabboE’ possibile , creando la tabbar via IB di poter cambiare in modo dinamico i title delle uitabbaritem?
Vorrei cambiare i title in base alla lingua impostata sull’iphone, è ho provato a impostare le viste con self.title = @”maremma cane”;
pero’, giustamente, mi compare il nuovo title solo quando premo la uitabbaritem relativa.
mi stanno portando al manicomio 🙂
ciao
12 Settembre 2010
CEsareCerco di aggiungere una item alla tab bar ma L’ICONA non appare TUTTO RESTA GRIGIO. COSA FARE
GRAZIE CESARE
15 Settembre 2010
GiulianoOttimo video tutorial, ma se su una vista volessi mettere per esempio un bottone che interagisca con la TabBar, per esempio che mi rimandi al primo tab, come posso fare visto che appartengono a file diversi e non riesco ad unirli con IB.
Grazie
9 Ottobre 2010
.:M_F:.Ciao!! Intanto grazie mille di questo utilissimo tutorial!! (e di tutti gli altri ovviamente)
Ho cercato e provato in vari modi di cambiare il BADGE via CODICE, ma nn ci riesco…qualche idea??
PS:ho inserito nella view che carica un tabBarItem una tabella…non so se cambia qualcosa 😐 e per settare il title della navigation bar uso self.title=…
14 Ottobre 2010
» devAPP – Tutorial Set #2[…] (Vai al tutorial completo) […]
24 Febbraio 2011
WMUpiloCiao e COMPLIMENTI!!
come posso inserire un bottone in una vista che mi faccia passare ad un’altra vista (senza però perdere la visione della Tab-Bar) ? (simulare la stessa azione di un bottone della tab-bar..)
Grazie!
22 Marzo 2011
MatteoCiao, vorrei chiedervi una cosa…sarebbe possibile implementare una TabBar rotante?
24 Maggio 2011
MaveDevPerfetto, direi che sia molto piu’ comodo che gestire le viste direttamente 🙂
3 Giugno 2011
WeeeeeeeSalve, ho creato la mia applicazione con una UITabBar però ho bisogno che quando passo da una tab all’altra mi esegua del codice, ho provato a mettere il codice nel load della view ma viene eseguito solo la prima volta che accedo alla view sapete dirmi come faccio a fare in modo che il codice venga eseguito ogni volta che accedo alla view?
Grazie in anticipo!
30 Luglio 2011
gianmanca un tutoria sul come implementare le navigation bar/controller in un progetto view based applications
8 Settembre 2012
ADemoOttima guida, ma supponiamo una vista aggiuntiva “vistaQuattroDetail”, come carico nella TabBar questa vista da “vistaQuattro”?
“vistaQuattroController.h:”
– (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
….
}