1. CS193P - Lecture 7
iPhone Application Development
Navigation & Tab Bar Controllers
Thursday, January 28, 2010 1

2. Announcements
• Assignment 3 is due tomorrow
• Paparazzi 1 is due on Wednesday February 3rd
Thursday, January 28, 2010 2

3. Today’s Topics
• Navigation Controllers
■ Application Data Flow
• Customizing Navigation
• Tab Bar Controllers
• Combining Approaches
Thursday, January 28, 2010 3

4. Navigation Controllers
Thursday, January 28, 2010 4

5. UINavigationController
• Stack of view controllers
• Navigation bar
Navigation
Controller
Thursday, January 28, 2010 5

6. UINavigationController
• Stack of view controllers
• Navigation bar
View Controller
Navigation View Controller
Controller
View Controller
Thursday, January 28, 2010 5

7. How It Fits Together
Thursday, January 28, 2010 6

8. How It Fits Together
• Top view controller’s view
Thursday, January 28, 2010 6

9. How It Fits Together
• Top view controller’s view
• Top view controller’s title
Thursday, January 28, 2010 6

10. How It Fits Together
• Top view controller’s view
• Top view controller’s title
• Previous view controller’s title
Thursday, January 28, 2010 6

11. 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)
Thursday, January 28, 2010 6

12. Modifying the Navigation Stack
Thursday, January 28, 2010 7

13. Modifying the Navigation Stack
• Push to add a view controller
- (void)pushViewController:(UIViewController *)viewController
animated:(BOOL)animated;
Thursday, January 28, 2010 7

14. Modifying the Navigation Stack
• Push to add a view controller
- (void)pushViewController:(UIViewController *)viewController
animated:(BOOL)animated;
• Pop to remove a view controller
- (UIViewController *)popViewControllerAnimated:(BOOL)animated;
Thursday, January 28, 2010 7

15. Modifying the Navigation Stack
• Push to add a view controller
- (void)pushViewController:(UIViewController *)viewController
animated:(BOOL)animated;
• Pop to remove a view controller
- (UIViewController *)popViewControllerAnimated:(BOOL)animated;
• Set to change the entire stack of view controllers
(iPhone OS 3.0)
- (void)setViewControllers:(NSArray *)viewControllers
animated:(BOOL)animated;
Thursday, January 28, 2010 7

16. Pushing Your First View Controller
Thursday, January 28, 2010 8

17. Pushing Your First View Controller
- (void)applicationDidFinishLaunching
// Create a navigation controller
navController = [[UINavigationController alloc] init];
}
Thursday, January 28, 2010 8

18. 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];
}
Thursday, January 28, 2010 8

19. 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];
}
Thursday, January 28, 2010 8

20. In Response to User Actions
Thursday, January 28, 2010 9

21. In Response to User Actions
• Push from within a view controller on the stack
- (void)someAction:(id)sender
{
// Potentially create another view controller
UIViewController *viewController = ...;
[self.navigationController pushViewController:viewController
animated:YES];
}
Thursday, January 28, 2010 9

22. In Response to User Actions
• Push from within a view controller on the stack
- (void)someAction:(id)sender
{
// Potentially create another view controller
UIViewController *viewController = ...;
[self.navigationController pushViewController:viewController
animated:YES];
}
• Almost never call pop directly!
■ Automatically invoked by the back button
Thursday, January 28, 2010 9

23. Demo:
Pushing & Popping
Thursday, January 28, 2010 10

24. Application Data Flow
Thursday, January 28, 2010 11

25. Paparazzi
Thursday, January 28, 2010 12

26. A Controller for Each Screen
List List Detail
Controller Controller Controller
Thursday, January 28, 2010 13

27. Connecting View Controllers
Thursday, January 28, 2010 14

28. Connecting View Controllers
• Multiple view controllers may need to share data
Thursday, January 28, 2010 14

29. 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
Thursday, January 28, 2010 14

30. 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 Detail
Controller Controller
Thursday, January 28, 2010 15

31. 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 Detail
Controller Controller
Application
Delegate
Thursday, January 28, 2010 15

32. 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 Detail
Controller Controller
Don’t Do This!
Application
Delegate
Thursday, January 28, 2010 15

