In moltissime applicazioni che si trovano in AppStore potete notare che la barra di navigazione (UINavigationBar per noi programmatori) non è la classica blu che Apple mette a disposizione, ma è personalizzata con colori o loghi caratteristici dell’applicazione.
In questo tutorial vedremo come utilizzare una classe apposita, “CustonNavigationBar”, che ci permetterà di inserire una immagine personale come navigation bar.
1. Inseriamo la classe nel nostro progetto
Questo tutorial lo eseguiremo partendo da un progetto già fatto. Per il nostro scopo utilizziamo il semplice lettore di feed RSS che abbiamo creato utilizzando questo nostro tutorial. Scaricate il file di progetto ed apritelo in XCode.
La prima cosa da fare è inserire nel progetto la classe CustomNavigationBar, che potete scaricare a questo indirizzo.
Scompattate l’archivio e inserite i due file della classe nel nostro progetto.
Se avete eseguito tutto correttamente avrete i seguenti file nel vostro progetto:
2. Inseriamo un’immagine adeguata
Ora dobbiamo inserire un’immagine che possa funzionare senza problemi nella Navigation Bar. Per fare ciò utilizziamo un file di dimensione 320×44, che si adatterà alla perfezione. Ecco quello che utilizzeremo noi:
Inserite anche questa immagine nel vostro progetto, come fatto in precedenza per la classe.
3. Assegniamo alla Navigation Bar la classe CustomNavigationBar
Dobbiamo far si che la UINavigationBar della nostra applicazione sia gestita dalla classe CustomNavigationBar. Apriamo il file “MainWindow.xib”, si aprirà Interface Builder.
Dal “Pannello dei Documenti” espandiamo l’elemento Navigation Controller e selezioniamo la Navigation Bar:
Spostiamoci, poi, nell’Identity Inspector e nel campo Classes impostiamo “CustomNavigationBar”:
Spostiamoci, infine, nell’oggetto Navigation Controller. Prendiamo il suo “delegate” e colleghiamolo con l’oggetto Navigation Controller:
Abbiamo compleato questa parte. Salviamo tutto e chiudiamo pure Interface Builder.
4. Esaminiamo la classe CustomNavigationBar
Prima di esaminare la classe che ci interessa, andate nel file “RootViewController.m” e nel metodo “viewDidLoad” cambiate la seguente istruzione:
self.title = @"back";
questo perchè il titolo non sarà visualizzato nella navigation bar, ma sarà invece utilizzato quando l’utente seleziona una cella (per il bottone che permette di tornare alla vista precedente).
Spostiamoci nel file “CustomNavigationBar.m”, qui troviamo il comportamento della nostra classe. Nel metodo “drawRect” trovate le seguenti istruzioni:
-(void)drawRect:(CGRect)rect{
UIImage *image = [[UIImage imageNamed:@"navBar.png"] retain];
[image drawInRect:rect];
[image release];
}
Come vedete la prima è quella che imposta l’immagine da visualizzare. Se avete inserito un’immagine con un nome diverso da “navBar.png” qui è il posto corretto per modificarlo. Una soluzione particolare sarebbe anche quella di scaricare l’immagine da un sito web, che vi permetterebbe di avere una barra modificabile da remoto.
C’è poi un metodo che nel nostro tutorial è praticamente inutilizzato, ma potrebbe essere invece utile per i vostri scopi. Esso è il seguente:
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{
//NSString *title = [viewController title];
UILabel *myTitleView = [[UILabel alloc] init];
[myTitleView setFont:[UIFont boldSystemFontOfSize:18]];
[myTitleView setTextColor:[UIColor yellowColor]];
//myTitleView.text = title;
myTitleView.backgroundColor = [UIColor clearColor];
[myTitleView sizeToFit];
viewController.navigationItem.titleView = myTitleView;
[myTitleView release];
viewController.navigationController.navigationBar.tintColor = [UIColor colorWithRed:140.0/255.0 green:145.0/255.0 blue:147.0/255.0 alpha:0.8];
}
Qui, volendo, potete impostare il colore, il font e la dimensione del testo che viene visualizzato nella Navigation Bar (il “title” che solitamente impostiamo via codice). Se avete inserito una immagine che contiene solo lo sfondo e non un logo, potete abilitare quelle istruzioni e modificare l’aspetto del testo a vostro piacere.
Noi abbiamo solo decommentato due istruzioni, in modo che non venga visualizzato nessun testo nella navigation bar.
L’ultima istruzione, infine, imposta il colore che viene utilizzato nei bottoni presenti sulla Navigation Bar, come quello per tornare alla schermata precedente quando si entra in una riga:
Abbiamo concluso! Avviate il progetto e godetevi la vostra barra di navigazione personalizzata!
Se avete problemi con il tutorial, questo è il nostro file di progetto.
12 Responses to “T#074 – Come inserire una UINavigationBar personalizzata nelle nostre applicazioni iPhone”
4 Ottobre 2010
Tweets that mention Personalizzare le Navigation Bar nelle nostre applicazion iPhone e iPad | devAPP -- Topsy.com[…] This post was mentioned on Twitter by Rynox, iPadWorld.it and devAPP, Bubi Devs. Bubi Devs said: T#074 – Come inserire una UINavigationBar personalizzata nelle nostre applicazioni iPhone: In moltissime applicazi… http://bit.ly/drYWtz […]
5 Ottobre 2010
FrancescoMolto utile Grazie.
Continuate così 😛
31 Dicembre 2010
Fede81Ciao, funziona tutto, ho solo un piccolo problema:
quando seleziono una cella, mi compare il tasto “back” e fin qui ok. Quando però lo premo, oltre a tornare alla pagina precedente, mi mostra la scritta “back” nel centro della navigationBar sovrapponendosi al logo.
(solo se torno indietro, se seleziono nuova cella torna a posto, e al back di nuovo il problema)
Avete idea di cosa possa essere?
Grazie e continuate così 🙂
11 Gennaio 2011
StoppedCiao! Bel sito, molto completo. Siccome io vorrei iniziare da zero con un progetto da zero vorrei sapere come fare la UINavigationBar personalizzata da zero.
Utilizzando l’ultimo SDK
Grazie anticipate
27 Gennaio 2011
iCiccioHo seguito il tutorial e tutto bene, ho implementato la Barra personalizzata in alcune viste associate ad una TabBar, il problema che noto che pur avendo stessa dimensione nella prima Vista la barra risulta più “bassa” mentre nella seconda risulta essere normale a 44pixel come mai da cosa potrà dipendere?
26 Maggio 2011
GiovanniMI piacerebbe tanto poter cambiare il colore del font dei titoli, sapete darmi qualke dritta???
27 Maggio 2011
Andrea Busidevi abilitare le righe 3 e 7, che nel tutorial erano commentate. Con quelle puoi avere delle scritte con colori e font personalizzati 😉
5 Giugno 2011
tommasocome posso implementarla senza avere un rootViewController?
17 Giugno 2011
Andrea BusiPuoi crearti un UINavigationController da codice, oppure inserire direttamente un componente grafico tramite IB
12 Agosto 2011
AndreaCiao, come posso creare bottoni trasparenti che riprendano lo sfondo della nav? Grazie.
6 Marzo 2012
LucaHo una domanda su questo argomento… con iOS 5, se non uso storyboard, in che modo posso aggiungere questa navigationbar personalizzata???????
30 Settembre 2012
tommasoCiao…come posso inserire immagini diverse nella navBar per il master e per il detail?!…è possibile intercettare quale View è presente nel NavigationController per implementare un if nella customNavBar?!