UIPickerView best practice?

Question

One short question: on a registration process I would like to ask the user to choose a value from a list of values.

Is it the right way to use a view Controller adding there all text fields and for the values a picker view? As the picker view needs so much space in between the text fields area I wonder what the best practice in this case would be?

this is my code so far:

class RegisterViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource{

@IBOutlet weak var gradeTextField: UITextField!
@IBOutlet weak var gradePicker: UIPickerView!

let gradePickerValues = ["5. Klasse", "6. Klasse", "7. Klasse"]

func numberOfComponentsInPickerView(pickerView: UIPickerView!) -> Int{
    return 1
}
func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{
    return gradePickerValues.count
}
func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String! {
    return gradePickerValues[row]
}
func pickerView(pickerView: UIPickerView!, didSelectRow row: Int, inComponent component: Int){
    gradeTextField.text = gradePickerValues[row]
    self.view.endEditing(true)
}

override func viewDidLoad() {
    super.viewDidLoad()

    statusMessageLabel.hidden = true

    gradePicker.dataSource = self
    gradePicker.delegate = self
    gradePicker.hidden = true

    gradeTextField.inputView = UIPickerView()
    gradeTextField.text = gradePickerValues[0]

}

The pickerview is hidden at the beginning and appears only when I select the text field, this is fine so far... But the the picker view is empty...

Answer 1

It depends on controller appearance. If there only one choose action per screen it will be better to put Table View on it and selected row will be current selection.

If screen has multiply fields, that user should act with, then, in my opinion, it's better to put label + button above it and when user press this button you just shows Picker View from screen bottom. When user select any row in Picker View you change label text, but don't hide picker itself, it should be done by pressing "Done" button you place above.

Hope this helps.

---

Update:

Your problem because you just forget to set dataSource property of UIPickerView

Just do: gradePicker.dataSource = self in viewDidLoad()

And don't forget to implements protocol here: class RegisterViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource

---

Update 2:

Finally made it. If you add UIPickerView in inputView of your textFiled, then It should NOT be in IB. So you could remove it from storyboard (or .xib, if you use it).

Then change code to be something like this:

class RegisterViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var gradeTextField: UITextField!
    var gradePicker: UIPickerView!

    let gradePickerValues = ["5. Klasse", "6. Klasse", "7. Klasse"]

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

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

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

    func pickerView(pickerView: UIPickerView!, didSelectRow row: Int, inComponent component: Int){
        gradeTextField.text = gradePickerValues[row]
        self.view.endEditing(true)
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        gradePicker = UIPickerView()

        gradePicker.dataSource = self
        gradePicker.delegate = self

        gradeTextField.inputView = gradePicker
        gradeTextField.text = gradePickerValues[0]
    }
}

Answer 2

First set delegate

UIPickerViewDataSource,UIPickerViewDelegate

set IBOutlet for UIPickerView

@IBOutlet weak var pickerView: UIPickerView!

Take an array for data

var arrayFruits = [String]()

Write this code on viewDidLoad()

  arrayFruits = ["Apple","Banana","Orange","Grapes","Watermelon"]
  self.pickerView.dataSource = self
  self.pickerView.delegate = self

Write picker view delegate methods:

 //MARK: - Pickerview method
func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return arrayFruits.count
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    return arrayFruits[row]
}
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    self.labelFruit.text = arrayFruits[row]
}

100% working and tested