![Page 1: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/1.jpg)
CS193P - Lecture 8
iPhone Application Development
Navigation & Tab Bar Controllers
![Page 2: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/2.jpg)
Announcements
• Grades for Assignment 2 will be posted in a day or two.
• Presence 1 is due next Wednesday 10/22 at 11:59pm
![Page 3: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/3.jpg)
Today’s Topics
• Navigation Controllers
• Application Data Flow
• Customizing Navigation
• Tab Bar Controllers
• Combining Approaches
![Page 4: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/4.jpg)
Navigation Controllers
![Page 5: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/5.jpg)
UINavigationController
• Stack of view controllers
• Navigation bar
View Controller
View Controller
View Controller
NavigationController
![Page 6: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/6.jpg)
How It Fits Together
• Top view controller’s view
![Page 7: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/7.jpg)
How It Fits Together
• Top view controller’s view
• Top view controller’s title
![Page 8: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/8.jpg)
How It Fits Together
• Top view controller’s view
• Top view controller’s title
• Previous view controller’s title
![Page 9: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/9.jpg)
Modifying the Navigation Stack
• Push to add a view controller
• Pop to remove a view controller
- (void)pushViewController:(UIViewController *)viewController
animated:(BOOL)animated;
- (void)popViewControllerAnimated:(BOOL)animated;
![Page 10: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/10.jpg)
Pushing Your First View Controller
- (void)applicationDidFinishLaunching
// Create a navigation controller
navController = [[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];
![Page 11: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/11.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 controller
UIViewController *viewController = ...;
[self.navigationController pushViewController:viewController
animated:YES];
}
![Page 12: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/12.jpg)
Application Data Flow
![Page 13: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/13.jpg)
Presence
![Page 14: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/14.jpg)
A Controller for Each Screen
List Controller
Detail Controller
![Page 15: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/15.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
![Page 16: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/16.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!
![Page 17: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/17.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
![Page 18: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/18.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
![Page 19: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/19.jpg)
Example:UIImagePickerController
![Page 20: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/20.jpg)
Customizing Navigation
![Page 21: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/21.jpg)
Customizing Navigation
• Buttons or custom controls
• Interact with the entire screen
![Page 22: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/22.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
![Page 23: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/23.jpg)
Navigation Item Ownership
View Controller
Right Bar Button Item
Navigation Item
Left Bar Button Item
Title View
![Page 24: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/24.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
![Page 25: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/25.jpg)
Left & Right Buttons
• UIBarButtonItem! Special object, defines appearance & behavior
• Display a string, image or predefined system item
• Target + action (like a regular button)
![Page 26: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/26.jpg)
Text Bar Button Item
- (void)viewDidLoad
{
UIBarButtonItem *fooButton = [[UIBarButtonItem alloc]
initWithTitle:@"Foo”
style:UIBarButtonItemStyleBordered
target:self
action:@selector(foo:)];
self.leftBarButtonItem = fooButton;
[fooButton release];
}
![Page 27: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/27.jpg)
System Bar Button Item
- (void)viewDidLoad
{
UIBarButtonItem *addButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
style:UIBarButtonItemStyleBordered
target:self
action:@selector(add:)];
self.rightBarButtonItem = addButton;
[addButton release];
}
![Page 28: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/28.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
}
![Page 29: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/29.jpg)
Custom Title View
• Arbitrary view in place of the title
UISegmentedControl *segmentedControl = ...
self.navigationItem.titleView = segmentedControl;
[segmentedControl release];
![Page 30: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/30.jpg)
• Sometimes a shorter back button is needed
Back Button
self.title = @“Hello there, CS193P!”;
![Page 31: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/31.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];
![Page 32: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/32.jpg)
Tab Bar Controllers
![Page 33: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/33.jpg)
UITabBarController
• Array of view controllers
• Tab bar
View Controller
View Controller
View Controller
Tab BarController
![Page 34: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/34.jpg)
How It Fits Together
• Selected view controller’s view
![Page 35: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/35.jpg)
How It Fits Together
• Selected view controller’s view
• All view controllers’ titles
![Page 36: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/36.jpg)
Setting Up a Tab Bar Controller
![Page 37: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/37.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching
// Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
}
![Page 38: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/38.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching
// Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
}
// Set the array of view controllers
tabBarController.viewControllers = myViewControllers;
![Page 39: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/39.jpg)
Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching
// Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
}
// Set the array of view controllers
tabBarController.viewControllers = myViewControllers;
// Add the tab bar controller’s view to the window
[window addSubview:tabBarController.view];
![Page 40: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/40.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
![Page 41: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/41.jpg)
Creating Tab Bar Items
• Title and image
- (void)viewDidLoad
{
self.tabBarItem = [[UITabBarItem alloc]
initWithTitle:@“Playlists”
image:[UIImage imageNamed:@“music.png”]
tag:0]
}
![Page 42: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/42.jpg)
Creating Tab Bar Items
• System item
- (void)viewDidLoad
{
self.tabBarItem = [[UITabBarItem alloc]
initWithTabBarSystemItem:
UITabBarSystemItemBookmarks
tag:0]
}
![Page 43: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/43.jpg)
Demo:Using a Tab Bar Controller
![Page 44: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/44.jpg)
More View Controllers
• What happens when a tab bar controller has too manyview controllers to display at once?! “More” tab bar item
displayed automatically
![Page 45: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/45.jpg)
More View Controllers
• What happens when a tab bar controller has too manyview controllers to display at once?! “More” tab bar item
displayed automatically
! User can navigate toremaining view controllers
![Page 46: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/46.jpg)
More View Controllers
• What happens when a tab bar controller has too manyview controllers to display at once?! “More” tab bar item
displayed automatically
! User can navigate toremaining view controllers
! Customize order
![Page 47: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/47.jpg)
Combining Approaches
![Page 48: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/48.jpg)
Tab Bar + Navigation ControllersMultiple parallel hierarchies
![Page 49: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/49.jpg)
Tab Bar + Navigation Controllers
Navigation Controller
View Controller
Navigation Controller
View Controller
View ControllerTab Bar Controller
![Page 50: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/50.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];
![Page 51: Standford CS 193P: 08-Navigation Tab Bar Controllers](https://reader035.vdocument.in/reader035/viewer/2022062417/55288c714a79595f508b475b/html5/thumbnails/51.jpg)
Questions?