How to use two UIPickerViews in one view controller?

Question

I have two UIPickerControllers in one view controller. I can get one to work, but when I add a second, my app crashes. Here is the code I use for one picker view:

import UIKit

class RegisterJobPosition: UIViewController, UIPickerViewDelegate {

    @IBOutlet weak var positionLabel: UILabel!

    var position = ["Lifeguard", "Instructor", "Supervisor"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

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

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

    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String!
    {
        return position[row]
    }

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {        
        positionLabel.text = position[row]
    }
}

Now, how can I get a second picker to work? Say my second picker view is called location (the other one is called position). I tried duplicating the code within the picker view methods for location but it doesn't work.

Answer 1

Here is my solution:

• in the storyboard, add two UIPickerView instances to your view
• set the first picker's tag as 1 and set 2 for the second picker under the "Attributes Inspector"
• control + drag from each picker to the top yellow view controller icon and choose dataSource. Repeat the same choosing delegate

• add UIPickerViewDataSource and UIPickerViewDelegate to your view controller:

  class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
  

• in your view controller class, create empty arrays for the pickers:

  var picker1Options = []
  var picker2Options = []
  

• In viewDidLoad(), populate the arrays with your content:

  picker1Options = ["Option 1","Option 2","Option 3","Option 4","Option 5"]
  picker2Options = ["Item 1","Item 2","Item 3","Item 4","Item 5"]
  

• implement the delegate and data source methods:

  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])"
      }
  }
  

Answer 2

Based on the information I have in the question, I'd say that you need to set up the data source & delegate methods to handle the ability to distinguish between which picker instance is calling them.

Using the tag property on the picker view is one strategy.

There should be some if/else or switch statements in the methods that have varying logic depending on whether it's the location or the position picker that's being referenced.

Answer 3

I found this to work.

class SecondViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var textbox1: UILabel!
    @IBOutlet weak var textbox2: UILabel!

    @IBOutlet weak var dropdown1: UIPickerView!
    @IBOutlet weak var dropdown2: UIPickerView!

    var age = ["10-20", "20-30", "30-40"]
    var Gender = ["Male", "Female"]

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

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        var countrows : Int = age.count
        if pickerView == dropdown2 {
            countrows = self.Gender.count
        }

        return countrows
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        if pickerView == dropdown1 {
            let titleRow = age[row]
             return titleRow
        } else if pickerView == dropdown2 {
            let titleRow = Gender[row]
            return titleRow
        }

        return ""
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        if pickerView == dropdown1 {
            self.textbox1.text = self.age[row]
        } else if pickerView == dropdown2 {            
            self.textbox2.text = self.Gender[row]
        }
    }
}

Answer 4

My background is in Android but my answer is very OOP. I would suggest creating different classes to implement the DataSource and Delegate like this:

class PositionDataSourceDelegate : NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
   var position = ["Lifeguard", "Instructor", "Supervisor"]
   var selectedPosition : String?

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

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

    func pickerView(pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
       return position[row]
    }

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
       selectedPosition = position[row]
    }
}

and then another one for the Location:

class LocationDataSourceDelegate : NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
   var location = ["Up", "Down", "Everywhere"]
   var selectedLocation : String?

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

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

    func pickerView(pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
         return location[row]
    }

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedLocation = location[row]
   }
}

then in your RegisterJobPosition you need to create an instance of each:

let positionDSD = PositionDataSourceDelegate()
let locationDSD = LocationDataSourceDelegate()

and assign them to the pickers like this:

positionPicker.dataSource = positionDSD
positionPicker.delegate = positionDSD
locationPicker.dataSource = locationDSD
locationPicker.delegate = locationDSD

and you can access the selected position and location using:

positionDSD.selectedPosition 
locationDSD.selectedLocation

Hope this helps you and others and I'm also hoping for some constructive comments of why this is not "swifty"

Answer 5

I think the biggest issue and different to Java is that Java easily allow for attributes to be passed through the constructor. e.g. you could declare class LocationDataSourceDelegate as generic and call it genericDataSourceDelegate and make the constructor accept and Array public genericDataSourceDelegate (String data[]) and be able to make one class where could just simply create objects of. You just instantiate it and pass location the constructor like genericDataSourceDelegate (location)

The problem with your model you will have to create as many delegate classes in one program which is a strain to your compiler.

Answer 6

You should NEVER use tags!!!!!

The best way for me was:

1. Create an enum, for example MyPickerViewType

    enum MyPickerViewType {
        case first
        case second
    }

2. Create CustomPickerView class that conforms to UIPickerView and add type parameter

    class CustomPickerView: UIPickerView {
        let type: MyPickerViewType
    
        init(type: MyPickerViewType) {
            self.type = type
            super.init(frame: .zero)
        }
    
        required init?(coder: NSCoder) {
            fatalError("init(coder:) is not supported")
        }
    }

3. Initialise custom pickerViews in UIViewController

    private lazy var firstPickerView: TimeLogCardPickerView = {
        let pickerView = TimeLogCardPickerView(type: .first)
        pickerView.delegate = self
        pickerView.dataSource = self
        return pickerView
    }()
    
    private lazy var secondPickerView: TimeLogCardPickerView = {
        let pickerView = TimeLogCardPickerView(type: .second)
        pickerView.delegate = self
        pickerView.dataSource = self
        return pickerView
    }()

4. Usage

    extension ViewController: UIPickerViewDelegate, UIPickerViewDataSource {
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return 1
        }
    
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            let customPickerView = pickerView as? CustomPickerView

            switch customPickerView?.type {
            case .first:
                return 2
            case .second:
                return 5
            }
        }
    
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            let customPickerView = pickerView as? CustomPickerView

            switch customPickerView?.type {
            case .first:
                return firstTitleArray[row]
            case .second:
                return secondTitleArray[row]
            }
        }
    }