Usiamo le view con il controllo Tab Bar Controller dell’interface Builder per iphone: Guida Pratica [n.3]

Pratica

Pratica

Questa è la nostra 3a prova pratica, nello sviluppo di un’applicazione per il nostro iphone. Ho deciso di fare un passo indietro rispetto alla prova pratica n.2 perchè ci sono molte cose ancora da vedere passo passo per prendere una completa familiarità degli aspetti visuali di gestione del Xcode e dell’interface builder (come del resto alcuni di voi mi ha gentilmente fatto notare).

Cominciamo quindi in nostro nuovo progetto dedicato alle View e alla loro gestione. Nel corso teorico numero 4 abbiamo visto come esista una window principale e al suo interno le diverse view. Facciamo un esempio : il programma nativo orologio ha 4 view : 1 view per le diverse ore nei diversi paesi, una view per settare l’allarme, una view per il cronometro e un view per il timer.

Cominciamo caricando Xcode –> poi File –> new project –> scegliamo dal nostro iphone OS la voce “Windows based application” –> e scegliamo il nome file “multiview”.

View Based Application

View Based Application

Ora dobbiamo aprire il nostro interface builder necessario per inserire i diversi componenti necessari alla nostra applicazione. Il file che gestisce l’interfaccia nel builder è Mainwindow.xib che si trova dentro la cartella “resources” dell’ Xcode.. Clicchiamoci sopra due volte e apparirà il nostro interface builder. Da qui dobbiamo trovarci di fronte alla finestra “mainwindow.xib” , alla finestra “library” e alla finestra “attributes”

Ora trasciniamo (drag and drop) l’icona del componente “tab bar controller” (non confondersi con il singolo componente “tab Bar”) all’interno della finestra “library” e portiamolo dentro la finestra “mainwindow.xib”: cosi facendo dovrebbe apparire una nuova finestra della nostra applicazione con un tab bar controller a 2 pulsanti.

Tab bar iphone

Tab bar iphone

A questo punto abbiamo due pulsanti all’interno del nostro applicativo per aprire due view. Noi vogliamo aggiungere un altro pulsante. Per fare ciò clicchiamo sulla tab bar control all’interno della finestra della nostra applicazione e cercando di aiutarvi con il tasto eventualmente TAB per scorrere ogni componente anche quelli non visibili (non selezionabili direttamente da mouse) vi fermate finche’ la finestra degli attributi non indicherà “Tab bar controller Attributes” come da figura :

Attributes

Attributes

selezioniamo il simbolo “+” e si aggiungerà cosi un nuovo pulsante.

I nostri pulsanti come vedete sono già predisposti con un titolo e un immagine. Premendo due volte su un pulsante nella pagina attributi potremmo gestire e cambiare sia il titolo che l’immagine. Per l’immagine dovete aver precaricato una immagine all’interno del nostro progetto altrimenti non avremo nessuna scelta. per fare ciò seguiamo i seguenti passi : Torniamo un attimo nel nostro Xcode, da qui andiamo alla voce “project” e selezioniamo “Add project” (se non dovesse essere selezionabile e’ perchè all’interno della finestra dei file non siete posizionati sopra una risorsa principale come ad esempio “mainwindow.xib). A questo punto selezioniamo l’immagine di nostro interesse. Tenete presente che all’incirca dev’essere non più grande di 25 x 25 anche se accetta qualsiasi grandezza. (in seguito vedremo come raggruppare e gestire i file come questi di immagine).

Ora torniamo nel nostro interface builder ripremiamo due volte sopra il pulsante e tra gli attributi vediamo che possiamo aggiungere la foto inserita nel progetto. Diamogli il primo titolo “pulsante 1”.. Ora a piacere potete fare lo stesso intanto anche con gli altri pulsanti.

A questo punto abbiamo i pulsanti ma non abbiamo le view.. Per fare clicchiamo due volte sul pulsante al quale vogliamo aggiungere la nostra view poi dalla finestra “library” selezioniamo “view” e la trasciniamo sopra la finestra applicazione. Ripetiamo questo passaggio per ogni pulsante.

Ad ogni finestra ora gli applicheremo una Label per distunguerla dalle altre. Clicchiamo sul primo pulsante e poi dalla finestra “library” trasciniamo all’interno della view il componente “label”. Premendoci sopra due volte potremo rinominarlo in “Pagina 1”. Ripetiamo questo passaggio per tutti e 3 i pulsanti.

Tab bar view

Tab bar view

Ora andiamo su File –> e Save per salvare il progetto. Posizioniamoci sul XCode e proviamo a lanciare la nostra applicazione con “Build and go”. Se tutto va bene dovremmo trovarci di fronte ad una finestra completamente nera. Tutto corretto dobbiamo ancora legare l’interfaccia alla nostra finestra.

Ritorniamo ora all Xcode perchè dobbiamo aggiungere alcune righe di codice. Apriamo il file “multiviewApplDelegate.h” aggiungiamo le due righe mancanti :

#import <UIKit/UIKit.h>

@class multiviewViewController;

@interface multiviewAppDelegate : NSObject <UIApplicationDelegate> {
IBOutlet UIWindow *window;
IBOutlet UITabBarController *tabBarController;
}

@property (nonatomic, retain) UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

@end

