{"id":5866,"date":"2011-02-14T12:37:56","date_gmt":"2011-02-14T11:37:56","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=5866"},"modified":"2011-02-14T12:37:56","modified_gmt":"2011-02-14T11:37:56","slug":"t084-differenti-tipi-di-view-controller-per-le-nostre-tabbar","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t084-differenti-tipi-di-view-controller-per-le-nostre-tabbar\/","title":{"rendered":"T#084 – Differenti tipi di View Controller per le nostre TabBar"},"content":{"rendered":"

Lo scopo di questa guida \u00e8 riuscire a scrivere un’applicazione basata sull’utilizzo di una TabBar<\/em> che gestisca differenti tipologie di view controller, ovvero da una semplice UIViewController<\/em> fino ad arrivare ad una basilare implementazione di UINavigationController<\/em> e relative view associate. La guida si prepone inoltre di effettuare tutte le operazioni necessarie via codice, senza mettere mano in nessun caso ad Interface Builder.<\/p>\n


\n\"banner-OperaBook-iPhone-devAPP\"<\/a>
\n<\/center><\/p>\n

Il nostro progetto<\/h4>\n

Iniziamo col creare un nuovo progetto, di tipo Window-Based application<\/em> e diamogli il nome che preferiamo: io ho scelto “TutorialTabBar”. Fatto ci\u00f2, apriamo la cartella Classes: saranno presenti i file di header ed implementazione della classe che fa da delegato di UIApplication<\/em>; non entriamo troppo nei dettagli, ma \u00e8 qui che viene scritto il codice per caricare l’interfaccia iniziale della nostra applicazione.<\/p>\n

La prima cosa da fare \u00e8 dichiarare il nostro UITabBarController<\/em> e siccome esso sar\u00e0 presente sempre nella nostra applicazione, converr\u00e0 dichiararlo nel file di header, infatti:<\/p>\n

\r\n#import \r\n\r\n@interface TutorialTabBarAppDelegate : NSObject  {\r\n\tUIWindow *window;\r\n\tUITabBarController *tabBarController;\r\n}\r\n\r\n@property (nonatomic, retain) IBOutlet UIWindow *window;\r\n@property (nonatomic, retain) UITabBarController *tabBarController;\r\n\r\n@end\r\n<\/pre>\n
Si noti come l\u02bcoggetto di tipo UITabBarController<\/em> non \u00e8 un IBOutlet<\/em> (come la variabile di tipo UIWindow<\/em>, l’unica gestita tramite Interface Builder).<\/p>\n
Andiamo nel file di implementazione, individuiamo il metodo “application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary *)launchOptions” e scriviamo l\u00ec il codice che servir\u00e0 a caricare appunto l’interfaccia della nostra applicazione.
\nCi servir\u00e0 un oggetto di tipo NSMutableArray<\/em> in cui raccoglieremo mano a mano i diversi controller per i diversi Tab; allochiamo ed inizializziamo l’oggetto di tipo UITabBarController<\/em>, impostiamo la sua variabile di tipo NSArray viewControllers come “controllers”, e rilasciamo appunto “controllers” (non ci serve pi\u00f9). Infine aggiungiamo alla window la view di UITabBarController<\/em> (che sottolineo, non \u00e8 altro che una sottoclasse di UIViewController); senza dimenticarsi di includere l’oggetto UITabBarController in @synthetize (\u00e8 una property, quindi devo anche sintetizzarla) e di deallocarla nel metodo dealloc, otterremo un codice che somiglier\u00e0 a questo:<\/p>\n
\r\n#import \"TutorialTabBarAppDelegate.h\"\r\n\r\n@implementation TutorialTabBarAppDelegate\r\n\r\n@synthesize window,tabBarController;\r\n\r\n#pragma mark -\r\n#pragma mark Application lifecycle\r\n\r\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    \r\n    \r\n    NSMutableArray *controllers = [[NSMutableArray alloc] initWithCapacity:3];\r\n\ttabBarController = [[UITabBarController alloc] init];\r\n\t\r\n\t\/\/ -----------------------------------------\r\n\t\r\n\ttabBarController.viewControllers = controllers;\r\n\t[controllers release];\r\n\t\r\n\t[window addSubview:tabBarController.view];\r\n    [self.window makeKeyAndVisible];\r\n    \r\n    return YES;\r\n}\r\n\r\n#pragma mark -\r\n#pragma mark Memory management\r\n\r\n- (void)dealloc {\r\n\t[tabBarController release];\r\n    [window release];\r\n    [super dealloc];\r\n}\r\n\r\n@end\r\n<\/pre>\n
Si noti come non ho fatto alcun cenno alla gestione della memoria, ed al perch\u00e9 su quell\u02bcoggetto di nome \u201ccontrollers\u201d \u00e8 stato fatto un release: non \u00e8 lo scopo di questa guida, quindi invito a chi non \u00e8 avvezzo a tale argomento a riguardarselo, per poter avere un\u02bcidea pi\u00f9 chiara sulle operazioni di retain e release. Ma voglio per\u00f2 dare una piccola spiegazione sul perch\u00e9 ho dato una capacit\u00e0 iniziale di 3 all\u02bcoggetto \u201ccontrollers\u201d: il
\ncompilatore sa che in questo array verranno inseriti almeno 3 oggetti, dunque invece di allocare tre aree di memoria differenti con un indirizzo per ognuna di esse, verr\u00e0 allocata una sola zona in cui inserirli e sar\u00e0 necessario un solo indirizzo per individuarli.
\nOvviamente il discorso non vale se non conoscete a priori il numero degli oggetti da inserire nell\u02bcarray.
\nPotete anche compilare ed eseguire: tutto funzioner\u00e0 alla perfezione, ma la TabBar sar\u00e0 vuota:<\/p>\n

