1

Designing with a UIToolBar

iPhone/iPad, iOS Development Tutorial

2

UINavigation Controller

• The UINavigationController maintains a UIToolBar for each view controller in its stack.

• This toolbar is normally hidden, but we can place buttons on it and display it any time we want.

3

Open a new “Single View” app

• Start Xcode, choose “Create a new Xcode project,” select the Single View Application template, and click Next.

• Select “Use Auto Reference Counting”

• Don’t select the storyboard. Don’t really need it for this application.

• Select ‘iPhone’ as the app type

4

Add a new Class

• Select the Objective-C class template, click Next

• Name the class MainViewController.

• Make sure that the class is a subclass of UIViewController and also create a XIB file for the controller’s view as shown:

5

Create: MainViewController

6

Edit AppDelegate.h

• Now we’re going to set up a navigation controller having a MainViewController object as its root view controller.

• Select the AppDelegate.h file, and add the two properties for the UINavigationController and the MainViewController as shown on the next slide.

7

Add 2 properties + header

#import "MainViewController.h“

@property (strong, nonatomic) UINavigationController *navController;

@property (strong, nonatomic) MainViewController *rootViewController;

8

Edit: AppDelegate.m

First synthesize our properties:

@synthesize navController = _navController;

@synthesize rootViewController = _rootViewController;

9

Edit: AppDelegate.m

• Change the didFinishLaunchingWithOptions: method

• It’s the only method we will be making changes to.

• Leave the remaining methods in place.

10

didFinishLaunchingWithOptions

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // Override point for customization after application launch.    self.rootViewController = [[MainViewController alloc] initWithNibName:nil bundle:nil];    self.rootViewController.title = @"Main View";    self.navController = [[UINavigationController alloc] initWithRootViewController:self.rootViewController];    [self.window addSubview:self.navController.view];    self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    return YES;}

11

What are we doing?• First, we allocate and initialize the

rootViewController.• The nib name of nil in this case directs the

compiler to associate this controller with the XIB file that was created with it (MainViewController.xib).

• A bundle of nil directs the compiler to use this application’s bundle.

• After we initialize this controller, we set its title to @”Main View.” This title will appear in the navigation bar for this view controller.

12

navController Object

• Next, we set up the navController object.

• We make rootViewController this object’s Root View Controller.

• Adding the navController’s view to the main window as a subview, we then make the main window key and visible, and we’re off and running.

13

MainViewController.xib

14

@”Main View”

• Since the view controller’s title property was set to @”Main View” in the AppDelegate, that title will appear at the top of the interface when we run the app:

15

MainViewController.m

• Open the MainViewController.m file, and make these additions to

initWithNibName: bundle.

16

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil{    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];    if (self) {        // set up the nav bar button:        UIBarButtonItem *btnShow = [[UIBarButtonItem alloc]     initWithBarButtonSystemItem:UIBarButtonSystemItemSearch target:self     action:@selector(toggleToolBar)];        self.navigationItem.rightBarButtonItems = [NSArray arrayWithObjects:btnShow, nil];                // set up the tool bar buttons:        UIBarButtonItem *btnRed = [[UIBarButtonItem alloc] initWithTitle:@"Red"         style:UIBarButtonItemStyleDone target:self action:@selector(btnRedTouched)];        UIBarButtonItem *btnBlue = [[UIBarButtonItem alloc] initWithTitle:@"Blue"       style:UIBarButtonItemStyleDone target:self action:@selector(btnBlueTouched)];        UIBarButtonItem *spacer = [[UIBarButtonItem alloc]      initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];        UIBarButtonItem *btnGreen = [[UIBarButtonItem alloc] initWithTitle:@"Green"     style:UIBarButtonItemStyleDone target:self action:@selector(btnGreenTouched)];        self.toolbarItems = [NSArray arrayWithObjects:btnRed, btnBlue, spacer, btnGreen, nil];            }    return self;}

17

What did we do?• We add a UIBarButtonSystemItemSearch button

to the navigationItem’s rightBarButtonItems array.

• This button will be placed at the right of the top navigation bar. Next, we set up three bar buttons (btnRed, btnBlue, and btnGreen) and a spacer.

• The three buttons each have a selector, these will be defined shortly. Each also is initialized with a title, and a style of UIBarButtonItemStyleDone, which will produce a button with a blue background and white bolded text.

18

What did we do?

• The function of the spacer is to add “flexible space” between btnBlue and btnGreen.

• Flexible space will act as a “spring” between the two buttons, pushing btnGreen all the way to the right of the tool bar.

• Since this space is invisible, it makes no sense to assign it an action method, so we have set both the target and action of this object to nil.

19

What did we do?

• Now that we have the buttons, we need to add them to the tool bar.

• Each view controller has it’s own toolBarItems property, which is an NSArray of UIBarButtonItem objects.

• We stuffed the toolBarButtons array with the three buttons and the spacer.

20

Add to: MainViewController.m

• The last step…

• Implement the four methods we set as actions in the buttons as shown in the code on the next slide.

21

- (void)toggleToolBar{    BOOL barState = self.navigationController.toolbarHidden;    [self.navigationController setToolbarHidden:!barState animated:YES];}

- (void)btnRedTouched{    self.view.backgroundColor = [UIColor redColor];}

- (void)btnBlueTouched{    self.view.backgroundColor = [UIColor cyanColor];}

- (void)btnGreenTouched{    self.view.backgroundColor = [UIColor greenColor];}

22

What did we do?

• toggleToolBar gets the hidden property of the tool bar, then sets that property to its negation. In other words, if the tool bar is hidden it will be shown, if it is shown it will be hidden.

• The three btn…Touched methods set the color of the view’s background to red, cyan, or green when they are touched.

23

Program Output