MultipleComponent UIPickerView in Swift 4

MultipleComponent UIPickerView

Multiple component UIPickerView in swift

As the title of this post says, Multiple component UIPickerView in swift. So in this tutorial, we are going to learn, how to create multiple component or multi component UIPickerView in swift. Generally a UIPickerView contains only single component, it is the default behaviour of UIPickerView, but sometimes during app development we required two components or two lists to be displayed inside single UIPicker. In this tutorial we are going to covered the same thing. So let us start

Step 1: Create a new Xcode project by selecting "Single View  App" template and name it "Multicomponent UIPickerView". Note: Please select development language as swift.

Step 2: Open "Main.storyboard" file.

Step 3: Drag an UIPickerView object  from object library and an UILabel, so that we can display our output of the picker selection.

Step 4: Add constraints to UIPickerView and UILabel as shown in the image.

Step 5: Open "ViewController.swift" file and first declare our IBOutlet's to both the controls, dragged in step 3.

	//
	// ViewController.swift
	// Multicomponent UIPickerView
	//
	// Created by Sanjay Vaghasiya on 11/8/17.
	// Copyright © 2017 iostutorialpoints.blogspot.com . All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var picker: UIPickerView!
	@IBOutlet weak var lblPickerSelection: UILabel!
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	}
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Step 6: Open "Main.storyboard" and connect both  IBOutlet's with the respective objects.

Step 7: In order to populate UIPickerView with our desired values or options we will take two arrays. With these arrays we will populate our UIPickerView.

	//
	// ViewController.swift
	// Multicomponent UIPickerView
	//
	// Created by Sanjay Vaghasiya on 11/8/17.
	// Copyright © 2017 iostutorialpoints.blogspot.com . All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController {
	@IBOutlet weak var picker: UIPickerView!
	@IBOutlet weak var lblPickerSelection: UILabel!
	var countriesArray:[String] = Array()
	var stateNumbersArray:[String] = Array()
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	countriesArray.append("USA")
	countriesArray.append("UK")
	countriesArray.append("NZ")
	stateNumbersArray.append("10")
	stateNumbersArray.append("20")
	stateNumbersArray.append("30")
	}
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Step 8: As we are done with are arrays, its time to write down UIPickerViewDataSource and UIPickerViewDelegate methods.

	//
	// ViewController.swift
	// Multicomponent UIPickerView
	//
	// Created by Sanjay Vaghasiya on 11/8/17.
	// Copyright © 2017 iostutorialpoints.blogspot.com All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource // tells our clas that we are going to implement UIPickerViewDelegate, UIPickerViewDataSource methods {
	@IBOutlet weak var picker: UIPickerView!
	@IBOutlet weak var lblPickerSelection: UILabel!
	var countriesArray:[String] = Array()
	var stateNumbersArray:[String] = Array()
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	countriesArray.append("USA")
	countriesArray.append("UK")
	countriesArray.append("NZ")
	stateNumbersArray.append("10")
	stateNumbersArray.append("20")
	stateNumbersArray.append("30")
	// assign our class for delegates and datasource methods for the picker
	picker.delegate = self
	picker.dataSource = self
	}
	//MARK:- UIPickerViewDataSource methods
	func numberOfComponents(in pickerView: UIPickerView) -> Int {
	return 2
	}
	func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
	if component == 0 {
	return countriesArray.count
	}
	return stateNumbersArray.count
	}
	//MARK:- UIPickerViewDelegates methods
	func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
	if component == 0 {
	return countriesArray[row]
	}
	return stateNumbersArray[row]
	}
	//MARK:- didReceiveMemoryWarning
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Step 9: If you run the code, you will see the following output.

On changing values, you will notice that label value will not be updated. So let us fix this problem.

Step 10: To detect a picker selection, we need to implement another delegate method named as "didSelectRow". Below is the code 

	func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
	let countrySelected = countriesArray[pickerView.selectedRow(inComponent: 0)]
	let stateNumberSelected = stateNumbersArray[pickerView.selectedRow(inComponent: 1)]
	lblPickerSelection.text = "\(countrySelected) has \(stateNumberSelected) number of states."
	}

Step 11: Run the code and you will see whenever you change  UIPickerView values, label will get updated.

Complete code: 

	//
	// ViewController.swift
	// Multicomponent UIPickerView
	//
	// Created by Sanjay Vaghasiya on 11/8/17.
	// Copyright © 2017 iostutorialpoints.blogspot.com All rights reserved.
	//
	import UIKit
	class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
	@IBOutlet weak var picker: UIPickerView!
	@IBOutlet weak var lblPickerSelection: UILabel!
	var countriesArray:[String] = Array()
	var stateNumbersArray:[String] = Array()
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view, typically from a nib.
	countriesArray.append("USA")
	countriesArray.append("UK")
	countriesArray.append("NZ")
	stateNumbersArray.append("10")
	stateNumbersArray.append("20")
	stateNumbersArray.append("30")
	picker.delegate = self
	picker.dataSource = self
	}
	//MARK:- UIPickerViewDataSource methods
	func numberOfComponents(in pickerView: UIPickerView) -> Int {
	return 2
	}
	func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
	if component == 0 {
	return countriesArray.count
	}
	return stateNumbersArray.count
	}
	//MARK:- UIPickerViewDelegates methods
	func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
	if component == 0 {
	return countriesArray[row]
	}
	return stateNumbersArray[row]
	}
	func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
	let countrySelected = countriesArray[pickerView.selectedRow(inComponent: 0)]
	let stateNumberSelected = stateNumbersArray[pickerView.selectedRow(inComponent: 1)]
	lblPickerSelection.text = "\(countrySelected) has \(stateNumberSelected) number of states."
	}
	//MARK:- didReceiveMemoryWarning
	override func didReceiveMemoryWarning() {
	super.didReceiveMemoryWarning()
	// Dispose of any resources that can be recreated.
	}
	}

Where to go from here:

In this tutorial, we learned how to create and use multiple component UIPickerView or multi component picker in swift language (swift3 / swift4).

Download source code from Multicomponent-UIPickerView.zip

If you any questions or doubts then please feel free to post your doubts in the comment section and will try to answer as soon as we can. Thank you