07 navigation tab bar controllers
TRANSCRIPT
![Page 1: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/1.jpg)
CS193P - Lecture 7iPhone Application Development
Navigation & Tab Bar Controllers
1Thursday, January 28, 2010
![Page 2: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/2.jpg)
Announcements• Assignment 3 is due tomorrow• Paparazzi 1 is due on Wednesday February 3rd
2Thursday, January 28, 2010
![Page 3: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/3.jpg)
Today’s Topics• Navigation Controllers
■ Application Data Flow
• Customizing Navigation• Tab Bar Controllers• Combining Approaches
3Thursday, January 28, 2010
![Page 4: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/4.jpg)
Navigation Controllers
4Thursday, January 28, 2010
![Page 5: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/5.jpg)
UINavigationController• Stack of view controllers• Navigation bar
NavigationController
5Thursday, January 28, 2010
![Page 6: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/6.jpg)
UINavigationController• Stack of view controllers• Navigation bar
View Controller
View Controller
View Controller
NavigationController
5Thursday, January 28, 2010
![Page 7: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/7.jpg)
How It Fits Together
6Thursday, January 28, 2010
![Page 8: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/8.jpg)
How It Fits Together• Top view controller’s view
6Thursday, January 28, 2010
![Page 9: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/9.jpg)
How It Fits Together• Top view controller’s view• Top view controller’s title
6Thursday, January 28, 2010
![Page 10: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/10.jpg)
How It Fits Together• Top view controller’s view• Top view controller’s title• Previous view controller’s title
6Thursday, January 28, 2010
![Page 11: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/11.jpg)
How It Fits Together• Top view controller’s view• Top view controller’s title• Previous view controller’s title• Top view controller’s toolbar
items (iPhone OS 3.0)
6Thursday, January 28, 2010
![Page 12: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/12.jpg)
Modifying the Navigation Stack
7Thursday, January 28, 2010
![Page 13: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/13.jpg)
Modifying the Navigation Stack• Push to add a view controller- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated;
7Thursday, January 28, 2010
![Page 14: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/14.jpg)
Modifying the Navigation Stack• Push to add a view controller
• Pop to remove a view controller
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated;
- (UIViewController *)popViewControllerAnimated:(BOOL)animated;
7Thursday, January 28, 2010
![Page 15: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/15.jpg)
Modifying the Navigation Stack• Push to add a view controller
• Pop to remove a view controller
• Set to change the entire stack of view controllers(iPhone OS 3.0)
- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated;
- (UIViewController *)popViewControllerAnimated:(BOOL)animated;
- (void)setViewControllers:(NSArray *)viewControllers animated:(BOOL)animated;
7Thursday, January 28, 2010
![Page 16: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/16.jpg)
Pushing Your First View Controller
8Thursday, January 28, 2010
![Page 17: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/17.jpg)
Pushing Your First View Controller
- (void)applicationDidFinishLaunching// Create a navigation controllernavController = [[UINavigationController alloc] init];
}
8Thursday, January 28, 2010
![Page 18: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/18.jpg)
Pushing Your First View Controller
- (void)applicationDidFinishLaunching// Create a navigation controllernavController = [[UINavigationController alloc] init];
}
// Push the first view controller on the stack[navController pushViewController:firstViewController
animated:NO];
8Thursday, January 28, 2010
![Page 19: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/19.jpg)
Pushing Your First View Controller
- (void)applicationDidFinishLaunching// Create a navigation controllernavController = [[UINavigationController alloc] init];
}
// Push the first view controller on the stack[navController pushViewController:firstViewController
animated:NO];
// Add the navigation controller’s view to the window[window addSubview:navController.view];
8Thursday, January 28, 2010
![Page 20: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/20.jpg)
In Response to User Actions
9Thursday, January 28, 2010
![Page 21: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/21.jpg)
In Response to User Actions• Push from within a view controller on the stack- (void)someAction:(id)sender{
// Potentially create another view controllerUIViewController *viewController = ...;
[self.navigationController pushViewController:viewController animated:YES];
}
9Thursday, January 28, 2010
![Page 22: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/22.jpg)
In Response to User Actions• Push from within a view controller on the stack
• Almost never call pop directly!■ Automatically invoked by the back button
- (void)someAction:(id)sender{
// Potentially create another view controllerUIViewController *viewController = ...;
[self.navigationController pushViewController:viewController animated:YES];
}
9Thursday, January 28, 2010
![Page 23: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/23.jpg)
Demo:Pushing & Popping
10Thursday, January 28, 2010
![Page 24: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/24.jpg)
Application Data Flow
11Thursday, January 28, 2010
![Page 25: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/25.jpg)
Paparazzi
12Thursday, January 28, 2010
![Page 26: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/26.jpg)
A Controller for Each Screen
List Controller
Detail Controller
List Controller
13Thursday, January 28, 2010
![Page 27: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/27.jpg)
Connecting View Controllers
14Thursday, January 28, 2010
![Page 28: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/28.jpg)
Connecting View Controllers• Multiple view controllers may need to share data
14Thursday, January 28, 2010
![Page 29: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/29.jpg)
Connecting View Controllers• Multiple view controllers may need to share data• One may need to know about what another is doing
■ Watch for added, removed or edited data■ Other interesting events
14Thursday, January 28, 2010
![Page 30: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/30.jpg)
How Not To Share Data• Global variables or singletons
■ This includes your application delegate!
• Direct dependencies make your code less reusable■ And more difficult to debug & test
List Controller
Detail Controller
15Thursday, January 28, 2010
![Page 31: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/31.jpg)
How Not To Share Data• Global variables or singletons
■ This includes your application delegate!
• Direct dependencies make your code less reusable■ And more difficult to debug & test
List Controller
Detail Controller
Application Delegate
15Thursday, January 28, 2010
![Page 32: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/32.jpg)
How Not To Share Data• Global variables or singletons
■ This includes your application delegate!
• Direct dependencies make your code less reusable■ And more difficult to debug & test
List Controller
Detail Controller
Application Delegate
Don’t Do This!
15Thursday, January 28, 2010
![Page 33: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/33.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated
List Controller
Detail Controller
16Thursday, January 28, 2010
![Page 34: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/34.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated• Define input parameters for your view controller
List Controller
Detail Controller
16Thursday, January 28, 2010
![Page 35: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/35.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated• Define input parameters for your view controller
List Controller
Detail Controller
Data
16Thursday, January 28, 2010
![Page 36: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/36.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated• Define input parameters for your view controller
• For communicating back up the hierarchy, use loose coupling■ Define a generic interface for observers (like delegation)
List Controller
Detail Controller
16Thursday, January 28, 2010
![Page 37: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/37.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated• Define input parameters for your view controller
• For communicating back up the hierarchy, use loose coupling■ Define a generic interface for observers (like delegation)
List Controller
Detail Controller
I care!
16Thursday, January 28, 2010
![Page 38: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/38.jpg)
Best Practices for Data Flow• Figure out exactly what needs to be communicated• Define input parameters for your view controller
• For communicating back up the hierarchy, use loose coupling■ Define a generic interface for observers (like delegation)
List Controller
Detail Controller
16Thursday, January 28, 2010
![Page 39: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/39.jpg)
Example:UIImagePickerController
17Thursday, January 28, 2010
![Page 40: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/40.jpg)
Demo:Passing Data Along
18Thursday, January 28, 2010
![Page 41: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/41.jpg)
Customizing Navigation
19Thursday, January 28, 2010
![Page 42: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/42.jpg)
Customizing Navigation• Buttons or custom controls• Interact with the entire screen
20Thursday, January 28, 2010
![Page 43: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/43.jpg)
Customizing Navigation• Buttons or custom controls• Interact with the entire screen
20Thursday, January 28, 2010
![Page 44: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/44.jpg)
UINavigationItem• Describes appearance of the navigation bar
■ Title string or custom title view■ Left & right bar buttons■ More properties defined in UINavigationBar.h
21Thursday, January 28, 2010
![Page 45: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/45.jpg)
UINavigationItem• Describes appearance of the navigation bar
■ Title string or custom title view■ Left & right bar buttons■ More properties defined in UINavigationBar.h
• Every view controller has a navigation item for customizing■ Displayed when view controller is on top of the stack
21Thursday, January 28, 2010
![Page 46: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/46.jpg)
Navigation Item Ownership
View Controller
Right Bar Button Item
Navigation Item
Left Bar Button Item
Title View
22Thursday, January 28, 2010
![Page 47: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/47.jpg)
Displaying a Title• UIViewController already has a title property
■ @property(nonatomic,copy) NSString *title;
• Navigation item inherits automatically■ Previous view controller’s title is displayed in back button
23Thursday, January 28, 2010
![Page 48: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/48.jpg)
Displaying a Title• UIViewController already has a title property
■ @property(nonatomic,copy) NSString *title;
• Navigation item inherits automatically■ Previous view controller’s title is displayed in back button
viewController.title = @“Detail”;
23Thursday, January 28, 2010
![Page 49: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/49.jpg)
Left & Right Buttons• UIBarButtonItem
■ Special object, defines appearance & behavior for items in navigation bars and toolbars
• Display a string, image or predefined system item• Target + action (like a regular button)
24Thursday, January 28, 2010
![Page 50: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/50.jpg)
Text Bar Button Item
25Thursday, January 28, 2010
![Page 51: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/51.jpg)
Text Bar Button Item
25Thursday, January 28, 2010
![Page 52: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/52.jpg)
Text Bar Button Item
- (void)viewDidLoad{
UIBarButtonItem *fooButton = [[UIBarButtonItem alloc]initWithTitle:@"Foo”style:UIBarButtonItemStyleBorderedtarget:selfaction:@selector(foo:)];
self.navigationItem.leftBarButtonItem = fooButton;
[fooButton release];}
25Thursday, January 28, 2010
![Page 53: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/53.jpg)
System Bar Button Item
26Thursday, January 28, 2010
![Page 54: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/54.jpg)
System Bar Button Item
26Thursday, January 28, 2010
![Page 55: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/55.jpg)
System Bar Button Item
- (void)viewDidLoad{
UIBarButtonItem *addButton = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAddstyle:UIBarButtonItemStyleBorderedtarget:selfaction:@selector(add:)];
self.navigationItem.rightBarButtonItem = addButton;
[addButton release];}
26Thursday, January 28, 2010
![Page 56: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/56.jpg)
• Very common pattern• Every view controller has one available
■ Target/action already set up
Edit/Done Button
27Thursday, January 28, 2010
![Page 57: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/57.jpg)
• Very common pattern• Every view controller has one available
■ Target/action already set up
Edit/Done Button
27Thursday, January 28, 2010
![Page 58: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/58.jpg)
• Very common pattern• Every view controller has one available
■ Target/action already set up
Edit/Done Button
self.navigationItem.leftBarButtonItem = self.editButtonItem;
27Thursday, January 28, 2010
![Page 59: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/59.jpg)
• Very common pattern• Every view controller has one available
■ Target/action already set up
Edit/Done Button
self.navigationItem.leftBarButtonItem = self.editButtonItem;
// Called when the user toggles the edit/done button- (void)setEditing:(BOOL)editing animated:(BOOL)animated{
// Update appearance of views}
27Thursday, January 28, 2010
![Page 60: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/60.jpg)
Custom Title View• Arbitrary view in place of the title
28Thursday, January 28, 2010
![Page 61: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/61.jpg)
Custom Title View• Arbitrary view in place of the title
28Thursday, January 28, 2010
![Page 62: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/62.jpg)
Custom Title View• Arbitrary view in place of the title
UISegmentedControl *segmentedControl = ...self.navigationItem.titleView = segmentedControl;[segmentedControl release];
28Thursday, January 28, 2010
![Page 63: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/63.jpg)
• Sometimes a shorter back button is needed
Back Button
29Thursday, January 28, 2010
![Page 64: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/64.jpg)
• Sometimes a shorter back button is needed
Back Button
29Thursday, January 28, 2010
![Page 65: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/65.jpg)
• Sometimes a shorter back button is needed
Back Button
self.title = @“Hello there, CS193P!”;
29Thursday, January 28, 2010
![Page 66: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/66.jpg)
• Sometimes a shorter back button is needed
Back Button
self.title = @“Hello there, CS193P!”;
UIBarButtonItem *heyButton = [[UIBarButtonItem alloc] initWithTitle:@“Hey!” ...];self.navigationItem.backButtonItem = heyButton;
[heyButton release];
29Thursday, January 28, 2010
![Page 67: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/67.jpg)
• Sometimes a shorter back button is needed
Back Button
self.title = @“Hello there, CS193P!”;
UIBarButtonItem *heyButton = [[UIBarButtonItem alloc] initWithTitle:@“Hey!” ...];self.navigationItem.backButtonItem = heyButton;
[heyButton release];
29Thursday, January 28, 2010
![Page 68: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/68.jpg)
Demo:Customizing Buttons
30Thursday, January 28, 2010
![Page 69: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/69.jpg)
Tab Bar Controllers
31Thursday, January 28, 2010
![Page 70: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/70.jpg)
UITabBarController• Array of view controllers• Tab bar
Tab BarController
32Thursday, January 28, 2010
![Page 71: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/71.jpg)
UITabBarController• Array of view controllers• Tab bar
View Controller
View Controller
View Controller
Tab BarController
32Thursday, January 28, 2010
![Page 72: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/72.jpg)
How It Fits Together
33Thursday, January 28, 2010
![Page 73: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/73.jpg)
How It Fits Together• Selected view controller’s view
33Thursday, January 28, 2010
![Page 74: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/74.jpg)
How It Fits Together• Selected view controller’s view• All view controllers’ titles
33Thursday, January 28, 2010
![Page 75: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/75.jpg)
Setting Up a Tab Bar Controller
34Thursday, January 28, 2010
![Page 76: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/76.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching// Create a tab bar controllertabBarController = [[UITabBarController alloc] init];
}
34Thursday, January 28, 2010
![Page 77: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/77.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching// Create a tab bar controllertabBarController = [[UITabBarController alloc] init];
}
// Set the array of view controllerstabBarController.viewControllers = myViewControllers;
34Thursday, January 28, 2010
![Page 78: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/78.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching// Create a tab bar controllertabBarController = [[UITabBarController alloc] init];
}
// Set the array of view controllerstabBarController.viewControllers = myViewControllers;
// Add the tab bar controller’s view to the window[window addSubview:tabBarController.view];
34Thursday, January 28, 2010
![Page 79: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/79.jpg)
Tab Bar Appearance• View controllers can define their appearance in the tab bar
35Thursday, January 28, 2010
![Page 80: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/80.jpg)
Tab Bar Appearance• View controllers can define their appearance in the tab bar
• UITabBarItem■ Title + image or system item
35Thursday, January 28, 2010
![Page 81: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/81.jpg)
Tab Bar Appearance• View controllers can define their appearance in the tab bar
• UITabBarItem■ Title + image or system item
• Each view controller comes with a tab bar item for customizing
35Thursday, January 28, 2010
![Page 82: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/82.jpg)
Creating Tab Bar Items• Title and image
36Thursday, January 28, 2010
![Page 83: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/83.jpg)
Creating Tab Bar Items• Title and image
36Thursday, January 28, 2010
![Page 84: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/84.jpg)
Creating Tab Bar Items• Title and image
- (void)viewDidLoad{
UITabBarItem *item = [[UITabBarItem alloc] initWithTitle:@“Playlists” image:[UIImage imageNamed:@“music.png”] tag:0];self.tabBarItem = item;[item release];
}
36Thursday, January 28, 2010
![Page 85: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/85.jpg)
Creating Tab Bar Items• System item
37Thursday, January 28, 2010
![Page 86: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/86.jpg)
Creating Tab Bar Items• System item
37Thursday, January 28, 2010
![Page 87: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/87.jpg)
Creating Tab Bar Items• System item
- (void)viewDidLoad{
UITabBarItem *item = [[UITabBarItem alloc] initWithTabBarSystemItem: UITabBarSystemItemBookmarks tag:0]self.tabBarItem = item;[item release];
}
37Thursday, January 28, 2010
![Page 88: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/88.jpg)
Demo:Using a Tab Bar Controller
38Thursday, January 28, 2010
![Page 89: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/89.jpg)
More View Controllers• What happens when a tab bar controller has too many
view controllers to display at once?
39Thursday, January 28, 2010
![Page 90: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/90.jpg)
More View Controllers• What happens when a tab bar controller has too many
view controllers to display at once?■ “More” tab bar item
displayed automatically
39Thursday, January 28, 2010
![Page 91: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/91.jpg)
More View Controllers• What happens when a tab bar controller has too many
view controllers to display at once?■ “More” tab bar item
displayed automatically■ User can navigate to
remaining view controllers
39Thursday, January 28, 2010
![Page 92: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/92.jpg)
More View Controllers• What happens when a tab bar controller has too many
view controllers to display at once?■ “More” tab bar item
displayed automatically■ User can navigate to
remaining view controllers■ Customize order
39Thursday, January 28, 2010
![Page 93: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/93.jpg)
Combining Approaches
40Thursday, January 28, 2010
![Page 94: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/94.jpg)
Tab Bar + Navigation ControllersMultiple parallel hierarchies
41Thursday, January 28, 2010
![Page 95: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/95.jpg)
Tab Bar + Navigation Controllers
Tab Bar Controller
42Thursday, January 28, 2010
![Page 96: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/96.jpg)
Tab Bar + Navigation Controllers
Navigation Controller
View Controller
Navigation Controller
View Controller
View ControllerTab Bar Controller
42Thursday, January 28, 2010
![Page 97: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/97.jpg)
Nesting Navigation Controllers
43Thursday, January 28, 2010
![Page 98: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/98.jpg)
Nesting Navigation Controllers• Create a tab bar controllertabBarController = [[UITabBarController alloc] init];
43Thursday, January 28, 2010
![Page 99: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/99.jpg)
Nesting Navigation Controllers• Create a tab bar controller
• Create each navigation controllernavController = [[UINavigationController alloc] init];[navController pushViewController:firstViewController animated:NO];
tabBarController = [[UITabBarController alloc] init];
43Thursday, January 28, 2010
![Page 100: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/100.jpg)
Nesting Navigation Controllers• Create a tab bar controller
• Create each navigation controller
• Add them to the tab bar controller
navController = [[UINavigationController alloc] init];[navController pushViewController:firstViewController animated:NO];
tabBarController = [[UITabBarController alloc] init];
tabBarController.viewControllers = [NSArray arrayWithObjects: navController, anotherNavController, someViewController, nil];
43Thursday, January 28, 2010
![Page 101: 07 Navigation Tab Bar Controllers](https://reader033.vdocument.in/reader033/viewer/2022052822/554f5b0eb4c905b9508b53b7/html5/thumbnails/101.jpg)
Questions?
44Thursday, January 28, 2010