How do I add multiple components to a PickerView?

Question

It may be a simple question but how do I add multiple components to a UIPickerView? I use NSMutableArray to populate one component but I dont know how to populate the others. I also need to change the value of a label when a row is selected. Thanks in advance Kieran

Answer 1

I take it that you are a beginner. Here's how to implement the methods nacho has rightly pointed out:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    // return the number of components required
    return 2;
}

You can use other NSMutableArray's to populate the components. Assuming that you have 2 components, each using different NSMutableArray i.e. array1 and array2:

// Return row count for each of the components
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return [array1 count];
    }
    else {
        return [array2 count];
    }
}

// Populate the rows of the Picker
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

    // Component 0 should load the array1 values, Component 1 will have the array2 values
    if (component == 0) {
        return [array1 objectAtIndex:row];
    }
    else if (component == 1) {
        return [array2 objectAtIndex:row];
    }
    return nil;
}

Use this code to change the text of a label, say selectedValue when a value is selected in the PickerView:

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    selectedValue.text = [NSString stringWithFormat: @"%@, %@", [array1 objectAtIndex:[myPicker selectedRowInComponent:0]],[array2 objectAtIndex:[myPicker selectedRowInComponent:1]]];
}

... and you are good to go :)

You might also want to see http://joshhighland.com/blog/2009/09/17/uipickerview-spinning-multiple-components/ for valuable tips on pickerView programming.

Answer 2

You need to set the datasource and use

– numberOfComponentsInPickerView:
– pickerView:numberOfRowsInComponent:

set its delegate and use:

– pickerView:didSelectRow:inComponent:

to change your label when a certain row in a certain component is selected. Very likely to UITableViewDelegate and Datasource

and also taking a glance to documentation helps :)

Answer 3

Instead of component I found using tag more proper.

Then in the code:

// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    //NSLog(@"Component_1: %d",pickerView.tag);
    if (pickerView.tag == 1)
        return [self.arrOpponentTeams count];
    else if (pickerView.tag == 2)
        return [self.arrMyTeams count];
    else
        return [self.arrPlayers count];
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    //NSLog(@"Component_2: %d",pickerView.tag);
    if( pickerView.tag == 1 )
        return [self.arrOpponentTeams objectAtIndex:row];
    else if (pickerView.tag == 2)
        return [self.arrMyTeams objectAtIndex:row];
    else
        return [self.arrPlayers objectAtIndex:row];
}

Answer 4

I do not know if it's a little late But I solved this another way Array are a bit rudimentary But it works wonders You can even put different color to each array

- (void) viewDidLoad {
  horPickerArray = @[@"00",@"01",@"02",@"03",@"04",@"05".to..24];
  minPickerArray = @[@"00",@"01",@"02",@"03",@"04",@"05".to..59];
  secPickerArray = @[@"00",@"01",@"02",@"03",@"04",@"05".to..59];
}

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 3;   
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
if (component == 0) {
        return _HorPickerArray.count ;
    }
    else if (component == 1) {
        return _MinPickerArray.count ;
    }
    else if (component == 2) {
        return _SecPickerArray.count ;
    }
}

 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
if (component == 0) {
        return [_HorPickerArray objectAtIndex:row];
    }
    else if (component == 1) {
        return [_MinPickerArray objectAtIndex:row];
    }
    else if (component == 2) {
        return [_SecPickerArray objectAtIndex:row];
    }
    return nil;

}

And Print in TextField

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

    _OficialTime.text  =[NSString stringWithFormat: @"%@:%@:%@",    [_HorPickerArray objectAtIndex:[_TimerPiker selectedRowInComponent:0]],[_MinPickerArray objectAtIndex:[_TimerPiker selectedRowInComponent:1]],  [_SecPickerArray objectAtIndex:[_TimerPiker selectedRowInComponent:2]]]; 
}

Answer 5

Here is the swift3 code.Here I am assigning values of multiple picker view to a UITextField.

var pickOption = [["1", "2", "3","4","5","6","7","8","9"], ["0","1","2", "3","4","5","6"],["0","1","2", "3","4","5","6"]]
@IBOutlet weak var travellersTextField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
    let pickerView = UIPickerView()
    pickerView.delegate = self
    travellersTextField.inputView = pickerView
}

func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return pickOption.count
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickOption[component].count
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return  pickOption[component][row]
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    let adult = pickOption[0][pickerView.selectedRow(inComponent: 0)]
    let child = pickOption[1][pickerView.selectedRow(inComponent: 1)]
    let infant = pickOption[2][pickerView.selectedRow(inComponent: 2)]

    travellersTextField.text = adult + " adults," + child + " children," + infant + " infants"
    travellersTextField.becomeFirstResponder()

}