Multiple component UIPickerView in swift
Multiple component UIpickerView in swift has two columns or two wheels that the user manipulate to select items. Basically, UIPickerView act as dropdown that is a list full of options. In this tutorial, we will learn how to create multiple component UIPickerView using swift language.
Steps to create multiple component UIPickerView
1: Create a new xcode project by selecting “Single View App” template and name it “Multicomponent UIPickerView”.
Note: Please select development language as swift.
2: Open “Main.storyboard” file.
3: Drag UIPickerView and UILabel from object library. UILabel will be used to display selected value of uipickerview.
4: Add constraints to both UIPickerView and UILabel as shown below
5: Open “ViewController.swift” file. First declare IBOutlet’s for both controls, that were added in step number 3.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // ViewController.swift | |
| // Multicomponent UIPickerView | |
| // | |
| // Created by Aman Aggarwal on 11/8/17. | |
| // Copyright © 2017 iostutorialjunction.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. | |
| } | |
| } |
6: Open “Main.storyboard” and connect both the IBOutlet’s with their respective controls.
7: In order to show options inside UIpickerView, we are going to take two arrays. With these arrays we will populate our UIPickerView.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // ViewController.swift | |
| // Multicomponent UIPickerView | |
| // | |
| // Created by Aman Aggarwal on 11/8/17. | |
| // Copyright © 2017 iostutorialjunction.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. | |
| } | |
| } |
UIPickerViewDataSource and UIPickerViewDelegate
8: As we are done with are arrays, its time to write down UIPickerViewDataSource and UIPickerViewDelegate methods.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // ViewController.swift | |
| // Multicomponent UIPickerView | |
| // | |
| // Created by Aman Aggarwal on 11/8/17. | |
| // Copyright © 2017 iostutorialjunction.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. | |
| } | |
| } | |
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.
UIPickerView row selection(get value selected by user)
10: To detect a picker selection, we need to implement another delegate method named as “didSelectRow”. Below is the code
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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." | |
| } |
11: Run the code and you will see whenever you change UIPickerView values, label will get updated and display value as per user selection.
Complete code:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // ViewController.swift | |
| // Multicomponent UIPickerView | |
| // | |
| // Created by Aman Aggarwal on 11/8/17. | |
| // Copyright © 2017 iostutorialjunction.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.
Download source code for Multicomponent-UIPickerView.zip