0, Screen Layout --------------------------------------------------------
| Status Bar(20-pixel) | -------------------------------------------------------- | Navigation Bar | -------------------------------------------------------- | View | --------------------------------------------------------
| Tab Bar | --------------------------------------------------------
View Controller Forms
UIViewController
UINavigationController
UITabBarController
Status Bar Shows thing like signal strenth, time, and battery charge,
...
1, Navigation Controller A) Navigation Bar's Layout Following is layout of navigation bar which is located under status bar: -------------------------------------------------------------------- | | | | --------------------------------------------------------------------
B) Prepare single view controllers a) Create a view Nib file for top view controller, suppose this Nib file is named MyTopNib.xib b) Create files to implement top view controller (it inherits from UIViewController), suppose it is named MyTopViewController c) Create a view Nib file for sub view controller, suppose this Nib file is named MyFirstSubNib.xib d) Create files to implement view controller (it inherits from UIViewController also), suppose it is named MyFirstSubViewController,
C) Add single view controllers to navigation controller a) Display Top View When you want to display top view (such as switch to top view from other view), just add following codes: MyTopViewController *myTopController = [[[MyTopViewController alloc] initWithNibName:@"MyTopNib.xib" bundle:[NSBundle mainBundle] autorelease]; UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:myTopController]; [window addSubview:[navigationController view]];
b)Enter into Sub-view from Top-view MyFirstSubViewController *mySecondsController = [[[MyFirstSubViewController alloc] initWithNibName:@"MyFirstSubNib.xi" bundle:[NSBundle mainBundle]] autorelease]; [[self navigationController] pushViewController:mySecondsController animated:YES];
D) Customize Navigation Controller By default: i) left bar button item, title, and right bar button item are not shown on top navigation view; ii) title, and back/left/right bar button item are not shown on sub navigation view But you can customize navigation controller to show these items as following: a) Set Title of Navigation View In single view controller (MyTopViewController and MyFirstControllerView), implement function viewDidLoad:, and add codes: self.title = @"youDefinedTitleForTheView"; to this function
b) Add left bar button item to top view UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"yourDefinedTitleForThisButton" style:UIBarButtonItemStylePlain target:self action:@selector(youDefinedActionForLeftButtonClickEvent:)]; self.navigationItem.leftBarButtonItem = leftButton; //self is instance of UIViewController, but not UINavigationController
c) Add right bar button item UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"yourDefinedTitleForThisButton" style:UIBarButtonItemStylePlain target:self action:@selector(youDefinedActionForRightButtonClickEvent:)]; self.navigationItem.leftBarButtonItem = rightButton; //self is instance of UIViewController, but not UINavigationController
d) Add back bar button item UIBarButtonItem *backButton =
[[UIBarButtonItem alloc] initWithTitle:@"yourDefinedTitleForThisButton"
style:UIBarButtonItemStylePlain target:self
action:@selector(youDefinedActionForRightButtonClickEvent:)]; self.navigationItem.backBarButtonItem = backButton; //self is instance of UIViewController, but not UINavigationController
2, Tab Bar Controller A) Prepare single view controllers Do this like that in "Navigation Controller".
B) Add single view controllers to navigation controller a) Create instance of UITabBarController. UITabBarController *tabBarController = [[UITabBarController alloc] init];
b) Create instances of single view controllers and add them to Tab Bar Controller MyFirstViewController *viewController1 = [[[MyFirstViewController alloc]
initWithNibName:@"MyFirstViewNib" bundle:[NSBundle mainBundle]
autorelease]; MySecondViewController *viewController2 = [[[MySecondViewController alloc]
initWithNibName:@"MySecondViewNib" bundle:[NSBundle mainBundle]
autorelease];
c) Display [window addSubView:tabBarController.view];
C) Customize Tab Bat Controller By default, the title and image of Tab Bar items are empty, you can follow steps below to specify theem: a) Set title Add following codes in initWithNibName: of your single controller: self.title = @"youDefinedTitle";
b) Set icon i) Add customized icon Add following codes in initWithNibName: of your single controller: self.tabBarItem.image = [UIImage imageNamed:@"youSpecifiedImageFileName"]; Note: The image for tab bar item must contain Alpha channel(Please refer to the original tutorial); Otherwize, the icon will diaplay incorrectly. More useful iPhone tool bar icons, please refer to remote site: or you can download them here: iPhone toolbar icons ii) Add standard icon (system defined) Add following code in initWithNibName: of your single controller: [[self tabBarItem] initWithTabBarSystemItem:UITabBarSystemItemMore tag:0]; or you can use other tab bar system item, please refer to UITabBarSystemItem:
c) Change the Background Color of Tab Bar Controlle