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.