CS193P - Lecture 7. iphone Application Development. Navigation & Tab Bar Controllers

Transcription

1 CS193P - Lecture 7 iphone Application Development Navigation & Tab Bar Controllers 1

2 Announcements Assignment 3 is due tomorrow Paparazzi 1 is due on Wednesday February 3rd 2

3 Today s Topics Navigation Controllers Application Data Flow Customizing Navigation Tab Bar Controllers Combining Approaches 3

4 Navigation Controllers 4

5 UINavigationController Stack of view controllers Navigation bar Navigation Controller 5

6 UINavigationController Stack of view controllers Navigation bar Navigation Controller View Controller View Controller View Controller 5

7 How It Fits Together 6

8 How It Fits Together Top view controller s view 6

9 How It Fits Together Top view controller s view Top view controller s title 6

10 How It Fits Together Top view controller s view Top view controller s title Previous view controller s title 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) 6

12 Modifying the Navigation Stack 7

13 Modifying the Navigation Stack Push to add a view controller - (void)pushviewcontroller:(uiviewcontroller *)viewcontroller animated:(bool)animated; 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; 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; 7

16 Pushing Your First View Controller 8

17 Pushing Your First View Controller - (void)applicationdidfinishlaunching // Create a navigation controller navcontroller = [[UINavigationController alloc] init]; } 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]; } 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]; 8

20 In Response to User Actions 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]; 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 9

23 Demo: Pushing & Popping 10

24 Application Data Flow 11

25 Paparazzi 12

26 A Controller for Each Screen List Controller List Controller Detail Controller 13

27 Connecting View Controllers 14

28 Connecting View Controllers Multiple view controllers may need to share data 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 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 Controller Detail Controller 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 Controller Detail Controller Application Delegate 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 Controller Detail Controller Don t Do This! Application Delegate 15

33 Best Practices for Data Flow Figure out exactly what needs to be communicated List Controller Detail Controller 16

34 Best Practices for Data Flow Figure out exactly what needs to be communicated Define input parameters for your view controller List Controller Detail Controller 16

35 Best Practices for Data Flow Figure out exactly what needs to be communicated Define input parameters for your view controller Data List Controller Detail Controller 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 Controller Detail Controller 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 Controller Detail Controller I care! 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 Controller Detail Controller 16

39 Example: UIImagePickerController 17

40 Demo: Passing Data Along 18

41 Customizing Navigation 19

42 Customizing Navigation Buttons or custom controls Interact with the entire screen 20

43 Customizing Navigation Buttons or custom controls Interact with the entire screen 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 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 21

46 Navigation Item Ownership Left Bar Button Item View Controller Navigation Item Title View Right Bar Button Item 22

47 Displaying a Title UIViewController already has a title NSString *title; Navigation item inherits automatically Previous view controller s title is displayed in back button 23

48 Displaying a Title UIViewController already has a title NSString *title; Navigation item inherits automatically Previous view controller s title is displayed in back button viewcontroller.title Detail ; 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) 24

50 Text Bar Button Item 25

51 Text Bar Button Item 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]; 25

53 System Bar Button Item 26

54 System Bar Button Item 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]; 26

56 Edit/Done Button Very common pattern Every view controller has one available Target/action already set up 27

57 Edit/Done Button Very common pattern Every view controller has one available Target/action already set up 27

58 Edit/Done Button Very common pattern Every view controller has one available Target/action already set up self.navigationitem.leftbarbuttonitem = self.editbuttonitem; 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 } 27

60 Custom Title View Arbitrary view in place of the title 28

61 Custom Title View Arbitrary view in place of the title 28

62 Custom Title View Arbitrary view in place of the title UISegmentedControl *segmentedcontrol =... self.navigationitem.titleview = segmentedcontrol; [segmentedcontrol release]; 28

63 Back Button Sometimes a shorter back button is needed 29

64 Back Button Sometimes a shorter back button is needed 29

65 Back Button Sometimes a shorter back button is needed self.title Hello there, CS193P! ; 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]; 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]; 29

68 Demo: Customizing Buttons 30

69 Tab Bar Controllers 31

70 UITabBarController Array of view controllers Tab bar Tab Bar Controller 32

71 UITabBarController Array of view controllers Tab bar View Controller Tab Bar Controller View Controller View Controller 32

72 How It Fits Together 33

73 How It Fits Together Selected view controller s view 33

74 How It Fits Together Selected view controller s view All view controllers titles 33

75 Setting Up a Tab Bar Controller 34

76 Setting Up a Tab Bar Controller - (void)applicationdidfinishlaunching // Create a tab bar controller tabbarcontroller = [[UITabBarController alloc] init]; } 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; } 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]; 34

79 Tab Bar Appearance View controllers can define their appearance in the tab bar 35

80 Tab Bar Appearance View controllers can define their appearance in the tab bar UITabBarItem Title + image or system item 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 35

82 Creating Tab Bar Items Title and image 36

83 Creating Tab Bar Items Title and image 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]; } 36

85 Creating Tab Bar Items System item 37

86 Creating Tab Bar Items System item 37

87 Creating Tab Bar Items System item - (void)viewdidload { UITabBarItem *item = [[UITabBarItem alloc] initwithtabbarsystemitem: UITabBarSystemItemBookmarks tag:0] self.tabbaritem = item; [item release]; } 37

88 Demo: Using a Tab Bar Controller 38

89 More View Controllers What happens when a tab bar controller has too many view controllers to display at once? 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 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 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 39

93 Combining Approaches 40

94 Tab Bar + Navigation Controllers Multiple parallel hierarchies 41

95 Tab Bar + Navigation Controllers Tab Bar Controller 42

96 Tab Bar + Navigation Controllers Navigation Controller View Controller Tab Bar Controller Navigation Controller View Controller View Controller 42

97 Nesting Navigation Controllers 43

98 Nesting Navigation Controllers Create a tab bar controller tabbarcontroller = [[UITabBarController alloc] init]; 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]; 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]; 43

101 Questions? 44