CHAPTER 7: Tab Bars and Pickers |
203 |
The two components are equal in size. Even though the ZIP code will never be more than five characters long, it has been given equal billing with the state. Since state names like Mississippi and Massachusetts won’t fit in half of the picker, this seems less than ideal. Fortunately, there’s another delegate method we can implement to indicate how wide each component should be. We have about 295 pixels available to the picker components in portrait orientation, but for every additional component we add, we lose a little space to drawing the edges of the new component. You might need to experiment a bit with the values to get it to look right. Add the following method to the delegate section of BIDDependentComponentPickerViewController.m:
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
if (component == kZipComponent) return 90;
return 200;
}
In this method, we return a number that represents how many pixels wide each component should be, and the picker will do its best to accommodate this. Save, compile, and run, and the picker on the Dependent tab will look more like the one shown in Figure 7–5.
By this point, you should be pretty darn comfortable with both pickers and tab bar applications. We have one more thing to show you about pickers, and we plan to have a little fun while doing it. Let’s create a simple slot machine game.
Creating a Simple Game with a Custom Picker
Next up, we’re going to create an actual working slot machine. Well, OK, it won’t dispense silver dollars, but it does look pretty cool. Take a look back at Figure 7–6 before proceeding so you know what we’re building.
Writing the Controller Header File
Add the following code to BIDCustomPickerViewController.h for starters:
#import <UIKit/UIKit.h>
@interface BIDCustomPickerViewController : UIViewController
<UIPickerViewDataSource, UIPickerViewDelegate>
@property (strong, nonatomic) IBOutlet UIPickerView *picker; @property (strong, nonatomic) IBOutlet UILabel *winLabel; @property (strong, nonatomic) NSArray *column1;
@property (strong, nonatomic) NSArray *column2; @property (strong, nonatomic) NSArray *column3; @property (strong, nonatomic) NSArray *column4; @property (strong, nonatomic) NSArray *column5;
- (IBAction)spin;
@end
www.it-ebooks.info
204 |
CHAPTER 7: Tab Bars and Pickers |
We’re declaring two outlets, one for a picker view and one for a label. The label will be used to tell users when they’ve won, which happens when they get three of the same symbol in a row.
We also create five pointers to NSArray objects. We’ll use these to hold the image views containing the images we want the picker to draw. Even though we’re using the same images in all five columns, we need separate arrays for each one with its own set of image views, because each view can be drawn in only one place in the picker at a time. We also declare an action method, this time called spin.
Building the View
Even though the picker in Figure 7–6 looks quite a bit fancier than the other ones we’ve built, there’s actually very little difference in the way we’ll design our nib. All the extra work is done in the delegate methods of our controller.
Make sure you’ve saved your new source code, and then select BIDCustomPickerViewController.xib in the project navigator to edit the GUI. Set the Simulated Metrics to simulate a tab bar at the bottom of the view, and then add a picker view, a label below that, and a button below that. Use the blue guideline toward the bottom of your view to place the bottom of your button, and center the label and button. Give the button a title of Spin.
Now, move your label so it lines up with the view’s left guideline and touches the guideline below the bottom of the picker view. Next, resize the label so it goes all the way to the right guideline and down to the guideline above the top of the button.
With the label selected, bring up the attributes inspector. Set the Alignment to centered. Then click Text Color and set the color to something festive, like a bright fuchsia (we don’t actually know what color that is, but it does sound festive).
Next, let’s make the text a little bigger. Look for the Font setting in the inspector, and click the icon inside of it (it looks like the letter “T” inside a little box) to pop up the font selector. This control lets you switch from the device’s standard system font to another if you like, or simply change the size. For now, just change the size to 48. After getting the text the way you want it, delete the word Label, since we don’t want any text displayed until the first time the user wins.
After that, make all the connections to outlets and actions. You need to connect the File’s Owner’s picker outlet to the picker view, the File’s Owner’s winLabel outlet to the label, and the button’s Touch Up Inside event to the spin action. After that, just make sure to specify the delegate and data source for the picker.
Oh, and there’s one additional thing that you need to do. Select the picker, and bring up the attributes inspector. You need to uncheck the checkbox labeled User Interaction Enabled within the View settings so that the user can’t manually change the dial and cheat. Once you’ve done all that, save the changes you’ve made to the nib file.
www.it-ebooks.info