Multiple component UIPickerView in swift 4

 

 

Multiple component UIPickerView in swift 4 - tutorial with sample code

 

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 behavior of UIPickerView, but sometimes during app development we required two or more components,  two or more lists to be displayed inside single UIPickerView. In this tutorial we are going to covered the same thing i.e. creating a UIPickerView with multiple components(Will create two components for our UIPickerView). So let us start the tutorial

 

Steps to create Multi-Component UIPickerView

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.
 
Select Singleview app template in xcode 9
 
 
Step 2: Open “Main.storyboard” file.
 
Select 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.
 
Drag and drop UIPickerView and UIlabel on to ViewController from object library
 
 
Step 4: Add constraints to UIPickerView and UILabel as shown in the image.
 
Constraints given to UILabel

 

Constraints given to UIPickerView
 
 
Step 5: Open “ViewController.swift” file and first declare our IBOutlet’s to both the controls, dragged in step 3.
 

 
 
Step 6: Open “Main.storyboard” and connect both  IBOutlet’s with the respective objects.
Connect IBOutlet with the UIPickerView and UILabel

 

 
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.
 

 
 

 

UIPickerViewDataSource and UIPickerViewDelegate

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

 

 
Step 9: If you run the code, you will see the following output.
If you run the code till now you will see output like this

 

 
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)

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

 

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

Complete code: 

 

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