Monday, September 17, 2012

UIPickerView Tutorial


1. Add a New File, subclass of ViewController, to your project. In my example, the name of my class is ViewController.

2. Open ViewController.xib and drag a pickerview to your xib file.



 3. Add a UIPickerView IBOutlet to your ViewController.h file, and synthesize it to your ViewController.m.
@property (nonatomic, strong) IBOutlet UIPickerView *myPickerView; //.h
@synthesize myPickerView; //.m

4. Connect your IBOutlet property to the object in your .xib file.


5. Go back to your ViewController.h, and make your interface header look like this:
@interface ViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate

6. On your viewDidLoad, set the delegate and datasource of your pickerview to self;
- (void)viewDidLoad
{
    [super viewDidLoad];
    myPickerView.delegate = self;
    myPickerView.dataSource = self;
}

7. Add an array that will hold your items for you.
If your items are constant, use NSArray, else, use NSMutableArray.
@property (nonatomicstrong) NSArray *itemsArray; //.h
@ synthesize itemsArray; //.m

8. Initialize your array.
itemsArray = [[NSArray alloc] initWithObjects:@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 6", nil];

9. Add these delegate and datasource methods of pickerview in your ViewController.m class:
#pragma mark - UIPickerView DataSource
// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return [itemsArray count];
}

#pragma mark - UIPickerView Delegate
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 30.0;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [itemsArray objectAtIndex:row];
}

//If the user chooses from the pickerview, it calls this function;
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    //Let's print in the console what the user had chosen;
    NSLog(@"Chosen item: %@", [itemsArray objectAtIndex:row]);
}

10. Done! Hit Run!





11 comments:

  1. Thank you. You make IOS programming easy.
    Very good tutorials !!

    ReplyDelete
  2. how to add two picker View in one ViewController.xib
    plz help me..!

    ReplyDelete
    Replies
    1. Hi,

      Declare 2 pickerviews..
      @property(nonatomic, strong) UIPickerview *myFirstPickerView;
      @property(nonatomic, strong) UIPickerview *mySecondPickerView;
      Synthesize them in your .m file.


      then on your pickerView delegate and datasource methods.. you can see that all of the methods have the pickerview variable..
      Example:
      - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;

      There's a pickerView variable ^, right?

      inside your method.. add an if-else statement if the pickerView is equal to pickerView 1 or 2...

      if(pickerView == myFirstPickerView){
      //your code for your first pickerview
      }else{
      //your coe for your second pickerview
      }

      Delete
    2. how to add pickerView in actionsheet manually please guid

      Delete
  3. Thanks for the great tutorial. I have a little bit more advanced question regarding Pickers. Let's say I have 4 text fields, each of which I want to use a PickerView for. On IB I only wish to drag one PickerView into the project, and yet use it for each text field. However, when the user taps on each text field, the picker should populate with different choices.

    How would I go about doing this given your tutorial above?

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. I am trying how to show the message in a label ....i have taken string and passed the string value to label but i am unable to solve can to help me....

    ReplyDelete
  6. hi i want to used three picker on button click so how can i do that and i m creating uipicker programaticaly please help me thanks

    ReplyDelete
  7. hi i want to show records from core data table

    ReplyDelete
  8. Thanks Jenn! Your tutorials are always very concise and helpful.

    It would be nice if you would use a fixed-point font for your code snippets.

    ReplyDelete