T#010 – Usiamo le Tab Bar




(Nessun voto)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
Questo articolo è stato inserito da Rino Picardi il 21 novembre 2009 alle 18:45, ed è archiviato in Tutorial Pratici. Puoi seguire le risposte con i feeds RSS 2.0. Oppure scrivere un commento o anche segnalare un trackback dal tuo sito.
-
-
#3 Pubblicato da FaLc[ON]2 1 un anno fa
Ciao 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! -
#5 Pubblicato da Staff devAPP 1 un anno fa
jack :
Molto bello come spiegazione ma nn è in hd nn vedo quasi niente………
Cmq siete grandi CiaoIl 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..
-
E’ 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
-
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=… -
Salve, 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! -
- Segui i commenti di questo articolo
- 2. Objective-C: Le basi – parte 1
- 1. Cocoa e Cocoa Touch
- XCode e SVN: Prendiamo controllo dei nostri progetti
- Xcode 3.2.4 e iOS SDK 4.1 disponibili per il download
- T#069 – Localizzare applicazioni iPhone tramite NSLocalizedString
- T#068 – Progress view ed esecuzione di task in background
- Scaricare e installare vecchie versioni di Xcode
- T#064 – Rilevare le informazioni sul device in uso (modello, nome, sistema, versione)
- T#062 – Mostrare un Oggetto in una Vista in una posizione a Random
- T#057 – Disegnamo all’interno di una UIView
















Davvero 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!