• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
07 Navigation Tab Bar Controllers
 

07 Navigation Tab Bar Controllers

on

  • 3,081 views

 

Statistics

Views

Total Views
3,081
Views on SlideShare
3,080
Embed Views
1

Actions

Likes
1
Downloads
52
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    07 Navigation Tab Bar Controllers 07 Navigation Tab Bar Controllers Presentation Transcript

    • CS193P - Lecture 7 iPhone Application Development Navigation & Tab Bar Controllers Thursday, January 28, 2010 1
    • Announcements • Assignment 3 is due tomorrow • Paparazzi 1 is due on Wednesday February 3rd Thursday, January 28, 2010 2
    • Today’s Topics • Navigation Controllers ■ Application Data Flow • Customizing Navigation • Tab Bar Controllers • Combining Approaches Thursday, January 28, 2010 3
    • Navigation Controllers Thursday, January 28, 2010 4
    • UINavigationController • Stack of view controllers • Navigation bar Navigation Controller Thursday, January 28, 2010 5
    • UINavigationController • Stack of view controllers • Navigation bar View Controller Navigation View Controller Controller View Controller Thursday, January 28, 2010 5
    • How It Fits Together Thursday, January 28, 2010 6
    • How It Fits Together • Top view controller’s view Thursday, January 28, 2010 6
    • How It Fits Together • Top view controller’s view • Top view controller’s title Thursday, January 28, 2010 6
    • How It Fits Together • Top view controller’s view • Top view controller’s title • Previous view controller’s title Thursday, January 28, 2010 6
    • 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
    • Modifying the Navigation Stack Thursday, January 28, 2010 7
    • Modifying the Navigation Stack • Push to add a view controller - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated; Thursday, January 28, 2010 7
    • 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
    • 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
    • Pushing Your First View Controller Thursday, January 28, 2010 8
    • Pushing Your First View Controller - (void)applicationDidFinishLaunching // Create a navigation controller navController = [[UINavigationController alloc] init]; } Thursday, January 28, 2010 8
    • 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
    • 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
    • In Response to User Actions Thursday, January 28, 2010 9
    • 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
    • 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
    • Demo: Pushing & Popping Thursday, January 28, 2010 10
    • Application Data Flow Thursday, January 28, 2010 11
    • Paparazzi Thursday, January 28, 2010 12
    • A Controller for Each Screen List List Detail Controller Controller Controller Thursday, January 28, 2010 13
    • Connecting View Controllers Thursday, January 28, 2010 14
    • Connecting View Controllers • Multiple view controllers may need to share data Thursday, January 28, 2010 14
    • 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
    • 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
    • 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
    • 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
    • Best Practices for Data Flow • Figure out exactly what needs to be communicated List Detail Controller Controller Thursday, January 28, 2010 16
    • 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
    • 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
    • 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
    • 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
    • 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
    • Example: UIImagePickerController Thursday, January 28, 2010 17
    • Demo: Passing Data Along Thursday, January 28, 2010 18
    • Customizing Navigation Thursday, January 28, 2010 19
    • Customizing Navigation • Buttons or custom controls • Interact with the entire screen Thursday, January 28, 2010 20
    • Customizing Navigation • Buttons or custom controls • Interact with the entire screen Thursday, January 28, 2010 20
    • 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
    • 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
    • Navigation Item Ownership Left Bar Button Item View Controller Navigation Item Title View Right Bar Button Item Thursday, January 28, 2010 22
    • 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
    • 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
    • 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
    • Text Bar Button Item Thursday, January 28, 2010 25
    • Text Bar Button Item Thursday, January 28, 2010 25
    • 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
    • System Bar Button Item Thursday, January 28, 2010 26
    • System Bar Button Item Thursday, January 28, 2010 26
    • 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
    • Edit/Done Button • Very common pattern • Every view controller has one available ■ Target/action already set up Thursday, January 28, 2010 27
    • Edit/Done Button • Very common pattern • Every view controller has one available ■ Target/action already set up Thursday, January 28, 2010 27
    • 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
    • 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
    • Custom Title View • Arbitrary view in place of the title Thursday, January 28, 2010 28
    • Custom Title View • Arbitrary view in place of the title Thursday, January 28, 2010 28
    • Custom Title View • Arbitrary view in place of the title UISegmentedControl *segmentedControl = ... self.navigationItem.titleView = segmentedControl; [segmentedControl release]; Thursday, January 28, 2010 28
    • Back Button • Sometimes a shorter back button is needed Thursday, January 28, 2010 29
    • Back Button • Sometimes a shorter back button is needed Thursday, January 28, 2010 29
    • Back Button • Sometimes a shorter back button is needed self.title = @“Hello there, CS193P!”; Thursday, January 28, 2010 29
    • 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
    • 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
    • Demo: Customizing Buttons Thursday, January 28, 2010 30
    • Tab Bar Controllers Thursday, January 28, 2010 31
    • UITabBarController • Array of view controllers • Tab bar Tab Bar Controller Thursday, January 28, 2010 32
    • UITabBarController • Array of view controllers • Tab bar View Controller Tab Bar Controller View Controller View Controller Thursday, January 28, 2010 32
    • How It Fits Together Thursday, January 28, 2010 33
    • How It Fits Together • Selected view controller’s view Thursday, January 28, 2010 33
    • How It Fits Together • Selected view controller’s view • All view controllers’ titles Thursday, January 28, 2010 33
    • Setting Up a Tab Bar Controller Thursday, January 28, 2010 34
    • Setting Up a Tab Bar Controller - (void)applicationDidFinishLaunching // Create a tab bar controller tabBarController = [[UITabBarController alloc] init]; } Thursday, January 28, 2010 34
    • 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
    • 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
    • Tab Bar Appearance • View controllers can define their appearance in the tab bar Thursday, January 28, 2010 35
    • Tab Bar Appearance • View controllers can define their appearance in the tab bar • UITabBarItem ■ Title + image or system item Thursday, January 28, 2010 35
    • 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
    • Creating Tab Bar Items • Title and image Thursday, January 28, 2010 36
    • Creating Tab Bar Items • Title and image Thursday, January 28, 2010 36
    • 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
    • Creating Tab Bar Items • System item Thursday, January 28, 2010 37
    • Creating Tab Bar Items • System item Thursday, January 28, 2010 37
    • 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
    • Demo: Using a Tab Bar Controller Thursday, January 28, 2010 38
    • More View Controllers • What happens when a tab bar controller has too many view controllers to display at once? Thursday, January 28, 2010 39
    • 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
    • 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
    • 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
    • Combining Approaches Thursday, January 28, 2010 40
    • Tab Bar + Navigation Controllers Multiple parallel hierarchies Thursday, January 28, 2010 41
    • Tab Bar + Navigation Controllers Tab Bar Controller Thursday, January 28, 2010 42
    • Tab Bar + Navigation Controllers Navigation Controller View Controller Navigation Tab Bar Controller Controller View Controller View Controller Thursday, January 28, 2010 42
    • Nesting Navigation Controllers Thursday, January 28, 2010 43
    • Nesting Navigation Controllers • Create a tab bar controller tabBarController = [[UITabBarController alloc] init]; Thursday, January 28, 2010 43
    • 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
    • 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
    • Questions? Thursday, January 28, 2010 44