T#010 – Usiamo le Tab Bar

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