Designing with a UIToolBar
iPhone/iPad, iOS Development
Tutorial
1
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.
2
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
3
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:
4
Create: MainViewController
5
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.
6
Add 2 properties + header
#import "MainViewController.h“
@property (strong, nonatomic)
UINavigationController *navController;
@property (strong, nonatomic)
MainViewController *rootViewController;
7
Edit: AppDelegate.m
First synthesize our properties:
@synthesize navController =
_navController;
@synthesize rootViewController =
_rootViewController;
8
Edit: AppDelegate.m
• Change the
didFinishLaunchingWithOptions: method
• It’s the only method we will be making
changes to.
• Leave the remaining methods in place.
9
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;
}
10
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.
11
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.
12
MainViewController.xib
13
@”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:
14
MainViewController.m
• Open the MainViewController.m file, and
make these additions to
initWithNibName: bundle.
15
- (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:UIBarButtonSystemItemSea
rch 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:UIBarButtonSystemItemFl
exibleSpace 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;
16
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.
17
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.
18
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.
19
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.
20
- (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];
}
21
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.
22
Program Output
23