designing with a uitoolbar cs4521 1. uinavigation controller the uinavigationcontroller maintains a...
TRANSCRIPT
![Page 1: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/1.jpg)
Designing with Designing with a UIToolBara UIToolBar
CS4521
1
![Page 2: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/2.jpg)
UINavigation UINavigation ControllerController
• 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
![Page 3: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/3.jpg)
Open a new “Single Open a new “Single View” appView” 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
![Page 4: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/4.jpg)
Add a new ClassAdd 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
![Page 5: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/5.jpg)
Create: Create: MainViewControllerMainViewController
5
![Page 6: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/6.jpg)
Edit AppDelegate.hEdit 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
![Page 7: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/7.jpg)
Add 2 properties + Add 2 properties + headerheader
#import "MainViewController.h“
@property (strong, nonatomic) UINavigationController *navController;
@property (strong, nonatomic) MainViewController *rootViewController;
7
![Page 8: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/8.jpg)
Edit: AppDelegate.mEdit: AppDelegate.mFirst synthesize our properties:
@synthesize navController = _navController;
@synthesize rootViewController = _rootViewController;
8
![Page 9: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/9.jpg)
Edit: AppDelegate.mEdit: AppDelegate.m• Change the didFinishLaunchingWithOptions:
method• It’s the only method we will be making changes
to.• Leave the remaining methods in place.
9
![Page 10: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/10.jpg)
didFinishLaunchingWididFinishLaunchingWithOptionsthOptions
- (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
![Page 11: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/11.jpg)
What are we doing?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
![Page 12: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/12.jpg)
navController Object 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
![Page 13: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/13.jpg)
MainViewController.xiMainViewController.xibb
13
![Page 14: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/14.jpg)
@”Main View”@”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
![Page 15: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/15.jpg)
MainViewController.m MainViewController.m • Open the MainViewController.m file, and make
these additions to
initWithNibName: bundle.
15
![Page 16: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/16.jpg)
- (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;}
16
![Page 17: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/17.jpg)
What did we do?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
![Page 18: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/18.jpg)
What did we do?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
![Page 19: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/19.jpg)
What did we do?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
![Page 20: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/20.jpg)
Add to: Add to: MainViewController.mMainViewController.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
![Page 21: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/21.jpg)
- (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
![Page 22: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/22.jpg)
What did we do?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
![Page 23: Designing with a UIToolBar CS4521 1. UINavigation Controller The UINavigationController maintains a UIToolBar for each view controller in its stack. This](https://reader035.vdocument.in/reader035/viewer/2022070412/56649f2a5503460f94c44ed6/html5/thumbnails/23.jpg)
Program OutputProgram Output
23