Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
iOS Application Development
Working with Navigation and Tab Bar
These are confidential sessions - please refrain from streaming, blogging, or taking pi...
• iOS 7 app anatomy
• Navigation controllers introduction
• Understanding application data flow
• Working with navigation b...
• UI elements provided by UIKit fall into four broad categories:
• Bars
• Content views
• Controls
• Temporary views
iOS A...
iOS App Anatomy
Navigation Controllers
• A navigation controller manages a stack of view controllers to
provide a drill-down interface for hierarchical content.
...
Navigation Controller Introduction
Navigation sample
Navigation Controller Introduction
Navigation views
Navigation Controller Introduction
Navigation views
Objects of Navigation Interface
UINavigationController
toolbar
delegate
Custom delegate object
UIToolbar
viewControllers
(...
• Presence
• A controller for each screen
• Connecting view controllers
• How not to share data
• Best practices for data ...
Understanding Application Data Flow
Presence
A Controller for Each Screen
List View
Controller
Detail View
Controller
• Multiple view controllers may need to share data
• One may need to know about what another is doing
• Watch for added, r...
• Global variables or singletons
• This includes your application delegate
• Direct dependencies make your code less reusa...
Connecting View Controllers
List View
Controller
Detail View
Controller
Application Delegate
Connecting View Controllers
List View
Controller
Detail View
Controller
Application Delegate
Don’t Do This!
• Figure out exactly what needs to be communicated
• Define input parameters for your view controller
• For communicating b...
Demo
Book Manager Demo
• Navigation bar introduction
• Anatomy of navigation bar
• Customizing navigation bar appearance
• Creating navigation ba...
• Navigation bars allow you to present your app’s content in an
organised and intuitive way.
• A navigation bar is display...
• Navigate to the previous view
• Transition to a new view
Purpose
• Navigation bars are implemented in the UINavigationBar class
• Navigation items are implemented in the UINavigationItem ...
• A navigation bar is a view that manages the controls in a navigation
interface, and it takes on a special role when mana...
Anatomy of Navigation Bar
View controller View controller
UINavigationItem UINavigationItem
UIBarButtonItem
Previous view ...
• You can customize the appearance of a navigation bar by setting
the properties depicted below:
Customizing Navigation Ba...
• To customize the appearance of the navigation bar for a specific
view controller, modify the attributes of UINavigationIt...
Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attr...
Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attr...
Customizing Bar Buttons
• To customize the appearance of the navigation bar for a specific
view controller, modify the attr...
• Creating a navigation bar using storyboard
• Creating a navigation bar programmatically
• Creating a navigation bar butt...
• Drag a navigation controller from the library.
• Interface Builder creates a navigation controller and a view controller...
• Create the root view controller for the navigation object.
Creating a Navigation Bar Programmatically
1
UIViewController...
• Create root view controller for navigation object.
• Initializing initWithRootViewController: method (navigation
control...
• Create root view controller for navigation object.
• Initializing initWithRootViewController: method (navigation
control...
Creating a Navigation Bar Programmatically
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Create ...
• Adding the right bar button
Creating a Navigation Bar Button
Programmatically
UIBarButtonItem *addButton = [[[UIBarButto...
Demo
Navigation Bar Demo
• Toolbar introduction
• Anatomy of toolbar
• Customizing toolbar appearance
• Creating toolbar
Toolbar
• A toolbar usually appears at the bottom of a screen, and displays
one or more buttons called toolbar items.
• Generally,...
• Select one of a set of performable actions within a given view
Purpose
• Toolbars are implemented in the UIToolbar class
• Navigation items are implemented in the UINavigationItem class
• Bar i...
• A navigation interface can display a toolbar and populate it with
items provided by the currently visible view controlle...
Anatomy of Toolbar
View controller
NSArray
Toolbar
Item
Toolbar
Item
Toolbar
Item
Toolbar
Item
Toolbar
Item
toolBarItems
• You can customize appearance of a toolbar by setting the
properties depicted below:
Customizing Navigation Bar Appearanc...
• Creating a toolbar using storyboard
• Configuring a toolbar with a centered segmented control
Creating Toolbar
• Drag a toolbar from the library.
• Add two flexible space bar button items to the toolbar, by dragging
them from the libr...
• Create flexible space button item for the toolbar
Creating a Toolbar Programmatically
1
UIBarButtonItem *flexibleSpaceBut...
• Create flexible space button item for the toolbar
• Create and configure the segmented control
Creating a Toolbar Programm...
• Create flexible space button item for the toolbar
• Create and configure the segmented control
• Create the bar button ite...
• Create flexible space button item for the toolbar
• Create and configure the segmented control
• Create the bar button ite...
Creating a Toolbar Programmatically
- (void)configureToolbarItems
{
// Create flexible space button item for the toolbar.
...
Demo
Toolbar Demo
Tab Bar Controllers
• A tab bar provides easy access to different views in an app. Use a
tab bar to organize information in your app by subtas...
• Quickly navigate within an app
• Get an understanding of the app’s layout
Purpose
• Tab bars are implemented in the UITabBar class
• Tab bar items are implemented in the UITabBarItem class
Implementation
• The manager for a tab bar interface is a tab bar controller object.
• The tab bar controller creates and manages tab bar...
Anatomy of Tab Bar Interface
“Favorites”

bar
item
“Favorites”

view controller
Tab
bar
Tab
bar
tabBarItem
“Search”

view ...
• You can customize appearance of a tab bar by setting the properties
depicted below:
Customizing Tab Bars Appearance
• UI...
• Creating a tab bar interface using storyboard
• Creating a tab bar interface programmatically
• Creating a tab bar item ...
• Drag a tab bar controller from the library.
• Interface Builder creates a tab bar controller and two view
controllers, a...
• Create a new UITabBarController object
Creating a Tab Bar Interface Programmatically
tabBarController = [[UITabBarContro...
• Create a new UITabBarController object
• Create a content view controller for each tab
Creating a Tab Bar Interface Prog...
• Create a new UITabBarController object
• Create a content view controller for each tab
• Add the view controllers to an ...
• Create a new UITabBarController object
• Create a content view controller for each tab
• Add the view controllers to an ...
Creating a Tab Bar Interface Programmatically
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Crea...
• Custom item with title and image:
Creating a Tab Bar Item Programmatically
self.tabBarItem = [[UITabBarItem alloc] initW...
• Custom item with title and image:
• System item:
Creating a Tab Bar Item Programmatically
self.tabBarItem = [[UITabBarIt...
• When there are more than four tab bar items, you must you More
view controller.
• If you use the storyboard to create ta...
Creating a Tab Bar Interface Programmatically
Creating a Tab Bar Interface Programmatically
Creating a Tab Bar Interface Programmatically
• A badge is a small red marker displayed in the corner of the tab.
Inside the badge is some custom text that you provide....
Demo
Simple Tab Bar Demo
Demo
More Tab Bar Demo
UIKit User Interface Catalog
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalo...
many thanks
to
lamvt@fpt.com.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http://www.sta...
Next: Working with Table View and Search Bar
Upcoming SlideShare
Loading in …5
×

Session 13 - Working with navigation and tab bar

10,603 views

Published on

Published in: Technology

Session 13 - Working with navigation and tab bar

  1. 1. iOS Application Development
  2. 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. 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. 4. • UI elements provided by UIKit fall into four broad categories: • Bars • Content views • Controls • Temporary views iOS App Anatomy
  5. 5. iOS App Anatomy
  6. 6. Navigation Controllers
  7. 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
  8. 8. Navigation Controller Introduction Navigation sample
  9. 9. Navigation Controller Introduction Navigation views
  10. 10. Navigation Controller Introduction Navigation views
  11. 11. Objects of Navigation Interface UINavigationController toolbar delegate Custom delegate object UIToolbar viewControllers (NSArray) View controllerView controllerView controllerView controller navigationBar UINavigationBar delegate Navigation stack
  12. 12. • Presence • A controller for each screen • Connecting view controllers • How not to share data • Best practices for data flow Understanding Application Data Flow
  13. 13. Understanding Application Data Flow
  14. 14. Presence
  15. 15. A Controller for Each Screen List View Controller Detail View Controller
  16. 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. 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
  18. 18. Connecting View Controllers List View Controller Detail View Controller Application Delegate
  19. 19. Connecting View Controllers List View Controller Detail View Controller Application Delegate Don’t Do This!
  20. 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
  21. 21. Demo Book Manager Demo
  22. 22. • Navigation bar introduction • Anatomy of navigation bar • Customizing navigation bar appearance • Creating navigation bar Navigation Bar
  23. 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. 24. • Navigate to the previous view • Transition to a new view Purpose
  25. 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. 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. 27. Anatomy of Navigation Bar View controller View controller UINavigationItem UINavigationItem UIBarButtonItem Previous view controller Current view controller navigationItem navigationItem backBarButtonItem rightBarButtonItem title
  28. 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. 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. 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. 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. 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. 33. • Creating a navigation bar using storyboard • Creating a navigation bar programmatically • Creating a navigation bar button programmatically Creating Navigation Bar
  34. 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. 35. • Create the root view controller for the navigation object. Creating a Navigation Bar Programmatically 1 UIViewController *myViewController = [[MyViewController alloc] init]
  36. 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. 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. 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. 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;
  40. 40. Demo Navigation Bar Demo
  41. 41. • Toolbar introduction • Anatomy of toolbar • Customizing toolbar appearance • Creating toolbar Toolbar
  42. 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. 43. • Select one of a set of performable actions within a given view Purpose
  44. 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. 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
  46. 46. Anatomy of Toolbar View controller NSArray Toolbar Item Toolbar Item Toolbar Item Toolbar Item Toolbar Item toolBarItems
  47. 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. 48. • Creating a toolbar using storyboard • Configuring a toolbar with a centered segmented control Creating Toolbar
  49. 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. 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. 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. 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. 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. 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]; }
  55. 55. Demo Toolbar Demo
  56. 56. Tab Bar Controllers
  57. 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. 58. • Quickly navigate within an app • Get an understanding of the app’s layout Purpose
  59. 59. • Tab bars are implemented in the UITabBar class • Tab bar items are implemented in the UITabBarItem class Implementation
  60. 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. 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. 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. 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. 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. 65. • Create a new UITabBarController object Creating a Tab Bar Interface Programmatically tabBarController = [[UITabBarController alloc] init]; 1
  66. 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. 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. 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. 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. 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. 71. • Custom item with title and image: • System item: Creating a Tab Bar Item Programmatically self.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem: UITabBarSystemItemContacts tag:0];
  72. 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
  73. 73. Creating a Tab Bar Interface Programmatically
  74. 74. Creating a Tab Bar Interface Programmatically
  75. 75. Creating a Tab Bar Interface Programmatically
  76. 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;
  77. 77. Demo Simple Tab Bar Demo
  78. 78. Demo More Tab Bar Demo
  79. 79. UIKit User Interface Catalog https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/index.html UIKit Transition Guide https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html Asset Catalog Help https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/Recipe.html View Controller Catalog for iOS https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/ViewControllerCatalog/ Introduction.html Documentation
  80. 80. many thanks to lamvt@fpt.com.vn please say Stanford University https://developer.apple.com Developer Center http://www.stanford.edu/class/cs193p xin chào
  81. 81. Next: Working with Table View and Search Bar

×