We are going to have a little fun with the fifth content view. We’re going to see how to add image data to a picker, write a little game that uses a picker with five components.
Step 1: Create a new project from Xcode and select view-base application template.
Step 2: Adding the following code to the controller Header file.
#import <UIKit/UIKit.h>
@interface CustomPickerViewController : UIViewController
<UIPickerViewDataSource , UIPickerViewDelegate>{
IBOutlet UIPickerView *picker;
IBOutlet UILabel *winLabel;
NSArray *column1;
NSArray *column2;
NSArray *column3;
NSArray *column4;
NSArray *column5;
<UIPickerViewDataSource , UIPickerViewDelegate>{
IBOutlet UIPickerView *picker;
IBOutlet UILabel *winLabel;
NSArray *column1;
NSArray *column2;
NSArray *column3;
NSArray *column4;
NSArray *column5;
}
@property (nonatomic,retain) UIPickerView *picker;@property (nonatomic,retain) UILabel *winLabel;@property (nonatomic,retain) NSArray *column1;@property (nonatomic,retain) NSArray *column2;@property (nonatomic,retain) NSArray *column3;@property (nonatomic,retain) NSArray *column4;@property (nonatomic,retain) NSArray *column5;
-(IBAction)spin;
Step 3: Double click .xib file to open the file in Interface Builder. Add a label, a picker, and a button. Give the button a title of spin. Next select label , and use the Fonts palette (Alt+T) to make the label’s text nice and big. After getting the text the way you want it, delete the word Label from it , 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. There one additional thing that you need to do. Select the picker, and bring up the attributes inspector. You need to uncheck and checkbox labeled User Interacface Enabled . Now save it, go back to Xcode.
Step 4: We need to add the images that we’ll be using in our game. We’ve included a set of six image files(seven.png, bar.png, crown.png, cherry.png, lemon.png, and apple.png) in your resources folder.
Step 5: We need to add following code to our controller file. First method is spin method fires when the user touches the Spin button . We first declare a few variables that will help us keep track of whether the user has won. Second method is viewDidLoad, first thing we do is load six different images. We do using this using a convenince method on the UIImage class class called imageNamed:
-(IBAction)spin
{
BOOL win = NO;
int numInRow = 1;
int lastVal = -1;
for(int i = 0; i<5 ;i++)
{
int newValue = random() % [self.column1 count];
if(newValue == lastVal)
numInRow++;
else
numInRow =1;
lastVal = newValue;
[picker selectRow:newValue inComponent:i animated:YES];
[picker reloadComponent:i];
if(numInRow >= 3)
win = YES;
}
if(win)
winLabel.text = @"WIN!";
else
winLabel.text = @"";
}
- (void)viewDidLoad {
UIImage *seven = [UIImage imageNamed:@"seven.png"];
UIImage *bar = [UIImage imageNamed:@"bar.png"];
UIImage *crown = [UIImage imageNamed:@"crown.png"];
UIImage *cherry = [UIImage imageNamed:@"cherry.png"];
UIImage *lemon = [UIImage imageNamed:@"lemon.png"];
UIImage *apple = [UIImage imageNamed:@"apple.png"];
{
BOOL win = NO;
int numInRow = 1;
int lastVal = -1;
for(int i = 0; i<5 ;i++)
{
int newValue = random() % [self.column1 count];
if(newValue == lastVal)
numInRow++;
else
numInRow =1;
lastVal = newValue;
[picker selectRow:newValue inComponent:i animated:YES];
[picker reloadComponent:i];
if(numInRow >= 3)
win = YES;
}
if(win)
winLabel.text = @"WIN!";
else
winLabel.text = @"";
}
- (void)viewDidLoad {
UIImage *seven = [UIImage imageNamed:@"seven.png"];
UIImage *bar = [UIImage imageNamed:@"bar.png"];
UIImage *crown = [UIImage imageNamed:@"crown.png"];
UIImage *cherry = [UIImage imageNamed:@"cherry.png"];
UIImage *lemon = [UIImage imageNamed:@"lemon.png"];
UIImage *apple = [UIImage imageNamed:@"apple.png"];
for(int i =1; i<=5; i++)
{
UIImageView *sevenView = [[UIImageView alloc] initWithImage:seven];
UIImageView *barView = [[UIImageView alloc] initWithImage:bar];
UIImageView *crownView = [[UIImageView alloc] initWithImage:crown];
UIImageView *cherryView = [[UIImageView alloc] initWithImage:cherry];
UIImageView *lemonView = [[UIImageView alloc] initWithImage:lemon];
UIImageView *appleView = [[UIImageView alloc] initWithImage:apple];
NSArray *imageViewArray = [[NSArray alloc] initWithObjects:
sevenView,barView, crownView,cherryView,lemonView,appleView,nil];
NSString *fieldName = [[NSString alloc] initWithFormat:@"column%d",i];
[self setValue:imageViewArray forKey:fieldName];
[fieldName release];
[imageViewArray release];
[sevenView release];
[barView release];
[crownView release];
[cherryView release];
[lemonView release];
[appleView release];
}
srandom(time(NULL));}
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 5;}
return 5;}
-(NSInteger)pickerView:(UIPickerView *)pickerView
numberOfRowsInComponent:(NSInteger)component{
return [self.column1 count];}
numberOfRowsInComponent:(NSInteger)component{
return [self.column1 count];}
Step 6: Now compile your application and you can play your application on Simulator. ( see figure 1)
Figure 1: Our five component picker.
I Hope this post helped you...
hi
ReplyDeletethis tutorial was very helpful
something that i was looking for...
but there is one thing i want to change here
PLZ HELP ME with it
..
..
see instead of the SPIN BUTTON i want the user to be able to move the pickers and then i want the check function to be called...
can u plz tell me how to do that...
thanks
abhishek
Hi,
DeleteGood to know it helped u.
You can now download the code from the link i have updated in the blog.
To make the user able to move the picker do the following,
1) open the CustomPickerViewController.xib in the code.
2) For picker in the xib you have to enable the 'User Interaction' under Attribute Inspector Tab. Check on that and uncheck on 'multi touch'.
Now build and run . The user can move the picker.
Everytime the picker is moved the delegate function :::
'(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view'
is called.Your logic goes here in this function.
Hey you are awesome this is JUST what I needed. Thanks!
ReplyDelete