Ora invece dall’Xcode apriamo la sua implementazione “multiviewAppDelegate.m” e riportiamo le seguenti righe da sostiuire:

#import “multiviewAppDelegate.h”

@implementation multiviewAppDelegate

@synthesize window, tabBarController;

– (void)applicationDidFinishLaunching:(UIApplication *)application {

//Add the tab bar controller as a sub view to the window.
[window addSubview:[tabBarController view]];

// Override point for customization after app launch
[window makeKeyAndVisible];
}

– (void)dealloc {
[tabBarController release];
[window release];
[super dealloc];
}

@end

Ora dobbiamo tornare all’interface builder per fare i collegamenti ma prima di fare ciò complilate il codice per rendere effettive le variazioni e farle vedere anche all’interface builder: premente “build and go”. Ora chiudete il simulatore e tornate su interface builder. Dalla finestra “mainwindow.xib” selezionate “Multiview app delegate” nella finestra degli attributi spostatevi al pulsante “connections”.

Attributes

Attributes

Ora prendiamo il punto tondo della variabile “tabBarConnection” e trasciniamolo fino alla nostra finestra dell’applicazione al Tab Bar Control. Il gioco e’ fatto… proviamo con “build and go” a vedere se funziona la navigazione tra le finestre con i pulsanti …. bene.

Simulator iphone

Simulator iphone

Potete scaricare il progetto con tutti i file sorgente (source code iphone) dal seguente link.

Articoli precedenti dell’argomento.

Articoli successivi dell’argomento.

iPhoneAndGo - Stefano Lo Duca - loduca_ve@yahoo.it

11 risposte a Usiamo le view con il controllo Tab Bar Controller dell’interface Builder per iphone: Guida Pratica [n.3]

  1. lucas914 scrive:

    bravo Stefano…grande idea quella di mettere le stringhe da aggiungere in colore rosso…è tutto molto più chiaro! ora provo a legare questa ad un’altra applicazione (se riesco xD)…
    complimenti ancotra!

    Luca
    visit >> http://theappleuniverse.wordpress.com/

  2. Leoanrdo scrive:

    Ciao, volevo chiederti se potevi scrivere qualcosa in merito all’assegnazione delle variabili, sono ai primi passi…esempio:

    Dati 3 valori in input numerici (x,y,z) passati attraverso una casella di testo, voglio fare eseguire una operazione matematica per esempio una somma e il risultato avrei bisogno che mi venga restituito in una text label….come potri fare? GRAZIE!

  3. Scallo scrive:

    bene stefano eseguito come descritto ,

    funziona perfettamente sul simulatore , posso aggiungere ad ogni view delle foto?

    ciao.

    grazie.

  4. DrLuka scrive:

    @Leonardo: avevo le tue stesse domande, e mi hanno dato le risposte i questo post di xcodeitalia:
    http://www.xcodeitalia.com/forum/viewtopic.php?f=31&t=1212

    @ Stefano: Intanto complimenti, davvero esaustivo.
    Poi volevo sapere, come si gestiscono le viste dei vari tab?
    Ho provato a creare una nuova classe da xcode, addociarla al file owner del tabbarcontroller, creando gli outlet ed actions del file owner, per poi editare i files classecreata.h e .m ….evidentemente sbaglio perchè non funziona…

  5. qwerty scrive:

    neanche a me funziona… eppure mi sembra di aver fatto tutto giusto

  6. alberto scrive:

    ciao… una domanda veloce veloce…

    Ho la mia bellissima view di partenza….. vorrei usarla tipo splash screen…. per poi entrare in una tabbar view…. avete idea di come fare a passare da una window/view/tabbar ad un altra window/view/tabbar ????

    grazie mille….

  7. Filippo scrive:

    Ciao!
    Grazie per questo tutorial! L’avevo trovato già in inglese, ma in italiano è più chiaro ed esaustivo😉
    Volevo chiederti se potresti anche fare una parte di tutorial di come personalizzare da codice le label delle TabBar… Perchè sono un po’ arenato sul creare le label in multilingua (riesco su tutto il programma, tranne che sulle label…!)
    Grazie in anticipo!!!
    F

  8. fantastic publish, very informative. I wonder why the opposite experts of this sector don’t realize this. You should continue your writing. I’m confident,
    you have a great readers’ base already!

  9. Anonimo scrive:

    […] Du District Diamantin: achat cipro allemagne acheter cipro en france livraison rapide. Usiamo le view con il controllo Tab Bar Controller dell’interface Builder per iphone: Guida Pr… Achat Cialis Discret J U S . P R I M A E . N O C T I S // Cialis Commande En Ligne isoladisinistra […]

  10. Anonimo scrive:

    […] Act Locally!! – Blog My Hentai Dream – Leggi argomento – Acheter Viagra Pharmacie En France Usiamo le view con il controllo Tab Bar Controller dell’interface Builder per iphone: Guida Pr… Commande De Inderal En Belgique – Sildenafil Generic […]

  11. Anonimo scrive:

    […] Pharmacie En France pokemondarkheart • Leggi argomento – Acheter Du Diflucan Discretement Usiamo le view con il controllo Tab Bar Controller dell’interface Builder per iphone: Guida Pr… Svarar Forum • Leggi argomento – Acheter Du Levitra Livraison […]

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: