How to use one pickerview for multiple textfield?

Question

I am trying to build something (I am new to Xcode and swift) where I can choose a meal for a day from an array with Picker View, and I want my choice to display in that specific day's textfield. I have got this working, but for 1 day only. How can I get this same function working for all (7) days?

I managed to get the picker view when click on next textfield as well (Tuesday), but as I choose from the list the Mondays textfield will follow what I am doing for Tuesday. They are mirrored. I do get that I should probably make something to get thatTuesday-Picker unique somehow, but that's where Im stuck. I don't know what to change/write. Anyone with any ideas? I have googled around and find a lot regarding picker views but nothing for how they can been used in this specific way...

//
//  ViewController.swift
//  dropdown
//
//  Created by -- on 2019-08-26.
//  Copyright © 2019 --. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var monday: UITextField!
@IBOutlet weak var tuesday: UITextField!
@IBOutlet weak var wednesday: UITextField!
@IBOutlet weak var thursday: UITextField!
@IBOutlet weak var friday: UITextField!
@IBOutlet weak var saturday: UITextField!
@IBOutlet weak var sunday: UITextField!

// the menu
let Menu = ["Palak Paner",
            "Spagetti Köttfärssås",
            "Thai Haloumi",
            "Thai Quorn",
            "Linssoppa",
            "SparrisPasta",
            "Gröt",
            "Gulasch"]

let tuesdayMenu = ["Palak Paner",
            "Spagetti Köttfärssås",
            "Thai Haloumi",
            "Thai Quorn",
            "Linssoppa",
            "SparrisPasta",
            "Gröt",
            "Gulasch"]


//When a menu from the list is selected, it will be shown as a string

var mondaySelectedMenu: String?
var tuesdaySelectedMenu: String?



override func viewDidLoad() {
    super.viewDidLoad()
    //Call on these functions when loaded
    createMondayMenuPicker()
    createTuesdayMenuPicker()
    createToolbar()
}

// This is the pickerView

func createMondayMenuPicker() {
    let mondayMenuPicker = UIPickerView()
    mondayMenuPicker.delegate = self
    monday.inputView = mondayMenuPicker
}

func createTuesdayMenuPicker() {
    let tuesdayMenuPicker = UIPickerView()
    tuesdayMenuPicker.delegate = self
    tuesday.inputView = tuesdayMenuPicker
}



// This is the "DONE" button
func createToolbar() {
    let toolBar = UIToolbar()
    toolBar.sizeToFit()

    let doneButton = UIBarButtonItem(title: "DONE", style: .plain, target: self, action: #selector(ViewController.dismissKeyboard))
    toolBar.setItems([doneButton], animated: false)
    toolBar.isUserInteractionEnabled = true

    monday.inputAccessoryView = toolBar
    tuesday.inputAccessoryView = toolBar
}


@objc func dismissKeyboard() {
    view.endEditing(true)

}

}


// This is the details for the pickerView
extension ViewController: UIPickerViewDelegate, UIPickerViewDataSource {
func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}

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


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

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

    mondaySelectedMenu = Menu[row]
    tuesdaySelectedMenu = tuesdayMenu[row]
    monday.text = mondaySelectedMenu
    tuesday.text = tuesdaySelectedMenu
}



}

So, I want to call on that same array when click on all seven days but I want to display the unique choices for everyday chosen from that list. Any ideas? Thanks a lot!

chirag90 · Accepted Answer · 2019-09-10T10:48:59.933

One way to achieve this is to do using the below approach. I have separated out toolbar functionality into its own class.

Create a new class pickerview's toolbar (in this case i have called ToolbarPickerView.swift)

import UIKit

protocol ToolbarPickerViewDelegate: class {
    func didTapDone()
    func didTapCancel()
}

class ToolbarPickerView: UIPickerView {

    public private(set) var toolbar: UIToolbar?
    public weak var toolbarDelegate: ToolbarPickerViewDelegate?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.commonInit()
    }

    private func commonInit() {
        let toolBar = UIToolbar()
        toolBar.barStyle = UIBarStyle.default
        toolBar.isTranslucent = true
        toolBar.tintColor = .black
        toolBar.sizeToFit()

        let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(self.doneTapped))
        let spaceButton = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let cancelButton = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(self.cancelTapped))

        toolBar.setItems([cancelButton, spaceButton, doneButton], animated: false)
        toolBar.isUserInteractionEnabled = true

        self.toolbar = toolBar
    }

    @objc func doneTapped() {
        self.toolbarDelegate?.didTapDone()
    }

    @objc func cancelTapped() {
        self.toolbarDelegate?.didTapCancel()
    }
}