33. Best Practices for Data Flow
• Figure out exactly what needs to be communicated
List Detail
Controller Controller
Thursday, January 28, 2010 16

34. Best Practices for Data Flow
• Figure out exactly what needs to be communicated
• Define input parameters for your view controller
List Detail
Controller Controller
Thursday, January 28, 2010 16

35. Best Practices for Data Flow
• Figure out exactly what needs to be communicated
• Define input parameters for your view controller
Data
List Detail
Controller Controller
Thursday, January 28, 2010 16

36. 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 Detail
Controller Controller
Thursday, January 28, 2010 16

37. 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 Detail
Controller Controller
I care!
Thursday, January 28, 2010 16

38. 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 Detail
Controller Controller
Thursday, January 28, 2010 16

39. Example:
UIImagePickerController
Thursday, January 28, 2010 17

40. Demo:
Passing Data Along
Thursday, January 28, 2010 18

41. Customizing Navigation
Thursday, January 28, 2010 19

42. Customizing Navigation
• Buttons or custom controls
• Interact with the entire screen
Thursday, January 28, 2010 20

43. Customizing Navigation
• Buttons or custom controls
• Interact with the entire screen
Thursday, January 28, 2010 20

44. UINavigationItem
• Describes appearance of the navigation bar
■ Title string or custom title view
■ Left & right bar buttons
■ More properties defined in UINavigationBar.h
Thursday, January 28, 2010 21

45. 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
Thursday, January 28, 2010 21

46. Navigation Item Ownership
Left Bar
Button Item
View Controller Navigation Item Title View
Right Bar
Button Item
Thursday, January 28, 2010 22

47. 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
Thursday, January 28, 2010 23

48. 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”;
Thursday, January 28, 2010 23

49. 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)
Thursday, January 28, 2010 24

50. Text Bar Button Item
Thursday, January 28, 2010 25

51. Text Bar Button Item
Thursday, January 28, 2010 25

52. Text Bar Button Item
- (void)viewDidLoad
{
UIBarButtonItem *fooButton = [[UIBarButtonItem alloc]
initWithTitle:@"Foo”
style:UIBarButtonItemStyleBordered
target:self
action:@selector(foo:)];
self.navigationItem.leftBarButtonItem = fooButton;
[fooButton release];
}
Thursday, January 28, 2010 25

53. System Bar Button Item
Thursday, January 28, 2010 26

54. System Bar Button Item
Thursday, January 28, 2010 26

55. System Bar Button Item
- (void)viewDidLoad
{
UIBarButtonItem *addButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd
style:UIBarButtonItemStyleBordered
target:self
action:@selector(add:)];
self.navigationItem.rightBarButtonItem = addButton;
[addButton release];
}
Thursday, January 28, 2010 26

56. Edit/Done Button
• Very common pattern
• Every view controller has one available
■ Target/action already set up
Thursday, January 28, 2010 27

57. Edit/Done Button
• Very common pattern
• Every view controller has one available
■ Target/action already set up
Thursday, January 28, 2010 27

58. Edit/Done Button
• Very common pattern
• Every view controller has one available
■ Target/action already set up
self.navigationItem.leftBarButtonItem = self.editButtonItem;
Thursday, January 28, 2010 27

59. Edit/Done Button
• Very common pattern
• Every view controller has one available
■ Target/action already set up
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
}
Thursday, January 28, 2010 27

60. Custom Title View
• Arbitrary view in place of the title
Thursday, January 28, 2010 28

61. Custom Title View
• Arbitrary view in place of the title
Thursday, January 28, 2010 28

62. Custom Title View
• Arbitrary view in place of the title
UISegmentedControl *segmentedControl = ...
self.navigationItem.titleView = segmentedControl;
[segmentedControl release];
Thursday, January 28, 2010 28

63. Back Button
• Sometimes a shorter back button is needed
Thursday, January 28, 2010 29

64. Back Button
• Sometimes a shorter back button is needed
Thursday, January 28, 2010 29

65. Back Button
• Sometimes a shorter back button is needed
self.title = @“Hello there, CS193P!”;
Thursday, January 28, 2010 29

