Newest Post

Custom UIPickerView for iPhone - displaying multiple columns in the picker view

| Tuesday, December 31, 2013
Read more »
This article demonstrates the custom picker view for iPhone using the UIPickerView class. This application's main view controller contains a button, a label and a picker view control.
  1. Picker view control will have 5 columns which will be added programmatically and each column can contain n number of images. 
  2. Button is used to rotate the images in the columns of the picker view.
  3. Label is used to display result when any 3 consecutive columns have same image value.
Create a new Xcode project using Single View Application template and place the above controls in the view controller. Add picker view delegate, datasource, other actions and outlets for the controls in the header file.

The ViewController.h file should look like this.

@interface ViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate>
    IBOutlet UIPickerView *pickerView;
    IBOutlet UILabel *lblWinner;
    IBOutlet UIButton *rotateButtonRef;
    NSArray *column1;
  NSArray *column2;
  NSArray *column3;
  NSArray *column4;
  NSArray *column5;

- (IBAction)btnRotate:(id)sender;

@property(nonatomic, retain) UIPickerView *pickerView;
@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;
@property(nonatomic, retain) UILabel *lblWinner;
@property(nonatomic, retain) UIButton *rotateButtonRef;

The NSArray declared above will be used to hold the images for each column of the picker view.

Synthesize all the above properties in the implementation file.
@implementation ViewController
@synthesize pickerView,column1,column2,column3,column4,column5, rotateButtonRef,lblWinner;

Add images to the column arrays in the viewDidLoad as follows

UIImage *one = [UIImage imageNamed:@"one.png"];
UIImage *two = [UIImage imageNamed:@"two.png"];
UIImage *three = [UIImage imageNamed:@"three.png"];
UIImage *four = [UIImage imageNamed:@"four.png"];
UIImage *five = [UIImage imageNamed:@"five.png"];
UIImage *six = [UIImage imageNamed:@"six.png"];
UIImage *seven = [UIImage imageNamed:@"seven.png"];
UIImage *ten  = [UIImage imageNamed:@"ten.png"];
for (int i = 1; i <= 5; i++)
UIImageView *oneView = [[UIImageView alloc] initWithImage:one];
UIImageView *twoView = [[UIImageView alloc] initWithImage:two];
UIImageView *threeView = [[UIImageView alloc] initWithImage:three];
UIImageView *fourView = [[UIImageView alloc] initWithImage:four];
UIImageView *fiveView = [[UIImageView alloc] initWithImage:five];
UIImageView *sixView = [[UIImageView alloc] initWithImage:six];
UIImageView *sevenView = [[UIImageView alloc] initWithImage:seven];
UIImageView *tenView = [[UIImageView alloc] initWithImage:ten];
        NSArray *imageViewArray = [[NSArray alloc] initWithObjects: oneView, twoView, threeView, fourView, fiveView, sixView, sevenView, tenView, nil];
NSString *fieldName = [[NSString alloc] initWithFormat:@"column%d", i];
[self setValue:imageViewArray forKey:fieldName];
// Seed the random number generator

Rotate button action will check for the win-win condition every time its clicked, if condition is true, then win message is displayed otherwise button can be clicked till the condition is true.

- (IBAction)btnRotate:(id)sender {
    BOOL win = NO;
int numInRow = 1;
int lastValue = -1;
for (int i = 0; i < 5; i++)
int newValue = random() % [self.column1 count];
if (newValue == lastValue)
numInRow = 1;
lastValue = newValue;
[pickerView selectRow:newValue inComponent:i animated:YES];
[pickerView reloadComponent:i];
if (numInRow >= 3)
win = YES;
rotateButtonRef.hidden = YES;
if (win)
[self performSelector:@selector(winMsg) withObject:nil afterDelay:0.5];
[self performSelector:@selector(displayButton) withObject:nil afterDelay:0.5];
lblWinner.text = @"";

Two methods displayButton , winMsg have been used to handle the display of button and winner message

rotateButtonRef.hidden = NO;

lblWinner.text = @"Bingo!!! you have won!!";
[self performSelector:@selector(showButton) withObject:nil afterDelay:60.0];

Implement the picker view delegate methods to display the images in the picker view.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
return 5;

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
return [self.column1 count];
#pragma mark Picker Delegate Methods

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
if (component == 0)
return [self.column1 objectAtIndex:row];
else if (component == 1)
return [self.column2 objectAtIndex:row];
else if (component == 2)
return [self.column3 objectAtIndex:row];
else if (component == 3)
return [self.column4 objectAtIndex:row];
return [self.column5 objectAtIndex:row];

Build and run.

The output should look like this.

After rotating it could look like this.

And hence the winner

Thanks! your feedback is most valuable!

Custom UIPickerView for iPhone - displaying multiple columns in the picker view

Posted by : Pooja
Date :Tuesday, December 31, 2013
With 3comments
Tag :
Next Prev