182 |
CHAPTER 7: Tab Bars and Pickers |
TIP: If your simulator bursts into flames when you click one of the tabs, don’t panic! Most likely, you’ve either missed a step or made a typo. Go back and check all the nib file names, make sure
the connections are right, and make sure the class names are all set correctly.
If you want to make double sure everything is working, you can add a different label or some other object to each of the content views, and then relaunch the application. Then you should see the content of the different views change as you select different tabs.
Implementing the Date Picker
To implement the date picker, we’ll need a single outlet and a single action. The outlet will be used to grab the value from the date picker. The action will be triggered by a button and will put up an alert to show the date value pulled from the picker. Single-click
BIDDatePickerViewController.h, and add the following code:
#import <UIKit/UIKit.h>
@interface BIDDatePickerViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIDatePicker *datePicker; - (IBAction)buttonPressed;
@end
Save this file, and then click BIDDatePickerViewController.xib to edit the content view for our first tab.
The first thing we need to do is size the view so it accounts for the tab bar. Single-click the View icon and press 4 to bring up the attributes inspector. In the Simulated Metrics section, set the Bottom Bar popup to Tab Bar. This will cause Interface Builder to automatically reduce the view’s height to 411 pixels and show a simulated tab bar.
Next, find a Date Picker in the library, and drag one over to the View window. Place the Date Picker at the top of the view, right up against the bottom of the status bar. It should take up the entire width of your content view and a good portion of the height. Don’t use the blue guidelines for the picker; it’s designed to fit snugly against the edges of the view (see Figure 7–17).
www.it-ebooks.info
CHAPTER 7: Tab Bars and Pickers |
183 |
Figure 7–17. We dragged a Date Picker from the library. Notice that it takes up the entire width of the view, and that we placed it at the top of the view, just below the status bar.
Single-click the date picker if it’s not already selected, and go back to the attributes inspector. As you can see in Figure 7–18, a number of attributes can be configured for a date picker. We’re going to leave most of the values at their defaults (but feel free to play with the options when we’re finished to see what they do). The one thing we will do is limit the range of the picker to reasonable dates. Look for the heading that says Constraints, and check the box that reads Minimum Date. Leave the value at the default of 1/1/1970. Also check the box that reads Maximum Date, and set that value to 12/31/2200.
www.it-ebooks.info
184 |
CHAPTER 7: Tab Bars and Pickers |
Figure 7–18. The attributes inspector for a date picker. Set the minimum and maximum dates, but leave the rest of the settings at their default values.
Next, grab a Round Rect Button from the library, and place it below the date picker. Double-click the button and give it a title of Select.
With the button still selected, press 6 to switch to the connections inspector. Drag from the circle next to the Touch Up Inside event over to the File’s Owner icon, and
www.it-ebooks.info
CHAPTER 7: Tab Bars and Pickers |
185 |
connect to the buttonPressed action. Then control-drag from the File’s Owner icon back to the date picker, and select the datePicker outlet. Finally, save your changes to the nib file, since we’re finished with this part of the GUI.
Now we just need to implement BIDDatePickerViewController. Click BIDDatePickerViewController.m and start by adding the following code at the top of the file:
#import "BIDDatePickerViewController.h"
@implementation BIDDatePickerViewController
@synthesize datePicker;
- (IBAction)buttonPressed {
NSDate *selected = [datePicker date];
NSString *message = [[NSString alloc] initWithFormat: @"The date and time you selected is: %@", selected];
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Date and Time Selected"
message:message
delegate:nil cancelButtonTitle:@"Yes, I did." otherButtonTitles:nil];
[alert show];
}
.
.
.
Then add a bit of setup code to the viewDidLoad: method:
- (void)viewDidLoad { [super viewDidLoad];
// Do any additional setup after loading the view from its nib.
NSDate *now = [NSDate date]; [datePicker setDate:now animated:NO];
}
.
.
.
Next, add one line to the existing viewDidUnload: method:
- (void)viewDidUnload { [super viewDidUnload];
//Release any retained subviews of the main view.
//e.g. self.myOutlet = nil;
self.datePicker = nil;
}
Here, we first synthesize the accessor and mutator for our datePicker outlet, and then we add the implementation of buttonPressed and override viewDidLoad. In buttonPressed, we use our datePicker outlet to get the current date value from the date picker, and then we construct a string based on that date and use it to show an alert sheet.
www.it-ebooks.info