In ViewController

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var monday: UITextField!
    @IBOutlet weak var tuesday: UITextField!
    @IBOutlet weak var wednesday: UITextField!
    @IBOutlet weak var thursday: UITextField!
    @IBOutlet weak var friday: UITextField!
    @IBOutlet weak var saturday: UITextField!
    @IBOutlet weak var sunday: UITextField!

    var daysArray = [UITextField]()

    let pickerView = ToolbarPickerView()

    let Menu = ["Palak Paner",
                "Spagetti Köttfärssås",
                "Thai Haloumi",
                "Thai Quorn",
                "Linssoppa",
                "SparrisPasta",
                "Gröt",
                "Gulasch"]

    var selectedMenu : String?

    override func viewDidLoad() {
        super.viewDidLoad()

        setupDelegateForPickerView()
        setupDelegatesForTextFields()
    }

    func setupDelegatesForTextFields() {
        //appending textfields in an array
        daysArray += [monday, tuesday, wednesday, thursday, friday, saturday, sunday]
        //using the array to set up the delegates, inputview for pickerview and also the inputAccessoryView for the toolbar
        for day in daysArray {
            day.delegate = self
            day.inputView = pickerView
            day.inputAccessoryView = pickerView.toolbar
        }
    }

    func setupDelegateForPickerView() {
        pickerView.dataSource = self
        pickerView.delegate = self
        pickerView.toolbarDelegate = self
    }
}

Create an extension for textfield delegate

extension ViewController : UITextFieldDelegate {
    func textFieldDidBeginEditing(_ textField: UITextField) {
        self.pickerView.reloadAllComponents()
    }
}

Extension for pickerview and toolbar

extension ViewController : UIPickerViewDelegate, UIPickerViewDataSource {
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return self.Menu.count
    }

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

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return self.Menu[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        // Check if the textfield isFirstResponder.
        if monday.isFirstResponder {
            monday.text = self.Menu[row]
        } else if tuesday.isFirstResponder {
            tuesday.text = self.Menu[row]
        } else if wednesday.isFirstResponder {
            wednesday.text = self.Menu[row]
        } else if thursday.isFirstResponder {
            thursday.text = self.Menu[row]
        } else if friday.isFirstResponder {
            friday.text = self.Menu[row]
        } else if saturday.isFirstResponder {
            saturday.text = self.Menu[row]
        } else if sunday.isFirstResponder {
            sunday.text = self.Menu[row]
        } else {
        //log errors
        }
    }
}

extension ViewController: ToolbarPickerViewDelegate {

    func didTapDone() {
//      let row = self.pickerView.selectedRow(inComponent: 0)
//      self.pickerView.selectRow(row, inComponent: 0, animated: false)
//      selectedMenu = self.Menu[row]
        self.view.endEditing(true)
    }

    func didTapCancel() {
       self.view.endEditing(true)
    }
}

PickerView's didSelectRow function can be simplified by changing it to below

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

        for day in daysArray {
            if day.isFirstResponder {
                day.text = self.Menu[row]
            }
        }
    }

Hopefully this answer will help you.

Hi, sorry, I haven’t had any time to try yet but I will hopefully to night (Friday). Thanks a lot! — Andreas Sjöstedt, Sep 06 '19 at 04:24
hi, now I have tried this, first by retype everything in that class you made, but it only gave me a lot of error messages and then I simply copied what you wrote and still a lot of error messages and Im not sure what to do with them... — Andreas Sjöstedt, Sep 10 '19 at 10:36
https://www.dropbox.com/s/fi9b1exv3ldjrkx/Sk%C3%A4rmavbild%202019-09-10%20kl.%2012.38.30.png?dl=0 — Andreas Sjöstedt, Sep 10 '19 at 10:41
@AndreasSjöstedt in the `ToolbarPickerView` you need to add `import UIKit` check the code. — chirag90, Sep 10 '19 at 11:10
Brilliant, can you mark it as answer and upvote it if possible. — chirag90, Sep 10 '19 at 12:59
of course, Im new to stack overflow so may I ask how and where? =) — Andreas Sjöstedt, Sep 11 '19 at 06:12

score 0 · Answer 2 · edited Sep 03 '19 at 06:10

Create a common picker class like below:

class PKMultiPicker: UIPickerView, UIPickerViewDelegate, UIPickerViewDataSource {

internal typealias PickerDone = (_ firstValue: String, _ secondValue: String) -> Void
private var doneBlock : PickerDone!

private var firstValueArray : [String]?
private var secondValueArray = [String]()
static var noOfComponent = 2


class func openMultiPickerIn(_ textField: UITextField? , firstComponentArray: [String], secondComponentArray: [String], firstComponent: String?, secondComponent: String?, titles: [String]?, toolBarTint: UIColor = UIColor.black, doneBlock: @escaping PickerDone) {

