Designing with a UITool Bar CS 4521 1

Designing with a UITool. Bar CS 4521 1

UINavigation Controller • The UINavigation. Controller maintains a UITool. Bar 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 ‘i. Phone’ as the app type 3

Add a new Class • Select the Objective-C class template, click Next • Name the class Main. View. Controller. • Make sure that the class is a subclass of UIView. Controller and also create a XIB file for the controller’s view as shown: 4

Create: Main. View. Controller 5

Edit App. Delegate. h • Now we’re going to set up a navigation controller having a Main. View. Controller object as its root view controller. • Select the App. Delegate. h file, and add the two properties for the UINavigation. Controller and the Main. View. Controller as shown on the next slide. 6

Add 2 properties + header #import "Main. View. Controller. h“ @property (strong, nonatomic) UINavigation. Controller *nav. Controller; @property (strong, nonatomic) Main. View. Controller *root. View. Controller; 7

Edit: App. Delegate. m First synthesize our properties: @synthesize nav. Controller = _nav. Controller; @synthesize root. View. Controller = _root. View. Controller; 8

Edit: App. Delegate. m • Change the did. Finish. Launching. With. Options: method • It’s the only method we will be making changes to. • Leave the remaining methods in place. 9

did. Finish. Launching. With Options - (BOOL)application: (UIApplication *)application did. Finish. Launching. With. Options: (NSDictionary *)launch. Options { self. window = [[UIWindow alloc] init. With. Frame: [[UIScreen main. Screen] bounds]]; // Override point for customization after application launch. self. root. View. Controller = [[Main. View. Controller alloc] init. With. Nib. Name: nil bundle: nil]; self. root. View. Controller. title = @"Main View"; self. nav. Controller = [[UINavigation. Controller alloc] init. With. Root. View. Controller: self. root. View. Controller]; [self. window add. Subview: self. nav. Controller. view]; self. window. background. Color = [UIColor white. Color]; [self. window make. Key. And. Visible]; return YES; } 10

What are we doing? • First, we allocate and initialize the root. View. Controller. • The nib name of nil in this case directs the compiler to associate this controller with the XIB file that was created with it (Main. View. Controller. 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

nav. Controller Object • Next, we set up the nav. Controller object. • We make root. View. Controller this object’s Root View Controller. • Adding the nav. Controller’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

Main. View. Controller. xib 13

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

Main. View. Controller. m • Open the Main. View. Controller. m file, and make these additions to init. With. Nib. Name: bundle. 15

- (id)init. With. Nib. Name: (NSString *)nib. Name. Or. Nil bundle: (NSBundle *)nib. Bundle. Or. Nil { self = [super init. With. Nib. Name: nib. Name. Or. Nil bundle: nib. Bundle. Or. Nil]; if (self) { // set up the nav bar button: UIBar. Button. Item *btn. Show = [[UIBar. Button. Item alloc] init. With. Bar. Button. System. Item: UIBar. Button. System. Item. Search target: self action: @selector(toggle. Tool. Bar)]; self. navigation. Item. right. Bar. Button. Items = [NSArray array. With. Objects: btn. Show, nil]; // set up the tool bar buttons: UIBar. Button. Item *btn. Red = [[UIBar. Button. Item alloc] init. With. Title: @"Red" style: UIBar. Button. Item. Style. Done target: self action: @selector(btn. Red. Touched)]; UIBar. Button. Item *btn. Blue = [[UIBar. Button. Item alloc] init. With. Title: @"Blue" style: UIBar. Button. Item. Style. Done target: self action: @selector(btn. Blue. Touched)]; UIBar. Button. Item *spacer = [[UIBar. Button. Item alloc] init. With. Bar. Button. System. Item: UIBar. Button. System. Item. Flexible. Space target: nil action: nil]; UIBar. Button. Item *btn. Green = [[UIBar. Button. Item alloc] init. With. Title: @"Green" style: UIBar. Button. Item. Style. Done target: self action: @selector(btn. Green. Touched)]; self. toolbar. Items = [NSArray array. With. Objects: btn. Red, btn. Blue, spacer, btn. Green, nil]; } } return self; 16

What did we do? • We add a UIBar. Button. System. Item. Search button to the navigation. Item’s right. Bar. Button. Items array. • This button will be placed at the right of the top navigation bar. Next, we set up three bar buttons (btn. Red, btn. Blue, and btn. Green) 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 UIBar. Button. Item. Style. Done, 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 btn. Blue and btn. Green. • Flexible space will act as a “spring” between the two buttons, pushing btn. Green 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 tool. Bar. Items property, which is an NSArray of UIBar. Button. Item objects. • We stuffed the tool. Bar. Buttons array with the three buttons and the spacer. 19

Add to: Main. View. Controller. 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)toggle. Tool. Bar { BOOL bar. State = self. navigation. Controller. toolbar. Hidden; [self. navigation. Controller set. Toolbar. Hidden: !bar. State animated: YES]; } - (void)btn. Red. Touched { self. view. background. Color = [UIColor red. Color]; } - (void)btn. Blue. Touched { self. view. background. Color = [UIColor cyan. Color]; } - (void)btn. Green. Touched { self. view. background. Color = [UIColor green. Color]; } 21

What did we do? • toggle. Tool. Bar 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