2. Working with Navigation and Tab Bar
These are confidential sessions - please refrain from streaming, blogging, or taking pictures
Session 13
Vu Tran Lam
IAD-2013
3. • iOS 7 app anatomy
• Navigation controllers introduction
• Understanding application data flow
• Working with navigation bar
• Working with toolbar
• Tab bar controllers introduction
• Customizing tab bar appearance
• Working with tab bar
• Combining navigation and tab bar controller
Today’s Topics
4. • UI elements provided by UIKit fall into four broad categories:
• Bars
• Content views
• Controls
• Temporary views
iOS App Anatomy
7. • A navigation controller manages a stack of view controllers to
provide a drill-down interface for hierarchical content.
• The view hierarchy of a navigation controller is self contained. It is
composed of views that the navigation controller manages directly
and views that are managed by content view controllers you
provide.
• Each content view controller manages a distinct view hierarchy, and
the navigation controller coordinates the navigation between these
view hierarchies
Navigation Controller Introduction
12. • Presence
• A controller for each screen
• Connecting view controllers
• How not to share data
• Best practices for data flow
Understanding Application Data Flow
15. A Controller for Each Screen
List View
Controller
Detail View
Controller
16. • 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
Connecting View Controllers
17. • Global variables or singletons
• This includes your application delegate
• Direct dependencies make your code less reusable
• And more difficult to debug & test
How Not to Share Data
20. • 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)
Best Practices for Data Flow
22. • Navigation bar introduction
• Anatomy of navigation bar
• Customizing navigation bar appearance
• Creating navigation bar
Navigation Bar
23. • Navigation bars allow you to present your app’s content in an
organised and intuitive way.
• A navigation bar is displayed at the top of the screen, and contains
buttons for navigating through a hierarchy of screens.
• A navigation bar generally has a back button, a title, and a right
button.
• The most common way to use a navigation bar is with a navigation
controller.
Navigation Bar Introduction
24. • Navigate to the previous view
• Transition to a new view
Purpose
25. • Navigation bars are implemented in the UINavigationBar class
• Navigation items are implemented in the UINavigationItem class
• Bar button items are implemented in the UIBarButtonItem class
• Bar items are implemented in the UIBarItem class
Implementation
26. • A navigation bar is a view that manages the controls in a navigation
interface, and it takes on a special role when managed by a
navigation controller object.
• The structure of a navigation bar is similar to the structure of a
navigation controller in many ways.
• Like a navigation controller, a navigation bar is a container for
content that is provided by other objects.
Anatomy of Navigation Bar
27. Anatomy of Navigation Bar
View controller View controller
UINavigationItem UINavigationItem
UIBarButtonItem
Previous view controller Current view controller
navigationItem navigationItem
backBarButtonItem
rightBarButtonItem
title
28. • You can customize the appearance of a navigation bar by setting
the properties depicted below:
Customizing Navigation Bar Appearance
• When a navigation bar is used with a navigation controller, you
always use the setNavigationBarHidden:animated: method of
UINavigationController to show and hide the navigation bar.
• You must never hide navigation bar by modifying UINavigationBar
object’s hidden property directly.
29. • To customize the appearance of the navigation bar for a specific
view controller, modify the attributes of UINavigationItem object.
• You can get the navigation item for a view controller from its
navigationItem property.
Customizing Bar Buttons
30. Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attributes of UINavigationItem object.
• You can get the navigation item for a view controller from its
navigationItem property.
31. Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attributes of UINavigationItem object.
• You can get the navigation item for a view controller from its
navigationItem property.
32. Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attributes of UINavigationItem object.
• You can get the navigation item for a view controller from its
navigationItem property.
33. • Creating a navigation bar using storyboard
• Creating a navigation bar programmatically
• Creating a navigation bar button programmatically
Creating Navigation Bar
34. • Drag a navigation controller from the library.
• Interface Builder creates a navigation controller and a view controller,
and it creates a relationship between them.
• Display it as the first view controller by selecting the option “Is Initial
View Controller” in the Attributes inspector.
Creating a Navigation Bar Using Storyboard
1
2
3
35. • Create the root view controller for the navigation object.
Creating a Navigation Bar Programmatically
1
UIViewController *myViewController = [[MyViewController alloc] init]
36. • Create root view controller for navigation object.
• Initializing initWithRootViewController: method (navigation
controller).
Creating a Navigation Bar Programmatically
1
2
UINavigationController *navigationController = [[UINavigationController alloc]
initWithRootViewController:myViewController];
37. • Create root view controller for navigation object.
• Initializing initWithRootViewController: method (navigation
controller).
• Set navigation controller as root view controller of your window.
Creating a Navigation Bar Programmatically
1
2
3
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window.rootViewController = navigationController;
[window makeKeyAndVisible];
38. Creating a Navigation Bar Programmatically
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Create the root view controller for the navigation object
UIViewController *myViewController = [[MyViewController alloc] init];
// Initializing navigation controller using initWithRootViewController: method
navigationController = [[UINavigationController alloc]
initWithRootViewController:myViewController];
!
// Set navigation controller as root view controller of your window
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window.rootViewController = navigationController;
[window makeKeyAndVisible];
}
39. • Adding the right bar button
Creating a Navigation Bar Button
Programmatically
UIBarButtonItem *addButton = [[[UIBarButtonItem alloc] initWithTitle:@"Done"
style:UIBarButtonItemStyleBordered target:self action:@selector(addAction:)]
autorelease];
self.navigationItem.rightBarButtonItem = addButton;
42. • A toolbar usually appears at the bottom of a screen, and displays
one or more buttons called toolbar items.
• Generally, these buttons provide some sort of tool that is relevant to
the screen’s current content.
• A toolbar is often used in conjunction with a navigation controller,
which manages both the navigation bar and the toolbar.
Toolbar Introduction
43. • Select one of a set of performable actions within a given view
Purpose
44. • Toolbars are implemented in the UIToolbar class
• Navigation items are implemented in the UINavigationItem class
• Bar items are implemented in the UIBarItem class
Implementation
45. • A navigation interface can display a toolbar and populate it with
items provided by the currently visible view controller.
• The toolbar itself is managed by the navigation controller object.
• To configure a toolbar for your navigation interface, you must do the
following:
• Show the toolbar by setting the toolbarHidden property of the
navigation controller object to NO.
• Assign an array of UIBarButtonItem objects to the toolbarItem
property of each of your content view controllers.
Anatomy of Toolbar
47. • You can customize appearance of a toolbar by setting the
properties depicted below:
Customizing Navigation Bar Appearance
• To hide the toolbar, set hidesBottomBarWhenPushed property of
that view controller to YES.
48. • Creating a toolbar using storyboard
• Configuring a toolbar with a centered segmented control
Creating Toolbar
49. • Drag a toolbar from the library.
• Add two flexible space bar button items to the toolbar, by dragging
them from the library.
• Add a segmented control from the library, between the flexible
space bar buttons, by dragging it from the library.
Creating a Toolbar Using Storyboard
1
2
3
50. • Create flexible space button item for the toolbar
Creating a Toolbar Programmatically
1
UIBarButtonItem *flexibleSpaceButtonItem = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil
action:nil];
51. • Create flexible space button item for the toolbar
• Create and configure the segmented control
Creating a Toolbar Programmatically
1
2
UISegmentedControl *sortToggle = [[UISegmentedControl alloc] initWithItems:
[NSArray arrayWithObjects:@"Ascending", @"Descending", nil]];
sortToggle.segmentedControlStyle = UISegmentedControlStyleBar;
sortToggle.selectedSegmentIndex = 0;
[sortToggle addTarget:self action:@selector(toggleSorting:)
forControlEvents:UIControlEventValueChanged];
!
52. • Create flexible space button item for the toolbar
• Create and configure the segmented control
• Create the bar button item for the segmented control
Creating a Toolbar Programmatically
1
2
3
UIBarButtonItem *sortToggleButtonItem = [[UIBarButtonItem alloc]
initWithCustomView:sortToggle]
53. • Create flexible space button item for the toolbar
• Create and configure the segmented control
• Create the bar button item for the segmented control
• Set our toolbar items
Creating a Toolbar Programmatically
1
2
3
self.toolbarItems = [NSArray arrayWithObjects:flexibleSpaceButtonItem,
sortToggleButtonItem,flexibleSpaceButtonItem, nil];
4
54. Creating a Toolbar Programmatically
- (void)configureToolbarItems
{
// Create flexible space button item for the toolbar.
UIBarButtonItem *flexibleSpaceButtonItem = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil
action:nil];
// Create and configure the segmented control
UISegmentedControl *sortToggle = [[UISegmentedControl alloc]
initWithItems:[NSArray arrayWithObjects:@"Ascending", @"Descending", nil]];
sortToggle.segmentedControlStyle = UISegmentedControlStyleBar;
sortToggle.selectedSegmentIndex = 0;
[sortToggle addTarget:self action:@selector(toggleSorting:)
forControlEvents:UIControlEventValueChanged];
// Create the bar button item for the segmented control
UIBarButtonItem *sortToggleButtonItem = [[UIBarButtonItem alloc]
initWithCustomView:sortToggle];
// Set our toolbar items
self.toolbarItems = [NSArray arrayWithObjects:flexibleSpaceButtonItem,
sortToggleButtonItem,flexibleSpaceButtonItem, nil];
}
57. • A tab bar provides easy access to different views in an app. Use a
tab bar to organize information in your app by subtask.
• The most common way to use a tab bar is with a tab bar controller.
You can also use a tab bar as a standalone object in your app.
• The view hierarchy of a tab bar controller is self contained. It is
composed of views that the tab bar controller manages directly and
views that are managed by content view controllers you provide.
Tab Bar Controller Introduction
58. • Quickly navigate within an app
• Get an understanding of the app’s layout
Purpose
59. • Tab bars are implemented in the UITabBar class
• Tab bar items are implemented in the UITabBarItem class
Implementation
60. • The manager for a tab bar interface is a tab bar controller object.
• The tab bar controller creates and manages tab bar view and also
manages view controllers that provide content view for each mode.
• Each content view controller is designated as the view controller for
one of the tabs in the tab bar view.
• When a tab is tapped by the user, the tab bar controller object
selects the tab and displays the view associated with
corresponding content view controller.
Anatomy of Tab Bar
61. Anatomy of Tab Bar Interface
“Favorites”
bar
item
“Favorites”
view controller
Tab
bar
Tab
bar
tabBarItem
“Search”
view controller
“Featured”
view controller
Tab bar controller
NSArray
viewControllers
Tab
bar
tabBarItem
62. • You can customize appearance of a tab bar by setting the properties
depicted below:
Customizing Tab Bars Appearance
• UITabBarItem = Title + Image (System Item)
• Each view controller comes with a tab bar item for customizing
63. • Creating a tab bar interface using storyboard
• Creating a tab bar interface programmatically
• Creating a tab bar item programmatically
• Displaying more tab bar items
• Changing the tab’s badge
Working with Tab Bar
64. • Drag a tab bar controller from the library.
• Interface Builder creates a tab bar controller and two view
controllers, and it creates relationships between them.
• These relationships identify each of the newly created view
controllers as the view controller for one tab of the tab bar controller.
• Display it as the first view controller by selecting the option “Is Initial
View Controller” in the Attributes inspector
Creating a Tab Bar Interface Using Storyboard
1
2
3
4
65. • Create a new UITabBarController object
Creating a Tab Bar Interface Programmatically
tabBarController = [[UITabBarController alloc] init];
1
66. • Create a new UITabBarController object
• Create a content view controller for each tab
Creating a Tab Bar Interface Programmatically
MyViewController *vc1 = [[MyViewController alloc] init];
MyOtherViewController *vc2 = [[MyOtherViewController alloc] init];
1
2
67. • Create a new UITabBarController object
• Create a content view controller for each tab
• Add the view controllers to an array and assign that array to your
tab bar controller’s viewControllers property
Creating a Tab Bar Interface Programmatically
NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, nil];
tabBarController.viewControllers = controllers;
1
2
3
68. • Create a new UITabBarController object
• Create a content view controller for each tab
• Add the view controllers to an array and assign that array to your
tab bar controller’s viewControllers property
• Set the tab bar controller as the root view controller of your window
Creating a Tab Bar Interface Programmatically
window.rootViewController = tabBarController;
1
2
3
4
69. Creating a Tab Bar Interface Programmatically
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Create a tab bar controller
tabBarController = [[UITabBarController alloc] init];
!
// Create content view controller for each tab
MyViewController *vc1 = [[MyViewController alloc] init];
MyOtherViewController *vc2 = [[MyOtherViewController alloc] init];
// Set the array of view controllers
NSArray* controllers = [NSArray arrayWithObjects:vc1, vc2, nil];
tabBarController.viewControllers = controllers;
// Add the tab bar controller’s view to the window
window.rootViewController = tabBarController;
}
70. • Custom item with title and image:
Creating a Tab Bar Item Programmatically
self.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"Footprints"
image:[UIImage imageNamed:@"footprints.png"] tag:0];
71. • Custom item with title and image:
• System item:
Creating a Tab Bar Item Programmatically
self.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:
UITabBarSystemItemContacts tag:0];
72. • When there are more than four tab bar items, you must you More
view controller.
• If you use the storyboard to create tab bar items, Xcode will
automatically add More view controller in the tab bar.
• Purpose of More view controller:
• Choose more tab bar item
• Rearrange the tab bar item
Displaying More Tab Bar Items
76. • A badge is a small red marker displayed in the corner of the tab.
Inside the badge is some custom text that you provide.
• Typically, badges contain numerical values reflecting the number of
new items available on the tab, but you can also specify very short
character strings too.
Changing Tab’s Badge
NSString *value = self.badgeField.text;
self.tabBarItem.badgeValue = value;
