Share on Google+Share on Google+

iPhone CustomPickerView

In the given tutorial you will see how to shake the pictures using custom picker view in iphone...that's why we have named the application iphone shake to shuffle.

iPhone CustomPickerView

In the given tutorial you will see how to shake the pictures using custom picker view in iphone...that's why we have named the application iphone shake to shuffle. In this application we have used custom picker view with five components and each component can contains any number of pictures. We have also used a button to give an action. On clicking the button, images will be shaken or shuffle. Apart from it we have used one more method that will check the if condition(if the 3 components out of five have the same image value in sequence or not) and if the condition is true, it will show the result or otherwise it'll run until the condition is true.

Final view will look like this:

My project name is iphone CustomePickerView and is based on View Application. Here will add the UiPickerViewDataSource and UIPickerviewDelegate at interface and after that will create variable for the PickerView, label and the button. As we have five component in Picker View we have to take five arrays to enter the images into the components of Picker View, write the property for each and will synthesize it in .m file, will write the action for the button so that the components in Picker View can be shuffled.

Add this to ViewController.h file:

<UIPickerViewDataSource, UIPickerViewDelegate>

    IBOutlet    UIPickerView  *picker;

    IBOutlet    UILabel  *winner;

    IBOutlet    UIButton  *mbutton;

    NSArray *column1;

    NSArray *column2;

    NSArray *column3;

    NSArray *column4;

    NSArray *column5;

@property(nonatomic, retain) UIPickerView *picker;

@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 *winner;

@property(nonatomic, retain) UIButton *mbutton;


After declaring the variable will synthesize it in .m file and then in .m file will create two method one for the showButton and another one is for youWon, And in that will write the code. To rotate the component in Picker View am using Boolean function and numInRow and lastVal is declared as integer type and in for loop we are checking the condition if it satisfy then numInRow is incremented by one otherwise will move else statement. If condition is used to display the user, that he is winner or not, if condition is satisfied then it moves to youwon method and by that the button will be hidden and the message on view is showed as winner. 

In viewDidLoad method will add all the images which we require to add to the component of Picker View is added and after that will use for condition to add the same data into the each components of Picker View and after adding the variable created is released. uncomment the initWithNibName: bundle: also the shouldAutorotateToInterfaceOrientation. Then in Picker Data Source method will set the number of components in picker view and also the number of Rows in each component and is counted by using the array variable which we created to add the images into the Picker View.
After doing this will add view for row for the component and also reusing view, in that if condition is used and in that component is compared with the integer value and is set to the objectindex row in Picker View. 

Add this to ViewController.m file:

@synthesize picker, column1, column2, column3, column4, column5, winner, mbutton;


    mbutton.hidden = NO;// is used to show the button once clicked



    winner.text = @"Winner";  // is used to show the text on label.

 [self performSelector:@selector(showButton) withObject:nil afterDelay:60.0];  // is used to hide the button once winner is declared.



    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++;  // if condition is true then numInRow is incremented by one.


          numInRow = 1;

        lastVal = newValue;

        [picker selectRow:newValue inComponent:i animated:YES];

        [picker reloadComponent:i];

      if (numInRow >= 3)  // if three images in sequence are same then win

          win = YES;


    mbutton.hidden = YES;

    if (win)

  [self performSelector:@selector(youWon) withObject:nil afterDelay:0.5];   // if win then moves to youWon


  [self performSelector:@selector(showButton) withObject:nil afterDelay:0.5];  // otherwise moves to showButton

    winner.text = @"";


 - (void)viewDidLoad{

    UIImage *one = [UIImage imageNamed:@"one.jpg"];

    UIImage *two = [UIImage imageNamed:@"two.jpg"];

    UIImage *three = [UIImage imageNamed:@"three.jpg"];

    UIImage *four = [UIImage imageNamed:@"four.jpg"];

    UIImage *five = [UIImage imageNamed:@"five.jpg"];

    UIImage *six = [UIImage imageNamed:@"six.jpg"];

    UIImage *seven = [UIImage imageNamed:@"seven.jpg"];

    UIImage *nine  = [UIImage imageNamed:@"nine.jpg"];

    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 *nineView = [[UIImageView alloc] initWithImage:nine];

NSArray *imageViewArray = [[NSArray alloc] initWithObjects: oneView, twoView, threeView, fourView, fiveView, sixView, sevenView, nineView, nil];

        NSString *fieldName = [[NSString alloc] initWithFormat:@"column%d", i];

      [self setValue:imageViewArray forKey:fieldName];

 [fieldName release];[imageViewArray release];[oneView release];[twoView release];[threeView release];[fourView release];

        [fiveView release];[sixView release];[sevenView release];[nineView release];}


- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{

    return 5;// giving number of components in PickerView


- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

    return [self.column1 count];// counting the number of rows in each component


#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];


After writing all the variable and method for each thing,we have to add Picker View and the Button on to the view from the library file. the variable created for the Picker View, button and the label should be linked in Interface builder and also the action on button should be linked otherwise the action on button wont work.

Make connection is Interface Builder as below:

Finally press Build And Go button.

Download Here


Posted on: October 1, 2009 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null