\n\"t084-differenti-view-controller-nelle-tabbar-xcode-01\"<\/a>
\n<\/center><\/p>\n
Aggiungiamo un UIViewController<\/h4>\n
Adesso aggiungiamo le diverse view alla TabBar. Create un nuovo file di tipo UIViewController, dategli un nome a vostro piacimento (io l’ho chiamato “Tab1ViewController”). Esso gestir\u00e0 una view, che a sua volta conterr\u00e0 una subview di tipo UILabel con un testo a piacimento. Quindi, nel file header dichiariamo un oggetto NSString che servir\u00e0 appunto ad impostare il testo dell\u02bcUILabel, ed aggiungiamolo come property:<\/p>\n
\r\n#import \r\n\r\n@interface Tab1ViewController : UIViewController {\r\n\r\n\tNSString *testo;\r\n}\r\n\r\n@property (nonatomic, retain) NSString *testo;\r\n\r\n@end\r\n<\/pre>\n
Nel file di implementazione invece utilizziamo il metodo loadView<\/em> per caricare l\u02bcinterfaccia di questa view: creazione della view principale (che occpuer\u00e0 tutto lo schermo visibile), creazione dell\u02bcUILabel<\/em> ed il suo posizionamento nella view principale, senza dimenticare del synthetize della NSString e della sua deallocazione:<\/p>\n
\r\n- (void)loadView {\r\n\t\r\n\tCGRect rectViewPrincipale = CGRectMake(0.0, 0.0, 320.0, 411.0);\r\n\tUIView *viewPrincipale = [[UIView alloc] initWithFrame:rectViewPrincipale];\r\n\t\r\n\tUILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10.0, 30.0, 300.0, 21.0)];\r\n\tlabel.textAlignment = UITextAlignmentCenter;\r\n\tlabel.text = testo;\r\n\t[viewPrincipale addSubview:label];\r\n\t[label release];\r\n\t\r\n\tself.view = viewPrincipale;\r\n\t[viewPrincipale release];\r\n}\r\n<\/pre>\n
Torniamo al file di implementazione del nostro AppDelegate: facciamo un import del nuovo file header e scriviamo il codice che serve a crearlo e ad aggiungerlo all\u02bcinterfaccia dell\u02bcapp: allochiamo ed inizializziamo, diamo un titolo, impostiamo la stringa da visualizzare a nostro piacimento, aggiungiamo il nuovo view controller all\u02bcarray controllers e poi lo rilasciamo. Compiliamo ed eseguiamo…<\/p>\n
\r\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    \r\n    \r\n    NSMutableArray *controllers = [[NSMutableArray alloc] initWithCapacity:2];\r\n\ttabBarController = [[UITabBarController alloc] init];\r\n    \r\n\t\/\/ -----------------------------------------\r\n\t\r\n\tTab1ViewController *tab1Controller = [[Tab1ViewController alloc] initWithNibName:nil bundle:nil];\r\n\ttab1Controller.title = @\"Tab 1\";\r\n\ttab1Controller.testo = @\"Testo di prova Tab 1\";\r\n\t[controllers addObject:tab1Controller];\r\n\t[tab1Controller release];\r\n\t\r\n\t\/\/ -----------------------------------------\r\n\t\r\n\ttabBarController.viewControllers = controllers;\r\n\t[controllers release];\r\n\t\r\n\t[window addSubview:tabBarController.view];\r\n    [self.window makeKeyAndVisible];\r\n    \r\n    return YES;\r\n}\r\n<\/pre>\n

