Multiple Picker Views on a single view

Question

I have followed the following SO question to create multiple picker views. It works but not exactly how I want it.

What I require:

My view will have multiple buttons. On tap each button will show a picker view at the bottom of the screen.Each buttons picker view will have different options. See image below:

What I have done:

So far I have created two buttons and then added two picker views to my storyboard. See Below

The code is below:

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

@IBOutlet var one: UIPickerView!

@IBOutlet var Two: UIPickerView!

var picker1Options = [String]()
var picker2Options = [String]()
override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    picker1Options = ["Option 1","Option 2","Option 3","Option 4","Option 5"]
    picker2Options = ["Item 1","Item 2","Item 3","Item 4","Item 5"]
    self.one.hidden = true
    self.Two.hidden = true
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
    return 1
}

func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    if (pickerView.tag == 1){
        return picker1Options.count
    }else{
        return picker2Options.count
    }
}

func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    if (pickerView.tag == 1){
        return "\(picker1Options[row])"
    }else{
        return "\(picker2Options[row])"
    }
}
@IBAction func oneShow(sender: AnyObject) {
    self.one.hidden = false
}

@IBAction func twoShow(sender: AnyObject) {

    self.Two.hidden = false
}

}

The output of the above code is:

The Issues:

As you can see in the above image that although I can show different picker views they are not properly displayed. I would like each picker view to be displayed at the end bottom of the screen.

Also please note that I am using self.picker.hidden = true to hide and unhide the picker views. Is this the correct way of hiding and unhiding picker views? Is there a better way of achieving this functionality?

On the storyboard should I place picker views on top of each other at the bottom of the screen so they always appear at bottom on triggering self.picker.hidden = false ?

Whats the proper way of implementing multiple picker views on storyboard?

Any help will be greatly appreciated.

Answer 1

You make some big concept mistake in the usage of the UiPickerView:

1.You need only one UIPickerView in your storyboard.

2.You need only one data source for the picker view (on button click you gonna change the values in it).

I make an example by your code but be aware there will be some mistakes because i write it on NotePad++ (i don't have Mac in front of me).

    class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    @IBOutlet var picker: UIPickerView!

    var pickerOptions1 = [String]()
    var pickerOptions2 = [String]()
    var pickerOptions3 = [String]()

    var dataSource;

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        pickerOptions1 = ["Option 1","Option 2","Option 3","Option 4","Option 5"]
        pickerOptions2 = ["Item 1","Item 2","Item 3","Item 4","Item 5"]
        pickerOptions3 = ["Something 1","Something 2","Something 3","Something 4","Something 5"]

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSource.count;
    }

    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return "\(dataSiurce[row])"
    }

    @IBAction func showPickerOne(sender: AnyObject) {
        dataSource = pickerOptions1;
        [self.picker reloadAllComponents];
    }

    @IBAction func showPickerTwo(sender: AnyObject) {
        dataSource = pickerOptions2;
         [self.picker reloadAllComponents];
    }

    @IBAction func showPickerThree(sender: AnyObject) {
        dataSource = pickerOptions3;
         [self.picker reloadAllComponents];
    }

    }

I hope this will help you understand the concept of pickers in ios.

Answer 2

You can take textfield instead of buttons and add picker view as inputview of textfield. And based on the textfield you can change the contents of array and displayed in pickerview.

Please find image in that i used age picker and team picker.

EDIT:

-(void) viewWillAppear:(BOOL)animated
{
    [self.PickerVw removeFromSuperview];
    txtAge.inputView = self.PickerVw;
    txtSportName.inputView = self.PickerVw;
}

#pragma mark - UItextfield delegate Methods
-(void)textFieldDidBeginEditing:(UITextField *)textField
{
    arr1 = [NSMutableArray new];
    if (textField.tag == 1)
    {
        int min =  9;
        int max = 100;
        for (int i = min ; i < max; i++)
        {
         [arr1 addObject:[NSString stringWithFormat:@"%d",(i+1)]];
        }
        [textField becomeFirstResponder];
        self.picker.tag = 1;
     }
    if (textField.tag == 2)
    {
        [self.picker selectRow:0 inComponent:0 animated:NO];

        arr1 = [arrSports mutableCopy];
        [textField becomeFirstResponder];

        self.picker.tag = 2;

    }
[self.picker reloadAllComponents];
} 

Answer 3

Here's a sample code on how Apple shows/hides a datePicker which should point you to the right direction.