Monday, 10 March 2014

iPhone Development: UIPickerView tutorial in IOS




iPhone does not had drop downs like a web interface but it shows user options in a component know as UIPickerView.Its lie a spinning wheel or a wheel, user can select values by scrolling it and the value placed in the center of wheel  is shown as selected value. It's very easy to create a UIPickerView in IOS.


In this tutorial i will show, how to create a picker view in IOS.
First create an outlet to your UIPickerView and array for our option value's in .h file.

    IBOutlet UIPickerView *picker;
    NSMutableArray *daysArray;

Now open your xib file drag UIPickerView  in your view.Connect your outlet to your picker view.
You can do this by right clicking your FileOwner object and select the circle in front of your UIPickerView outlet. Drag your pointer toward UIPickerView.

Now, open up your .m file and in its viewDidLoad method set UIPickerView delegate and datasource and add options to the our options array i.e daysArray.

    picker.delegate=self;
    picker.dataSource=self;
    picker.backgroundColor=[UIColor colorWithWhite:1.0 alpha:1.0];
    for (int i =1;i<31; i++)
    {
        [daysArray addObject:[NSString stringWithFormat:@"%d dias",i]];


    }

As you set delegate and datasource for your picker, it's time to implement delegate  and datasource methods.
We need to implement two datasource methods,

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

numberOfComponentInPickerView let us to tell compiler that number of components we want in our UIPicker.Here we will pass 1 as we are going create single component picker.

numberOfRowsInComponent lets us to declare how many rows we want in our UIPickerView.
Below is the code for both methods implementation

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return [daysArray count];
}

As we implement our datasource methods, now we will implement our delegate methods for UIPickerView.

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component

tittleForRow will be used to display our UIPickerView option values.
didSelectRow, as its name implies will be called every time user scroll UIPickerView
Below is the implementation for both of these methods

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [daysArray objectAtIndex:row];
}
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
      NSLog(@"day Selected == %@",[daysArray objectAtIndex:row]);
}


The output of above code is shown as

UIPickerView will be displayed as











Output shown in console



1 comment:
Write comments