{"id":4520,"date":"2010-10-04T10:06:36","date_gmt":"2010-10-04T08:06:36","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=4520"},"modified":"2010-10-04T10:06:36","modified_gmt":"2010-10-04T08:06:36","slug":"t074-come-inserire-una-uinavigationbar-personalizzata-nelle-nostre-applicazioni-iphone","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t074-come-inserire-una-uinavigationbar-personalizzata-nelle-nostre-applicazioni-iphone\/","title":{"rendered":"T#074 – Come inserire una UINavigationBar personalizzata nelle nostre applicazioni iPhone"},"content":{"rendered":"

\"\"<\/a> In moltissime applicazioni che si trovano in AppStore potete notare che la barra di navigazione (UINavigationBar per noi programmatori) non \u00e8 la classica blu che Apple mette a disposizione, ma \u00e8 personalizzata con colori o loghi caratteristici dell’applicazione.<\/p>\n

In questo tutorial vedremo come utilizzare una classe apposita, “CustonNavigationBar”, che ci permetter\u00e0 di inserire una immagine personale come navigation bar.<\/p>\n

1. Inseriamo la classe nel nostro progetto<\/h4>\n

Questo tutorial lo eseguiremo partendo da un progetto gi\u00e0 fatto. Per il nostro scopo utilizziamo il semplice lettore di feed RSS che abbiamo creato utilizzando questo nostro tutorial<\/a>. Scaricate il file di progetto ed apritelo in XCode.<\/p>\n

La prima cosa da fare \u00e8 inserire nel progetto la classe CustomNavigationBar, che potete scaricare a questo indirizzo.<\/a><\/p>\n

Scompattate l’archivio e inserite i due file della classe nel nostro progetto.<\/p>\n

\"\"<\/a><\/p>\n

Se avete eseguito tutto correttamente avrete i seguenti file nel vostro progetto:<\/p>\n

\"\"<\/a><\/p>\n

2. Inseriamo un’immagine adeguata<\/h4>\n

Ora dobbiamo inserire un’immagine che possa funzionare senza problemi nella Navigation Bar. Per fare ci\u00f2 utilizziamo un file di dimensione 320×44, che si adatter\u00e0 alla perfezione. Ecco quello che utilizzeremo noi:<\/p>\n

\"\"<\/a><\/p>\n

Inserite anche questa immagine nel vostro progetto, come fatto in precedenza per la classe.<\/p>\n

3. Assegniamo alla Navigation Bar la classe CustomNavigationBar<\/h4>\n

Dobbiamo far si che la UINavigationBar della nostra applicazione sia gestita dalla classe CustomNavigationBar. Apriamo il file “MainWindow.xib”, si aprir\u00e0 Interface Builder.<\/p>\n

Dal “Pannello dei Documenti” espandiamo l’elemento Navigation Controller e selezioniamo la Navigation Bar:<\/p>\n

\"\"<\/a><\/p>\n

Spostiamoci, poi, nell’Identity Inspector e nel campo Classes impostiamo “CustomNavigationBar”:<\/p>\n

\"\"<\/a><\/p>\n

Spostiamoci, infine, nell’oggetto Navigation Controller. Prendiamo il suo “delegate” e colleghiamolo con l’oggetto Navigation Controller:<\/p>\n

\"\"<\/a><\/p>\n

Abbiamo compleato questa parte. Salviamo tutto e chiudiamo pure Interface Builder.<\/p>\n

4. Esaminiamo la classe CustomNavigationBar<\/h4>\n

Prima di esaminare la classe che ci interessa, andate nel file “RootViewController.m” e nel metodo “viewDidLoad” cambiate la seguente istruzione:<\/p>\n

\r\nself.title = @\"back\";\r\n<\/pre>\n
questo perch\u00e8 il titolo non sar\u00e0 visualizzato nella navigation bar, ma sar\u00e0 invece utilizzato quando l’utente seleziona una cella (per il bottone che permette di tornare alla vista precedente).<\/p>\n
Spostiamoci nel file “CustomNavigationBar.m”, qui troviamo il comportamento della nostra classe. Nel metodo “drawRect” trovate le seguenti istruzioni:<\/p>\n
-(void)drawRect:(CGRect)rect{\r\n\tUIImage *image = [[UIImage imageNamed:@\"navBar.png\"] retain];\r\n\t[image drawInRect:rect];\r\n\t[image release];\r\n}<\/pre>\n
Come vedete la prima \u00e8 quella che imposta l’immagine da visualizzare. Se avete inserito un’immagine con un nome diverso da “navBar.png” qui \u00e8 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.<\/p>\n
C’\u00e8 poi un metodo che nel nostro tutorial \u00e8 praticamente inutilizzato, ma potrebbe essere invece utile per i vostri scopi. Esso \u00e8 il seguente:<\/p>\n
\r\n- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated{\r\n\r\n\t\/\/NSString *title = [viewController title];\r\n\tUILabel *myTitleView = [[UILabel alloc] init];\r\n\t[myTitleView setFont:[UIFont boldSystemFontOfSize:18]];\r\n\t[myTitleView setTextColor:[UIColor yellowColor]];\r\n\t\/\/myTitleView.text = title;\r\n\r\n\tmyTitleView.backgroundColor = [UIColor clearColor];\r\n\t[myTitleView sizeToFit];\r\n\tviewController.navigationItem.titleView = myTitleView;\r\n\t[myTitleView release];\r\n\r\n\tviewController.navigationController.navigationBar.tintColor = [UIColor colorWithRed:140.0\/255.0 green:145.0\/255.0 blue:147.0\/255.0 alpha:0.8];\r\n}\r\n<\/pre>\n
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.<\/p>\n
Noi abbiamo solo decommentato due istruzioni, in modo che non venga visualizzato nessun testo nella navigation bar.<\/p>\n
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:<\/p>\n
\"\"<\/a><\/p>\n
Abbiamo concluso! Avviate il progetto e godetevi la vostra barra di navigazione personalizzata!<\/p>\n
\"\"<\/a><\/p>\n
\"\"<\/a> Se avete problemi con il tutorial,\u00a0questo \u00e8 il nostro file di progetto.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In moltissime applicazioni che si trovano in AppStore potete notare che la barra di navigazione (UINavigationBar per…<\/p>\n","protected":false},"author":254,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[216,426,427,428,122],"class_list":["post-4520","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-andrea-busi","tag-custom-navigation-bar","tag-custom-uinavigation","tag-personalizzare-navigation-bar","tag-uinavigationbar"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/254"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=4520"}],"version-history":[{"count":8,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4520\/revisions"}],"predecessor-version":[{"id":4545,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/4520\/revisions\/4545"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=4520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=4520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=4520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}