    let picker = PKMultiPicker()
    picker.doneBlock = doneBlock

    picker.openPickerInTextField(textField, firstComponentArray: firstComponentArray, secondComponentArray: secondComponentArray, firstComponent: firstComponent, secondComponent: secondComponent, toolBarTint: toolBarTint)

    if titles != nil {
        let label = UILabel(frame: CGRect(x: UIScreen.main.bounds.size.width/4 - 10, y: 0, width: 100, height: 30))
        label.text = titles![0].uppercased()
        label.font = UIFont.boldSystemFont(ofSize: 18)
        picker.addSubview(label)

        if PKMultiPicker.noOfComponent > 1 {
            let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 30))
            label.text = titles![1].uppercased()
            label.font = UIFont.boldSystemFont(ofSize: 18)
            picker.addSubview(label)
        } else {
            label.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 30)
            label.textAlignment = NSTextAlignment.center
        }
    }
}

private func openPickerInTextField(_ textField: UITextField?, firstComponentArray: [String], secondComponentArray: [String], firstComponent: String?, secondComponent: String?, toolBarTint: UIColor = UIColor.black) {

    firstValueArray  = firstComponentArray
    secondValueArray = secondComponentArray

    self.delegate = self
    self.dataSource = self


    let cancelButton = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(pickerCancelButtonTapped))
    cancelButton.tintColor = toolBarTint
    let doneButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.done, target: self, action: #selector(pickerDoneButtonTapped))
    doneButton.tintColor = toolBarTint
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action:nil)

    let toolbar = UIToolbar()
    toolbar.sizeToFit()
    let array = [cancelButton, spaceButton, doneButton]
    toolbar.setItems(array, animated: true)
    toolbar.backgroundColor = UIColor.lightText

    textField?.inputView = self
    textField?.inputAccessoryView = toolbar

    let index = self.firstValueArray?.index(where: {$0.lowercased() == (firstComponent ?? "").lowercased() })
    self.selectRow(index ?? 0, inComponent: 0, animated: true)


    if PKMultiPicker.noOfComponent > 1 {
        let index1 = self.secondValueArray.index(where: {$0.lowercased() == (secondComponent ?? "").lowercased() })
        self.selectRow(index1 ?? 0, inComponent: 1, animated: true)
    }
}

@IBAction private func pickerCancelButtonTapped(){
    UIApplication.shared.keyWindow?.endEditing(true)
}

@IBAction private func pickerDoneButtonTapped(){

    UIApplication.shared.keyWindow?.endEditing(true)

    let index1 : Int?
    let firstValue : String?
    index1 = self.selectedRow(inComponent: 0)

    if firstValueArray?.count == 0{return}
    else{firstValue = firstValueArray?[index1!]}

    var index2 :Int!
    var secondValue: String!
    if PKMultiPicker.noOfComponent > 1 {
        index2 = self.selectedRow(inComponent: 1)
        secondValue = secondValueArray[index2]
    }
    self.doneBlock((firstValue ?? ""), (secondValue ?? ""))
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

    if component == 0 {
        return firstValueArray!.count
    }
    return secondValueArray.count
}

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return PKMultiPicker.noOfComponent
}


func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

    switch component {

    case 0:
        return firstValueArray?[row]
    case 1:
        return secondValueArray[row]
    default:
        return ""
    }
}
}

Example Code to open picker and manage selection, there are some more options, you can manage number of components also:-

  PKMultiPicker.noOfComponent = 1
  PKMultiPicker.openMultiPickerIn(textField, firstComponentArray: ["Apple", "Mango","Grapes","Pine apple"], secondComponentArray: [], firstComponent: textField.text, secondComponent: nil, titles: nil, toolBarTint: AppColors.themeGreen) { (firstSelect, secondSelect) in
                        print("first select : \(firstSelect)")
                        textField.text = firstSelect // you can set text here to the respective text field.

                    }

see here complete multiple picker class https://github.com/bestiosdeveloper/PKMultiPicker/blob/master/PKMultiPicker.swift — Pawan Kumar, Sep 03 '19 at 04:07

score 0 · Answer 3 · answered Mar 11 '20 at 07:29

Here @pawan_kumar has described a way for using same picker view for multiple textfields with same data. but you can bind different data sources for that as well. https://stackoverflow.com/a/60631018/10505343 has a sample code for that. here I use UITextField.isFirstResponder to decide what data should be loaded to the picker view. Hope this answer also will be helpful for you.

How to use one pickerview for multiple textfield?

3 Answers3