66. Back Button
• Sometimes a shorter back button is needed
self.title = @“Hello there, CS193P!”;
UIBarButtonItem *heyButton = [[UIBarButtonItem alloc]
initWithTitle:@“Hey!”
...];
self.navigationItem.backButtonItem = heyButton;
[heyButton release];
Thursday, January 28, 2010 29

67. Back Button
• Sometimes a shorter back button is needed
self.title = @“Hello there, CS193P!”;
UIBarButtonItem *heyButton = [[UIBarButtonItem alloc]
initWithTitle:@“Hey!”
...];
self.navigationItem.backButtonItem = heyButton;
[heyButton release];
Thursday, January 28, 2010 29

68. Demo:
Customizing Buttons
Thursday, January 28, 2010 30

69. Tab Bar Controllers
Thursday, January 28, 2010 31

70. UITabBarController
• Array of view controllers
• Tab bar
Tab Bar
Controller
Thursday, January 28, 2010 32

71. UITabBarController
• Array of view controllers
• Tab bar
View Controller
Tab Bar
Controller View Controller
View Controller
Thursday, January 28, 2010 32

72. How It Fits Together
Thursday, January 28, 2010 33

73. How It Fits Together
• Selected view controller’s view
Thursday, January 28, 2010 33

74. How It Fits Together
• Selected view controller’s view
• All view controllers’ titles
Thursday, January 28, 2010 33

75. Setting Up a Tab Bar Controller
Thursday, January 28, 2010 34

76. Setting Up a Tab Bar Controller
- (void)applicationDidFinishLaunching
// Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
}
Thursday, January 28, 2010 34

77. 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;
}
Thursday, January 28, 2010 34

78. 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];
}
Thursday, January 28, 2010 34

79. Tab Bar Appearance
• View controllers can define their appearance in the tab bar
Thursday, January 28, 2010 35

80. Tab Bar Appearance
• View controllers can define their appearance in the tab bar
• UITabBarItem
■ Title + image or system item
Thursday, January 28, 2010 35

81. 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
Thursday, January 28, 2010 35

82. Creating Tab Bar Items
• Title and image
Thursday, January 28, 2010 36

83. Creating Tab Bar Items
• Title and image
Thursday, January 28, 2010 36

84. 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];
}
Thursday, January 28, 2010 36

85. Creating Tab Bar Items
• System item
Thursday, January 28, 2010 37

86. Creating Tab Bar Items
• System item
Thursday, January 28, 2010 37

87. Creating Tab Bar Items
• System item
- (void)viewDidLoad
{
UITabBarItem *item = [[UITabBarItem alloc]
initWithTabBarSystemItem:
UITabBarSystemItemBookmarks
tag:0]
self.tabBarItem = item;
[item release];
}
Thursday, January 28, 2010 37

88. Demo:
Using a Tab Bar Controller
Thursday, January 28, 2010 38

89. More View Controllers
• What happens when a tab bar controller has too many
view controllers to display at once?
Thursday, January 28, 2010 39

90. 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
Thursday, January 28, 2010 39

91. 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
Thursday, January 28, 2010 39

92. 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
Thursday, January 28, 2010 39

93. Combining Approaches
Thursday, January 28, 2010 40

94. Tab Bar + Navigation Controllers
Multiple parallel hierarchies
Thursday, January 28, 2010 41

95. Tab Bar + Navigation Controllers
Tab Bar Controller
Thursday, January 28, 2010 42

96. Tab Bar + Navigation Controllers
Navigation
Controller View Controller
Navigation
Tab Bar Controller Controller View Controller
View Controller
Thursday, January 28, 2010 42

97. Nesting Navigation Controllers
Thursday, January 28, 2010 43

98. Nesting Navigation Controllers
• Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
Thursday, January 28, 2010 43

99. Nesting Navigation Controllers
• Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
• Create each navigation controller
navController = [[UINavigationController alloc] init];
[navController pushViewController:firstViewController
animated:NO];
Thursday, January 28, 2010 43

100. Nesting Navigation Controllers
• Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
• Create each navigation controller
navController = [[UINavigationController alloc] init];
[navController pushViewController:firstViewController
animated:NO];
• Add them to the tab bar controller
tabBarController.viewControllers = [NSArray arrayWithObjects:
navController,
anotherNavController,
someViewController,
nil];
Thursday, January 28, 2010 43

101. Questions?
Thursday, January 28, 2010 44