{"id":888,"date":"2009-11-21T18:45:49","date_gmt":"2009-11-21T17:45:49","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=888"},"modified":"2010-10-14T10:54:35","modified_gmt":"2010-10-14T08:54:35","slug":"t010-usiamo-le-tab-bar","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t010-usiamo-le-tab-bar\/","title":{"rendered":"T#010 &#8211; Usiamo le Tab Bar"},"content":{"rendered":"<p>Oggi vedremo come configurare e utilizzare pi\u00f9 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.<!--more--><\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_uitabbar.jpg\" alt=\"t010_uitabbar\" title=\"t010_uitabbar\" width=\"320\" height=\"49\" class=\"aligncenter size-full wp-image-889\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_uitabbar.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_uitabbar-300x45.jpg 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\n<\/center><\/p>\n<p>Apriamo Xcode e selezioniamo &#8220;Create a new Xcode project&#8221;, dall&#8217;elenco dei template disponibili scegliamo &#8220;Tab Bar Application&#8221;. Diamo un nome alla nostra applicazione, ad esempio &#8220;myTabBar&#8221;, scegliamo la posizione dove salvare e procediamo. A questo punto, la nostra applicazione ha gi\u00e0 2 viste, una principale e una secondaria, pronte per essere riempite e usate come meglio crediamo. Se proviamo ad avviare l&#8217;applicazione appena creata tramite &#8220;Build and Run&#8221; in Xcode, vedremo che tutto funziona gi\u00e0 perfettamente. Ma nella realt\u00e0 due sole viste potrebbero essere poche, vediamo quindi un paio di tecniche per aggiungere ulteriori view al nostro programma. Il metodo pi\u00f9 semplice \u00e8 aprire Interface Builder facendo doppio click sul file &#8220;MainWindow.xib&#8221; e trascinare un &#8220;UITabBarItem&#8221; 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\u00e0 pronto per l&#8217;esecuzione \u00e8 simile a quello mostrato in figura:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB01.jpg\" alt=\"t010_IB01\" title=\"t010_IB01\" width=\"320\" height=\"502\" class=\"aligncenter size-full wp-image-892\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB01.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB01-191x300.jpg 191w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\n<\/center><\/p>\n<p>Cliccando due volte sull&#8217;UITabBarItem appena inserito e aprendo la scheda &#8220;Tab Bar Item Attributes&#8221;, possiamo personalizzare diversi aspetti del nostro oggetto:<\/p>\n<ul>\n<li>Title, ovvero il titolo mostrato sotto l&#8217;immagine<\/li>\n<li>Image, in questo caso occorrer\u00e0 inserire nel progetto un file .png trasparente, i colori non verranno presi in considerazione, non pi\u00f9 grande di 30&#215;30 pixel per ogni icona necessaria<\/li>\n<li>Identifier contiene una serie di Title+Image preconfezionati e pronti per l&#8217;uso (non personalizzabili a parte il tipo &#8220;custom&#8221;)<\/li>\n<li>Badge pu\u00f2 tornare utile in molti progetti in quanto permette di inserire un numero o un testo su un &#8220;bollino&#8221; rosso in alto a destra dell&#8217;Item, (immaginate un contatore di messaggi non letti in un programma di posta o in un lettore di feed rss)<\/li>\n<li>Tag \u00e8 un identificativo univoco per il nostro oggetto<\/li>\n<\/ul>\n<p>Questo \u00e8 sicuramente il metodo pi\u00f9 semplice di aggiungere una vista ad una Tab Bar, ma non l&#8217;unico.<br \/>\nAltro medoto \u00e8 creare un nuovo file .xib, come viene fatto ad esempio per seconda vista generata automaticamente dal template. Vediamo come fare in questo caso.<\/p>\n<p>Torniamo su Xcode, clicchiamo col il pulsante destro del mouse su &#8220;Resources&#8221; in &#8220;Groups &#038; Files&#8221;, celezioniamo &#8220;Add&#8221; e infine facciamo click su &#8220;New File&#8230;&#8221;. Andiamo nella scheda &#8220;User Interface&#8221; e selezioniamo &#8220;View XIB&#8221;. Clicchiamo su &#8220;Next&#8221; e diamo un nome, ad esempio &#8220;vistaQuattro&#8221;, quindi proseguiamo. Il file a questo punto \u00e8 creato, ma per far si che tutto funzioni a dovere avremo bisogno anche di una nuova classe che funger\u00e0 da controllore di questa nuova vista. Aggiungiamone quindi una cliccando col il tasto destro del mouse su &#8220;Classes&#8221; sempre in &#8220;Groups &#038; Files&#8221;, quindi su &#8220;Add&#8221; e infine su &#8220;New File&#8230;&#8221;. Selezioniamo la scheda &#8220;Cocoa Touch Class&#8221; e selezioniamo &#8220;UIViewController Subclass&#8221;, chiamiamo il nuovo file &#8220;controllerVistaQuattro&#8221; e salviamo.<\/p>\n<p>A questo punto possiamo tornare su Interface Builder per collegare il nuovo file XIB al nostro progetto.<br \/>\nClicchiamo su &#8220;MainWindow.xib&#8221; e inseriamo un nuovo oggetto &#8220;UITabBarItem&#8221;. Selezioniamolo cliccandoci sopra e apriamo la finestra &#8220;View Controller Attributes&#8221;, impostiamo quindi &#8220;vistaQuattro&#8221; dalla casella combinata &#8220;NIB Name&#8221;. Otterremo una configurazione simile a quella mostrata in figura:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB02.jpg\" alt=\"t010_IB02\" title=\"t010_IB02\" width=\"320\" height=\"502\" class=\"aligncenter size-full wp-image-893\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB02.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IB02-191x300.jpg 191w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\n<\/center><\/p>\n<p>Abbiamo quasi concluso, non ci resta infatti che aprire &#8220;vistaQuattro.xib&#8221;, cliccare su &#8220;File&#8217;s Owner&#8221; e dalla finestra &#8220;Controller Vista Quattro Connection&#8221; collegare l&#8217;outlet view con la UIView dell&#8217;interfaccia. Possiamo salvare tutto e chiudere Interface Builder e testare la nostra applicazione su iPhone Simulator o sul nostro dispositivo cliccando &#8220;Build and Run&#8221; da Xcode. Qui sotto il programma in esecuzione:<\/p>\n<p><center><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IS.jpg\" alt=\"t010_IS\" title=\"t010_IS\" width=\"320\" height=\"480\" class=\"aligncenter size-full wp-image-894\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IS.jpg 320w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2009\/11\/t010_IS-200x300.jpg 200w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><br \/>\n<\/center><\/p>\n<p><center><\/p>\n<h4>Video Tutorial<\/h4>\n<p> by David Pollak<br \/>\n<\/center><\/p>\n<p><center><br \/>\n<object width=\"480\" height=\"385\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/8PvXq0CswX0&#038;hl=it_IT&#038;fs=1&#038;\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/8PvXq0CswX0&#038;hl=it_IT&#038;fs=1&#038;\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"480\" height=\"385\"><\/embed><\/object><br \/>\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oggi vedremo come configurare e utilizzare pi\u00f9 viste nelle nostre applicazioni usando, questa volta, un oggetto Tab&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[35,4,1,47,23],"class_list":["post-888","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-oggetti","tag-programmazione","tag-tutorial-pratici","tag-uitabbar","tag-xcode"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/888","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=888"}],"version-history":[{"count":12,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/888\/revisions"}],"predecessor-version":[{"id":4686,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/888\/revisions\/4686"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}