34,333
edits
Changes
New page: So far in this book we have worked exclusively with applications that present a single view to the user. In practice, it is more likely that an application will need to display a variety o...
So far in this book we have worked exclusively with applications that present a single view to the user. In practice, it is more likely that an application will need to display a variety of different content depending on the actions of the user. This is typically achieved by creating multiple views (often referred to as content views) and then providing a mechanism for the user to switch from one view to another. The primary mechanisms for achieving this involve the use of either the ''UINavigationBar'' or ''UITabBar'' view components. In this chapter we will look at implementing a multiview application using a Tab Bar.
== An Overview of the Tab Bar ==
The UITabBar is typically located at the bottom of the screen and presents an array of tabs containing text and an optional icon that can be selected by the user to display a different content view. Typical examples of the tab bar in action include the iPhone’s built-in iPod and Phone applications. The iPod application, for example, presents a tab bar with options to display playlists, artists, songs and videos. Depending on the selection made from the tab bar, a different content view is displayed to the user.
== Understanding View Controllers in a Multiview Application ==
In preceding chapters we have talked about the model-view-controller concept in relation to each view having its own view controller (for additional information on this read the chapter entitled [[An Overview of the iPhone Application Development Architecture]]). In a multiview application, each content view will still have a view controller associated with it to handle user interaction and display updates. Multiview applications, however, require an additional controller.
As we have already discussed, multiview applications need a visual control that will be used by the user to switch from one content view to another, and that this usually takes the form of a tab or navigation bar. Both of these components are also views and as such need to have a view controller. In the context of a multiview application, this is known as the ''root controller'' and is responsible for controlling which content view is currently displayed to the user. As an app developer you are free to create your own root controller by subclassing from the UIViewController class, but in practice it usually makes more sense to use an instance of either the UIKit UITabBarController or UINavigationController classes.
Regardless of the origins of your chosen root controller, it is the first controller that is loaded by the application when it launches. Once loaded, it is responsible for displaying the first content view to the user and then switching the various content views in and out as required based on the user’s subsequent interaction with the user interface.
Since this chapter is dedicated to the creation of a tab bar based application we will be using an instance of the UITabBarController as our root controller.
== Setting up the Tab Bar Example Application ==
The first step in creating our example application is to create a new Xcode project. To do so, launch Xcode and select the option to ''Create a new Xcode project''. On the resulting ''New Project screen'' select the ''Window-based Application'' option, click ''Choose…'' and name the project ''TabBar''.
== Creating the Content Views and View Controllers ==
At this point, Xcode has created a minimal template for our application that contains a main window but no views or view controllers. The goal of this example is to provide two content views that the user can switch between using a tab bar. Each content view will need a view controller and a NIB file to contain the user interface. To create these, right click over the ''Classes'' category located in the ''Groups and Files'' panel on the left hand side of the main Xcode project window and select ''Add -> New File…''. This will display the template selection screen as illustrated in the following figure:
[[Image:create_new_view_controller_class_file.jpg|Adding a new view controller class to an Xcode project]]
In the left hand panel, verify that the iPhone OS ''Cocoa Touch Class'' option is selected and that the current selection in the main panel is the ''UIViewController subclass'' icon. Since we also need an Interface Builder NIB file, make sure that the ''With XIB for Interface Builder'' option is selected before clicking on the ''Next'' button. On the following screen, specify ''ScreenOneViewController.m'' as the file name and verify that the ''Also create ScreenOneViewController.h'' option is selected. Click ''Finish'' to create the new view controller class files and corresponding Interface Builder file.
Repeat the above procedure to create the second content view and view controller, this time using the name ''ScreenTwoViewController''.
== Configuring the App Delegate ==
The next class we are going to add to our project is the root controller. Before we do so, however, we need to add an outlet to this controller within the app delegate file, and also add some code to the ''applicationDidFinishLoading'' method to add the view instance of the root controller as a subview of the application’s main window. Select the ''TabBar'' item at the top of the ''Groups and Files'' panel so that all the files in the project are listed. Select the ''TabBarAppDelegate.h'' file and modify it as follows in the editing panel:
<pre>
#import <UIKit/UIKit.h>
@interface TabBarAppDelegate : NSObject <UIApplicationDelegate> {
UITabBarController *tabController;
UIWindow *window;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabController;
@end
</pre>
Next, edit the ''TabBarAppDelegate.m'' implementation file and modify the code as follows:
<pre>
#import "TabBarAppDelegate.h"
@implementation TabBarAppDelegate
@synthesize tabController;
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window addSubview:tabController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[tabController release];
[window release];
[super dealloc];
}
@end
</pre>
Now that we have made the appropriate additions to the app delegate sub class we can now add the root view controller to the project.
== Creating the UITabBarController ==
As previously mentioned, because we are designing a tab bar based multiview application it makes sense for us to the an instance of the UITabBarController class as the root controller. This is achieved from within ''MainWindow.xib'', so double click on this file to load it into Interface Builder. From within the Library window, click and drag a ''Tab Bar Controller'' object over to a blank area of the ''MainWindow.xib'' window. Once the object has been added the list of items in the ''MainWindow.xib'' window should appear as follows:
[[Image:adding_tabbarcontroller.jpg|Adding a UITabBarController to an app]]
As shown in the above figure, the Tab Bar Controller is now listed amongst the items in the ''MainWindow.xib'' file and a new window entitled ''Tab Bar Controller'' now shows us a visual representation of our Tab Bar view. By default the Tab Bar is created with two tabs. Additional tabs may be added by selecting the ''Tab Bar Controller'' item from the ''MainWindow.xib'' window and opening the Attributes Inspector (''Tools -> Attributes Inspector'' or Command key + 1). In the Attributes Inspector window, tabs may be added or removed by clicking on the + and - buttons located beneath the list of view controllers:
[[Image:tab_bar_controller_attributes.jpg|Adding or remove view controllers on Tab Bar Controller]]
Since we only plan to implement two content views in this example leave the number of view controllers unchanged.
== Associating Content Views with Tabs ==
Having created an instance of the Tab Bar Controller, the content views and corresponding view controllers it is time to associate each tab in the tab bar with a content view. Within the ''Tab Bar Controller'' window select the tab labeled ''Item 1'' and open the Attribute Inspector. Using the drop down menu next to ''NIB Name'' select the first of our two view controllers (the one we named ''ScreenOneViewController''). Be sure to leave the ''Wants Full Screen'' field unset, otherwise the content view will fill the entire screen and obscure the tab bar. Note that once the attribute settings have been configured, the view area of Tab Bar Controller window updates to indicate where the view is loaded from:
[[Image:tab_bar_view_contoller_attributes.jpg|The Tab Bar View Controller Attributes window]]
Select the tab labeled ''Item 2'' and repeat the above steps, this time selecting ''ScreenTwoViewController'' as the NIB name.
Click twice on the icon in the ''Item 1'' tab so that just the icon and text are highlighted. In the Attributes Inspector window, change the ''Title'' field to ''Screen One''. If you have loaded any icon images into the project resources you may also specify one using the Image menu.
[[Image:tab_bar_item_attributes.jpg|The Tab Bar Item Attributes window]]
Repeat these steps for Item 2, this time changing the title to Screen Two.
== Connecting the App Delegate Outlet to the Tab Bar Controller ==
Earlier in this chapter we created an outlet for the root view controller in the App Delegate. In order to enable this we must connect it to the ''Tab Bar Controller'' instance we have created. From within the ''MainWindow.xib'' file hold down the Control key, click on the ''Tab Bar App Delegate'' icon and drag the resulting line to the ''Tab Bar Controller'' icon. From the resulting Outlets menu, select the ''tabController'' outlet.
We have now completed the changes that need to be made to the ''MainWindow.xib'' file so save the changes (''File -> Save'') and quit from Interface Builder (''Interface Builder -> Quit Interface Builder'').
== Designing the Content Views ==
The final steps before trying out our application involve creating the user interfaces for our two content views. From within the Xcode project window, double click on ''ScreenOneViewController.xib'' to load it into Interface Builder. Within Interface Builder, drag a Label object from the ''Inputs & Values'' section of the Library window and position it in the center of the View window. Double click on the label text so that it becomes editable and change it so that it reads ''Screen One''. Save the design and exit from Interface Builder. Next, load the ''ScreenTwoViewController.xib'' file and perform the same steps, this time setting the label text to ''Screen Two''. Once again, save and exit from Interface Builder.
== Testing the Multiview Application ==
All that remains to do is to test that the application works. From within the main Xcode project window click on the ''Build and Run'' toolbar button and wait for the code to compile and run within the simulator. Once running, selecting tabs from the tab bar should cause the views to switch:
[[Image:multiview_app_running_screen1.jpg|A running iPhone Multiview application]][[Image:multiview_app_running_screen2.jpg]]
== An Overview of the Tab Bar ==
The UITabBar is typically located at the bottom of the screen and presents an array of tabs containing text and an optional icon that can be selected by the user to display a different content view. Typical examples of the tab bar in action include the iPhone’s built-in iPod and Phone applications. The iPod application, for example, presents a tab bar with options to display playlists, artists, songs and videos. Depending on the selection made from the tab bar, a different content view is displayed to the user.
== Understanding View Controllers in a Multiview Application ==
In preceding chapters we have talked about the model-view-controller concept in relation to each view having its own view controller (for additional information on this read the chapter entitled [[An Overview of the iPhone Application Development Architecture]]). In a multiview application, each content view will still have a view controller associated with it to handle user interaction and display updates. Multiview applications, however, require an additional controller.
As we have already discussed, multiview applications need a visual control that will be used by the user to switch from one content view to another, and that this usually takes the form of a tab or navigation bar. Both of these components are also views and as such need to have a view controller. In the context of a multiview application, this is known as the ''root controller'' and is responsible for controlling which content view is currently displayed to the user. As an app developer you are free to create your own root controller by subclassing from the UIViewController class, but in practice it usually makes more sense to use an instance of either the UIKit UITabBarController or UINavigationController classes.
Regardless of the origins of your chosen root controller, it is the first controller that is loaded by the application when it launches. Once loaded, it is responsible for displaying the first content view to the user and then switching the various content views in and out as required based on the user’s subsequent interaction with the user interface.
Since this chapter is dedicated to the creation of a tab bar based application we will be using an instance of the UITabBarController as our root controller.
== Setting up the Tab Bar Example Application ==
The first step in creating our example application is to create a new Xcode project. To do so, launch Xcode and select the option to ''Create a new Xcode project''. On the resulting ''New Project screen'' select the ''Window-based Application'' option, click ''Choose…'' and name the project ''TabBar''.
== Creating the Content Views and View Controllers ==
At this point, Xcode has created a minimal template for our application that contains a main window but no views or view controllers. The goal of this example is to provide two content views that the user can switch between using a tab bar. Each content view will need a view controller and a NIB file to contain the user interface. To create these, right click over the ''Classes'' category located in the ''Groups and Files'' panel on the left hand side of the main Xcode project window and select ''Add -> New File…''. This will display the template selection screen as illustrated in the following figure:
[[Image:create_new_view_controller_class_file.jpg|Adding a new view controller class to an Xcode project]]
In the left hand panel, verify that the iPhone OS ''Cocoa Touch Class'' option is selected and that the current selection in the main panel is the ''UIViewController subclass'' icon. Since we also need an Interface Builder NIB file, make sure that the ''With XIB for Interface Builder'' option is selected before clicking on the ''Next'' button. On the following screen, specify ''ScreenOneViewController.m'' as the file name and verify that the ''Also create ScreenOneViewController.h'' option is selected. Click ''Finish'' to create the new view controller class files and corresponding Interface Builder file.
Repeat the above procedure to create the second content view and view controller, this time using the name ''ScreenTwoViewController''.
== Configuring the App Delegate ==
The next class we are going to add to our project is the root controller. Before we do so, however, we need to add an outlet to this controller within the app delegate file, and also add some code to the ''applicationDidFinishLoading'' method to add the view instance of the root controller as a subview of the application’s main window. Select the ''TabBar'' item at the top of the ''Groups and Files'' panel so that all the files in the project are listed. Select the ''TabBarAppDelegate.h'' file and modify it as follows in the editing panel:
<pre>
#import <UIKit/UIKit.h>
@interface TabBarAppDelegate : NSObject <UIApplicationDelegate> {
UITabBarController *tabController;
UIWindow *window;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabController;
@end
</pre>
Next, edit the ''TabBarAppDelegate.m'' implementation file and modify the code as follows:
<pre>
#import "TabBarAppDelegate.h"
@implementation TabBarAppDelegate
@synthesize tabController;
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {
// Override point for customization after application launch
[window addSubview:tabController.view];
[window makeKeyAndVisible];
}
- (void)dealloc {
[tabController release];
[window release];
[super dealloc];
}
@end
</pre>
Now that we have made the appropriate additions to the app delegate sub class we can now add the root view controller to the project.
== Creating the UITabBarController ==
As previously mentioned, because we are designing a tab bar based multiview application it makes sense for us to the an instance of the UITabBarController class as the root controller. This is achieved from within ''MainWindow.xib'', so double click on this file to load it into Interface Builder. From within the Library window, click and drag a ''Tab Bar Controller'' object over to a blank area of the ''MainWindow.xib'' window. Once the object has been added the list of items in the ''MainWindow.xib'' window should appear as follows:
[[Image:adding_tabbarcontroller.jpg|Adding a UITabBarController to an app]]
As shown in the above figure, the Tab Bar Controller is now listed amongst the items in the ''MainWindow.xib'' file and a new window entitled ''Tab Bar Controller'' now shows us a visual representation of our Tab Bar view. By default the Tab Bar is created with two tabs. Additional tabs may be added by selecting the ''Tab Bar Controller'' item from the ''MainWindow.xib'' window and opening the Attributes Inspector (''Tools -> Attributes Inspector'' or Command key + 1). In the Attributes Inspector window, tabs may be added or removed by clicking on the + and - buttons located beneath the list of view controllers:
[[Image:tab_bar_controller_attributes.jpg|Adding or remove view controllers on Tab Bar Controller]]
Since we only plan to implement two content views in this example leave the number of view controllers unchanged.
== Associating Content Views with Tabs ==
Having created an instance of the Tab Bar Controller, the content views and corresponding view controllers it is time to associate each tab in the tab bar with a content view. Within the ''Tab Bar Controller'' window select the tab labeled ''Item 1'' and open the Attribute Inspector. Using the drop down menu next to ''NIB Name'' select the first of our two view controllers (the one we named ''ScreenOneViewController''). Be sure to leave the ''Wants Full Screen'' field unset, otherwise the content view will fill the entire screen and obscure the tab bar. Note that once the attribute settings have been configured, the view area of Tab Bar Controller window updates to indicate where the view is loaded from:
[[Image:tab_bar_view_contoller_attributes.jpg|The Tab Bar View Controller Attributes window]]
Select the tab labeled ''Item 2'' and repeat the above steps, this time selecting ''ScreenTwoViewController'' as the NIB name.
Click twice on the icon in the ''Item 1'' tab so that just the icon and text are highlighted. In the Attributes Inspector window, change the ''Title'' field to ''Screen One''. If you have loaded any icon images into the project resources you may also specify one using the Image menu.
[[Image:tab_bar_item_attributes.jpg|The Tab Bar Item Attributes window]]
Repeat these steps for Item 2, this time changing the title to Screen Two.
== Connecting the App Delegate Outlet to the Tab Bar Controller ==
Earlier in this chapter we created an outlet for the root view controller in the App Delegate. In order to enable this we must connect it to the ''Tab Bar Controller'' instance we have created. From within the ''MainWindow.xib'' file hold down the Control key, click on the ''Tab Bar App Delegate'' icon and drag the resulting line to the ''Tab Bar Controller'' icon. From the resulting Outlets menu, select the ''tabController'' outlet.
We have now completed the changes that need to be made to the ''MainWindow.xib'' file so save the changes (''File -> Save'') and quit from Interface Builder (''Interface Builder -> Quit Interface Builder'').
== Designing the Content Views ==
The final steps before trying out our application involve creating the user interfaces for our two content views. From within the Xcode project window, double click on ''ScreenOneViewController.xib'' to load it into Interface Builder. Within Interface Builder, drag a Label object from the ''Inputs & Values'' section of the Library window and position it in the center of the View window. Double click on the label text so that it becomes editable and change it so that it reads ''Screen One''. Save the design and exit from Interface Builder. Next, load the ''ScreenTwoViewController.xib'' file and perform the same steps, this time setting the label text to ''Screen Two''. Once again, save and exit from Interface Builder.
== Testing the Multiview Application ==
All that remains to do is to test that the application works. From within the main Xcode project window click on the ''Build and Run'' toolbar button and wait for the code to compile and run within the simulator. Once running, selecting tabs from the tab bar should cause the views to switch:
[[Image:multiview_app_running_screen1.jpg|A running iPhone Multiview application]][[Image:multiview_app_running_screen2.jpg]]