\n\"t084-differenti-view-controller-nelle-tabbar-xcode-02\"<\/a>
\n<\/center><\/p>\n
Aggiungiamo un UITableViewController<\/h4>\n
Creiamo un nuovo file, questa volta sar\u00e0 un oggetto di tipo UITableViewController, e diamogli un nome (io ho scelto “Tab2ViewController”). Dichiariamo un nuovo oggetto nel file di implementazione, di tipo NSArray, il quale conterr\u00e0 tutti gli elementi da inserire nelle celle (in questo caso saranno stringhe); nel file di implementazione allochiamo ed inizializziamo l\u02bcarray (senza dimenticarci dei soliti synthetize e dealloc), in numberOfSectionsInTableView: ritorniamo il valore 1 (una sola sezione per la tabella), in numberOfRowsInSection: ritorniamo la dimensione dell\u02bcarray, ed in cellForRowAtIndexPath: invece \u00e8 tutto gi\u00e0 pronto, dobbiamo solo impostare il testo della cella recuperandolo dall\u02bcarray dei dati (non discuto sul come farlo, esula dagli scopi di questa guida l\u02bcimplementazione di una UITableView). Quindi dovreste ottenere una cosa del genere:<\/p>\n
\r\n- (void)viewDidLoad {\r\n    [super viewDidLoad];\r\n\r\n\tvociTabella = [[NSArray alloc] initWithObjects:@\"iPhone\", @\"iPod\", @\"iPod touch\", @\"iPad\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t@\"iMac\", @\"Mac Pro\", @\"iBook\",\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t@\"MacBook\", @\"MacBook Pro\", @\"PowerBook\", nil];\r\n}\r\n\r\n\r\n- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {\r\n    return 1;\r\n}\r\n\r\n\r\n- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {\r\n    return vociTabella.count;\r\n}\r\n\r\n\r\n- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {\r\n    \r\n    static NSString *CellIdentifier = @\"Cell\";\r\n    \r\n    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];\r\n    if (cell == nil) {\r\n        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];\r\n    }\r\n    \r\n    cell.textLabel.text = [vociTabella objectAtIndex:indexPath.row];\r\n    \r\n    return cell;\r\n}\r\n<\/pre>\n
Sempre nel file di implementazione di AppDelegate, eseguiamo le solite operazioni: importiamo l\u02bcheader del nuovo UITableViewController, dichiariamo ed inizializziamo il nuovo oggetto (questa volta impostando lo stile della tabella), scegliamo un titolo, aggiungiamo il tutto all\u02bcarray dei controllers e rilasciamo. Compiliamo ed eseguiamo:<\/p>\n

\n\"t084-differenti-view-controller-nelle-tabbar-xcode-03\"<\/a>
\n<\/center><\/p>\n
Notate come UITableViewController si occupa in maniera del tutto automatica del posizionamento di UITableView all\u02bcinterno dello schermo, a differenza che nel caso precedente dove eravamo noi a dover impostare le dimensioni; questo \u00e8 giustificato dal fatto che in un generico UIViewController Apple da allo sviluppatore la libert\u00e0 di fare ci\u00f2 che vuole con la UIView che questo controller deve gestire, mentre UITableViewController deve invece gestire UITableView, e dunque le dimensioni vengono calcolate in maniera
\nautomatica.<\/p>\n
Aggiungiamo un UINavigationController<\/h4>\n
Proseguiamo col nostro tutorial: questa volta il terzo tab di UITabBar dovr\u00e0 contenere un UINavigationController<\/em> che ci permetter\u00e0 di passare da una view all\u02bcaltra in maniera del tutto automatica. Per prima cosa, creiamo un nuovo UITableViewController ed eseguiamo esattamente tutte le operazioni effettuate precedentemente (ma proprio tutte!), in pi\u00f9 aggiungiamo un Disclosure Indicator alle celle della tabella, per indicare all\u02bcutente che \u00e8 possibile toccarle e visualizzare ulteriori dettagli per quella voce. Utilizzeremo il view
\ncontroller che abbiamo creato prima, ma con una piccola modifica: il view controller deve sapere se la sua view \u00e8 inserita in un UINavigationController o meno, per regolarne le dimensioni: quindi modifichiamo i nostri file aggiungendo una variabile di tipo BOOL che indica appunto se questa opzione si verifica o meno, ed implementiamo il tutto nel file .m:<\/p>\n
\r\n#import \r\n\r\n@interface Tab1ViewController : UIViewController {\r\n\r\n\tNSString *testo;\r\n\tBOOL viewInNavigation;\r\n}\r\n\r\n@property (nonatomic, retain) NSString *testo;\r\n@property (nonatomic) BOOL viewInNavigation;\r\n\r\n@end\r\n<\/pre>\n
\r\n- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {\r\n    \r\n\tself = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];\r\n    \r\n\tif (self) {\r\n\t\t\r\n\t\tviewInNavigation = NO;\r\n    }\r\n    \r\n\treturn self;\r\n}\r\n\r\n- (void)loadView {\r\n\r\n\tCGFloat heightView = viewInNavigation ? 367.0 : 411.0;\r\n\t\r\n\tCGRect rectViewPrincipale = CGRectMake(0.0, 0.0, 320.0, heightView);\r\n\t\r\n\t\/\/ Tutto uguale a prima...\r\n}\r\n<\/pre>\n
Si noti come sia stato sovrascritto il metodo init del view controller: l\u02bcabbiamo fatto perch\u00e9 la variabile deve avere per forza di cose un valore, che sia YES o NO; io ho scelto quest\u02bcultimo valore come default.
\nAndiamo in AppDelegate, importiamo l\u02bcheader del nuovo UITableViewController, dichiariamo ed inizializziamo il nuovo oggetto (impostando lo stile della tabella) e scegliamo un titolo; adesso dichiariamo ed inizializziamo con il Tab3ViewController un nuovo oggetto, di tipo UINavigationController (sottoclasse di UIViewController), che si occuper\u00e0 del passaggio tra una view e l\u02bcaltra, ed includiamolo nell\u02bcarray controllers:<\/p>\n
\r\nTab3ViewController *tab3Controller = [[Tab3ViewController alloc] initWithStyle:UITableViewStylePlain];\r\ntab3Controller.title = @\"Tab 3\";\r\n\t\r\nUINavigationController *nav3Controller = [[UINavigationController alloc] initWithRootViewController:tab3Controller];\r\n[controllers addObject:nav3Controller];\r\n\t\r\n[nav3Controller release];\r\n[tab3Controller release];\r\n<\/pre>\n
Torniamo a didSelectRowAtIndexPath: e scriviamo il codice che ci serve per importare il view controller (il suo file header), allocarlo ed inizializzarlo, dirgli che siamo in presenza di un UINavigationController, impostare titolo e testo, ed eseguire l\u02bcoperazione di push sul suo navigation controller… che significa quest\u02bcultima cosa? \u00c8 presto detto: l\u02bcistruzione self.navigationController richiama appunto l\u02bcoggetto UINavigationController di cui
\nTab3ViewController fa parte: siccome \u00e8 quest\u02bcultimo controller ad essere visualizzato in primo piano in quel momento, dobbiamo dire ad UINavigationController che vi deve sostituire l\u02bcoggetto di tipo Tab1ViewController appena creato, eseguendo appunto un\u02bcoperazione di push. Fatto questo, lo rilasciamo:<\/p>\n
\r\n- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {\r\n    \r\n\tNSString *voce = [vociTabella objectAtIndex:indexPath.row];\r\n\t\r\n\tTab1ViewController *viewController = [[Tab1ViewController alloc] initWithNibName:nil bundle:nil];\r\n\tviewController.viewInNavigation = YES;\r\n\tviewController.title = voce;\r\n\tviewController.testo = voce;\r\n\t\r\n\t[self.navigationController pushViewController:viewController animated:YES];\r\n\t[viewController release];\r\n}\r\n<\/pre>\n
Compiliamo ed eseguiamo…<\/p>\n

\n\"t084-differenti-view-controller-nelle-tabbar-xcode-04\"<\/a>
\n<\/center><\/p>\n
La tabella che viene visualizzata nel terzo tab \u00e8 sensibile al tocco dell\u02bcutente: una volta toccata una cella, verr\u00e0 visualizzato un UIViewController, che prender\u00e0 il posto della tabella iniziale tramite un\u02bcanimazione di scorrimento: di sostituzione ed animazione si occupa appunto UINavigationController, il quale \u00e8 anche responsabile della creazione del pulsante in alto a sinistra nella UINavigationBar (la barra di colore blu al in alto) utilizzato per eseguire l\u02bcoperazione cosiddetta di pop, e tornare alla tabella iniziale.<\/p>\n
\"\"<\/a> Se avete problemi con il tutorial, questo \u00e8 il nostro file di progetto.<\/a><\/p>\n

\n\"banner-OperaBook-iPhone-devAPP\"<\/a>
\n<\/center><\/p>\n","protected":false},"excerpt":{"rendered":"
Lo scopo di questa guida \u00e8 riuscire a scrivere un’applicazione basata sull’utilizzo di una TabBar che gestisca…<\/p>\n","protected":false},"author":541,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[5,567,72,242,147,44,568],"class_list":["post-5866","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-objective-c","tag-pasquale-matrisciano","tag-tabbar","tag-tutorial-xcode","tag-uinavigationcontroller","tag-uiviewcontroller","tag-viewcontroller"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5866","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\/541"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=5866"}],"version-history":[{"count":9,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5866\/revisions"}],"predecessor-version":[{"id":5882,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/5866\/revisions\/5882"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=5866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=5866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=5866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}