How to use UITableView for TextField input view

Question

I currently have an app which uses UIPickerViews to allow users to select which answer they want for a text field (to avoid spelling mistakes etc).

However, I have found that the UIPickerView isn't really what I want to use because I haven't had great feedback from it when testing.

I have done some research into how to use a UITableView for text field inputs instead, so when the user clicks the Textfield, the user segues to a UITableView with the same options which would be provided by the UIPickerView. Once they click the cell with the option they are looking for it would segue back to the form with the result chosen inside the text field. I thought this would be a better user experience as I could also implement the search to help users narrow down the option they require quicker.

I have been trying to get this to work for a while now, but I'm quite new at coding and haven't been able to crack it yet. I would just like advice on how to approach this? I'm using Swift and the Storyboard to create my app.

Would I need to create a separate ViewController with a UITableView that loads the options and then move the value back to the form once the cell is clicked?

I can post the code I have for my UIPickerView page if required. — Daniel Jones, Apr 15 '18 at 12:08
You could always try using Eureka (https://github.com/xmartlabs/Eureka). It makes this sort of stuff quite simple. Otherwise the last way you suggested works - create a separate vc and use a delegate pattern to send data back/use a common model between the VCs. — Tometoyou, Apr 15 '18 at 12:36
Its very simple. First learn how to use UITableView to show some data. Once done, then you can check the below link to pass data from TableViewController to previous ViewController with the selected item. https://stackoverflow.com/questions/5210535/passing-data-between-view-controllers — Kamran, Apr 15 '18 at 12:38

score 1 · Accepted Answer · answered Apr 16 '18 at 05:57

One approach would be to use a table view in separate view controller. lets call it choiceVC and pass data which text field was tapped. Then send the data back to your form to show what user has selected.

Follow these steps

Detect user tap on text field and segue to choiceVC by implementing this delegate function of UITextField

func textFieldShouldReturn(_ textField: UITextField) -> Bool {

  textField.resignFirstResponder()
  //push your choiceVC and pass data
  var textFeildTapped = ""
  //note: chooseGameTextField should be text field's outlet
  if textField == chooseGameTextField{
    textFeildTapped = "games"
  }else if textField == chooseActiviyTextField {
    textFeildTapped = "activiy"
  } 

//first set identifier of your view controller by going to identity inspector and setting the value StoryBoard ID
if let controller = storyboard?.instantiateViewController(withIdentifier: "choiceVC") as? ProductDetailVc{
  //pass which text field was tapped
  controller.choicesToShow = textFeildTapped
  navigationController?.pushViewController(controller, animated: true)
}
return true

}

Note: choiceVC should have a variable "choicesToShow" of type string

in viewdidload of choiceVC check the variable

if choicesToShow == "games" {
 //populate your table view with games. 
}else {
 //check for other cases and proceed accordingly
 //activiy, console etc
}

Implement didSelect delegate method of UITableView

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
 //Pass data back to your form using **delegate pattern**. see link in notes below
}

Notes:

See screen shot of setting storyBoard ID
see how to implement table view if you dont know https://stackoverflow.com/a/33234181/7698092
See how to pass data backward using delegate pattern https://medium.com/@mayooresan/passing-data-between-viewcontrollers-via-delegate-protocols-4ecde4b167de

Thank you very much, I did implement it in this way before I saw your reply but it's almost exactly the same. — Daniel Jones, Apr 20 '18 at 18:05

score 1 · Answer 2 · edited Oct 22 '21 at 01:21

I hope this code work for you. it's wroking for me.

First view controller for textfiled form where you want to open tableview.for that use textfield Delegate.

First View Controller

 func doSomething(text: UITextField, with data: String) {
            text.text = data
        }
        
    func textFieldDidBeginEditing(_ textField: UITextField) {
        let objGametableVC = self.storyboard?.instantiateViewController(withIdentifier: "GametableVC") as! GametableVC;
        objGametableVC.delegate = self
        objGametableVC.selectedTextField = textField
        if textField == txtActivity{
            objGametableVC.tblData.removeAll()
            objGametableVC.tblData = ["act1","act2"]
        }
        else if textField == txtGameName{
            objGametableVC.tblData.removeAll()
            objGametableVC.tblData = ["gam1","game2"]
        }
        textField.resignFirstResponder()
        self.navigationController?.pushViewController(objGametableVC, animated: true);
    }

Second view Controller For tableview show and pass data from second to first controller

Second view Controller

var delegate: Delegate?

var tblData: [String] = [String]()

var selectedTextField:UITextField? = nil

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return tblData.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let tblcell = tableView.dequeueReusableCell(withIdentifier: "gamelblCell", for: indexPath) as! gamelblCell
    tblcell.lblName.text = tblData[indexPath.row]
    return tblcell
}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let tblcell = tableView.cellForRow(at: indexPath) as! gamelblCell
    let data = tblcell.lblName.text
    delegate?.doSomething(text: selectedTextField!, with: data!)
    self.navigationController?.popViewController(animated: true)
}

score 1 · Answer 3 · answered Apr 16 '18 at 08:02

1

If you are looking for an alternative for picker view to select options you can use dropdown like controls Eg.

I hope these libraries can solve your issues, best of luck

answered Apr 16 '18 at 08:02

Maneesh M

193
1
10

How to use UITableView for TextField input view

3 Answers3

Follow these steps

Notes: