Multiple Component or Column PickerView Example iOS Swift 4

Hello guys in this article we are going to create normal UIPickerView with an multi component.

We are going to collect the user's height from the multi picker view, which looks like as below image:

Let's get started, first create new Xcode project.

Open ViewController.swift file and the following required properties:

let textField = UITextField()

var pickerView: UIPickerView!

let feetList = Array(3...9)

let inchList = Array(0...11)

let numberOfComponents = 4

We created properties for textField and picker View, two arrays for height stats and numberOfComponents for picker component count.

First we add UITextField, so add the following lines of code inside viewDidLoad() method:

view.addSubview(textField)
textField.translatesAutoresizingMaskIntoConstraints = false
textField.topAnchor.constraint(equalTo: view.topAnchor, constant: 80).isActive = true
textField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
textField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
textField.heightAnchor.constraint(equalToConstant: 45).isActive = true
textField.borderStyle = .roundedRect
textField.placeholder = "What is your height?"
textField.becomeFirstResponder()

Now build and run we see an TextField..

Great next step, adding UIPickerView instead of regular keyboard, so add the following code to the end of viewDidLoad() method:

self.pickerView = UIPickerView(frame:CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 216))
self.pickerView.delegate = self
self.pickerView.dataSource = self
textField.inputView = self.pickerView
self.pickerView.backgroundColor = UIColor.white
textField.inputView = self.pickerView

We see some errors for not conforming to Picker View delegates. Lets add delegate methods one by one as follow:

First create extension as follow:

// MARK: - UIPickerView Methods
extension ViewController: UIPickerViewDelegate, UIPickerViewDataSource {

}

Next add following delegate & data-source methods to the above extension:

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

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    if component == 0 {
        return feetList.count
    }else if component == 2 {
        return inchList.count
    }else {
        return 1
    }
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
    if component == 0 {
        return "\(feetList[row])"
    }else if component == 1 {
        return "ft"
    }else if component == 2 {
        return "\(inchList[row])"
    }else {
        return "in"
    }
}

func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    let feetIndex = pickerView.selectedRow(inComponent: 0)
    let inchIndex = pickerView.selectedRow(inComponent: 2)
    textField.text = "\(feetList[feetIndex])'\(inchList[inchIndex])''"
}

That's it we are done with multi component pickerView.

Build and Run we see UIPickerView with multiple components as follow:

Download sample project with example :