Add PickerView in UITextField using Swift 3

Sometimes we need to give the single selection from multiple data on UItextfield , when the user tap on UIText Field. For this there is new accessory view provided by swift through we can add UIPicker view and UITextfield.

For doing this , we need to follow some steps:

open .swift file and

1: create a outlet of UITextfiled

ex:

@IBOutlet weak var withoutAirGoCountryTextField1: UITextField!

2: Now create the IBAction of UITextfield and set event didbeginediting. and set the picker view like that

ex:

@IBAction func GoCountryWithoutIntelair(_ sender: Any) {
    let thePicker = UIPickerView()
    thePicker.tag = 1000;
    withoutAirGoCountryTextField1.inputView = thePicker
    thePicker.delegate = self

}

@IBAction func GoCountryWithoutIntelair(_ sender: Any) {

let thePicker = UIPickerView()

thePicker.tag = 1000;

withoutAirGoCountryTextField1.inputView = thePicker

thePicker.delegate = self

}

3: Now its time to add the toolbar on this picker view so we can give some functionality like cancel or anything;

for this go to ViewDidload method and write that code:

 let toolBar1 = UIToolbar(frame: CGRect(x: 0, y: self.view.frame.size.height/6, width: self.view.frame.size.width, height: 40.0))
        toolBar1.layer.position = CGPoint(x: self.view.frame.size.width/2, y: self.view.frame.size.height-20.0)
        toolBar1.barStyle = UIBarStyle.default
        toolBar1.backgroundColor = UIColor.lightGray
        let flexSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)
        let okBarBtn1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.cancel, target: self, action: #selector(GoCountriesSearch.donePressed))
        toolBar1.setItems([flexSpace,flexSpace,flexSpace,okBarBtn1], animated: true)
        withoutAirGoCountryTextField1.inputAccessoryView = toolBar1

let toolBar1 = UIToolbar(frame: CGRect(x: 0, y: self.view.frame.size.height/6, width: self.view.frame.size.width, height: 40.0))

toolBar1.layer.position = CGPoint(x: self.view.frame.size.width/2, y: self.view.frame.size.height-20.0)

toolBar1.barStyle = UIBarStyle.default

toolBar1.backgroundColor = UIColor.lightGray

let flexSpace = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.flexibleSpace, target: self, action: nil)

let okBarBtn1 = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.cancel, target: self, action: #selector(GoCountriesSearch.donePressed))

toolBar1.setItems([flexSpace,flexSpace,flexSpace,okBarBtn1], animated: true)

withoutAirGoCountryTextField1.inputAccessoryView = toolBar1

Note: here

GoCountriesSearch is existing swift class name and their method

“donePressed” ,Now its time to define this method:

func donePressed(_ sender: UIBarButtonItem) {
    withoutAirGoCountryTextField1.resignFirstResponder()
}

func donePressed(_ sender: UIBarButtonItem) {

withoutAirGoCountryTextField1.resignFirstResponder()

}

it will remove the picker view .

4: Now we have to write the delegate method of UIPickerView:

a: in class add two delegate of picker view

ex:

class GoCountriesSearch: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource {
}

1 2	class GoCountriesSearch: UIViewController,UIPickerViewDelegate, UIPickerViewDataSource { }

and their delegate metod:

func numberOfComponents(in pickerView: UIPickerView) -> Int {
    return 1;
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    if pickerView.tag == 1000 {
      return tempContinentArray.count;
   }else{
 return 0; 
}
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    if pickerView.tag == 1000{
            var dict = tempContinentArray1[row] String;
            return dict
        
    }
   else {
    return ""
  }
}

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

return 1;

}

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

if pickerView.tag == 1000 {

return tempContinentArray.count;

}else{

return 0;

}

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

if pickerView.tag == 1000{

var dict = tempContinentArray1[row] String;

return dict

}

else {

return ""

}

b: Now set the data to UItextField:

func pickerView( _ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    if pickerView.tag == 1000{
         var dict = tempContinentArray[row]
         withoutAirGoCountryTextField1.text = dict as? String
}
}

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

if pickerView.tag == 1000{

var dict = tempContinentArray[row]

withoutAirGoCountryTextField1.text = dict as? String

}

5: Now when you scroll the UIPicker View it automatically set the data to UITextField

6: Now the last and important point , How to fetch the selected row in UIView for this

a: create a button like findData

@IBAction func findData(_ sender: Any) {
}

1 2	@IBAction func findData(_ sender: Any) { }

and write this code:

if withoutAirGoCountryTextField1.text != ""{
 let countryPickerView = (withoutAirGoCountryTextField1.inputView)?.viewWithTag(2000) as! UIPickerView;
       let row = countryPickerView.selectedRow(inComponent: 0)
   // you can get the row position
}

if withoutAirGoCountryTextField1.text != ""{

let countryPickerView = (withoutAirGoCountryTextField1.inputView)?.viewWithTag(2000) as! UIPickerView;

let row = countryPickerView.selectedRow(inComponent: 0)

// you can get the row position

}

Happy coding

add pickerview with UITextField attractive UITextfield for selecting the one data from multiple swift 3

kunal prasad

26 Oct, 2021
Updated by - Kushal Varshney
30 Jun, 2017
Updated by - kunal prasad

. . .

Add PickerView in UITextField using Swift 3

Leave a Comment Cancel Reply

Message Sent!