UI Picker View As Input Type For UI Text Field In iOS (Swift 3 + Xcode 8)

UI Picker View As Input Type For UI Text Field In iOS

Hi, In this post, I’ll show you how to create an UI Picker View for UI Text Field in iOS. I am using Swift 3 and Xcode 8 for this tutorial.

So, let’s start and see how to do it..

First of all, open your Xcode and create a Single View Application.

Now, open your main.storyboard and drag a textfield on your view controller. Add some constraints on this text field as shown in the picture below:

Now, create an outlet for your added text field. For that make sure to open up the assistant editor and ctrl+drag the UI textfield to your ViewController.swift file. 

Once its done, close the assistant editor and open your ViewController.swift file. Here, first add UIPickerViewDataSource and UIPickerViewDelegate methods in your class declaration as shown below:

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate

Now, first create your picker view object. 

var picker = UIPickerView()

Also, create an array with some elements. We’ll use this array elements as an input choice for our users for that specific textfield.

var country = ["India", "USA", "Germany", "Australia", "Spain", "China", "Russia"]

Now, we need to add 4 functions in our code to setup our picker view. So, just copy and paste these 4 functions in your code:

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

        return 1            //return number of components for your picker view

    }

    

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

        return country.count            //returning number of elements of our array as number of rows of our picker view.

    }

    

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

        return country[row]     //setting array's elements as title for our picker view rows

    }

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

        countryTF.text = country[row]       //setting the selected array element as text for our textfield

        self.view.endEditing(false)

    }

I’ve added comments in each of these function codes for your better understanding.

Once its done, don’t forget to assign your picker view as input type for your textfield in viewDidLoad() method. Also, make sure to add picker view delegate and datasource methods equal to self here.

override func viewDidLoad() {

        super.viewDidLoad()

        

        picker.delegate = self

        picker.dataSource = self

        

        countryTF.inputView = picker

    }

Now, run your app and you’ll get the picker view populated whenever you click on your textfield. 

Here’s the full code for your reference:

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    

    var country = ["India", "USA", "Germany", "Australia", "Spain", "China", "Russia"]

    var picker = UIPickerView()

    @IBOutlet var countryTF: UITextField!

    

    override func viewDidLoad() {

        super.viewDidLoad()

        

        picker.delegate = self

        picker.dataSource = self

        

        countryTF.inputView = picker

    }

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

        return 1            //return number of components for your picker view

    }

    

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

        return country.count            //returning number of elements of our array as number of rows of our picker view.

    }

    

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

        return country[row]     //setting array's elements as title for our picker view rows

    }

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

        countryTF.text = country[row]       //setting the selected array element as text for our textfield

        self.view.endEditing(false)

    }

}

I hope this post may help someone, somehow!

If you've any doubts or need any further help, then do message me in comments section below and I'll try to respond you as soon as possible.

Thanks for your time. Keep coding...