UIPickerView in swift Introduction
UIPickerView is common control used to allow user select from a list of drop-down option in IOS apps. In this tutorial we will learn how to create UIPickerView in Swift4 language.
This UIPickerView tutorial is written in Swift 4 language so you need xcode 9 and higher version to run the sample code. This UIPickerView tutorial will be demonstrated using an example app and will be written using swift 4 language.
Steps to create UIPickerView in Swift
Step 1: Create a single view application and name it UIPickerView-Swift. Chose development language as swift.
Step 2: Open Main.storyboard and select iPhone SE as our default layout screen so that it can adjust UIPickerView control can adapt to higher device automatically as we are going to use Auto-layouts. Drag UIPickerView on to the view and add constraints to it as shown in the image.
Step 3: Open ViewController.swift and create IBOutlet for UIPickerView added to our view in Main.storyboard.
@IBOutlet weak var customPicker: UIPickerView!
Step 4: Connect IBOutlet created in last step to UIPickerView in Main.storyboard
Assigning delegartes and datasource for our UIPickerView
Step 5: In ViewController.swift, set UIPickerView delegates and datasource inside the viewDidLoad() function as shown in below code
customPicker.delegate=self
customPicker.dataSource = self
and also let the class know that we are going to implement UIPickerView delegate and datasource methods by writing the
UIPickerViewDelegate,
UIPickerViewDataSource against the line from where class or viewcontroller implementation starts. You can write delegate and datasource names using comma separation as shown below
import UIKit
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource
Step 6: Data-source and delegates methods are required to show data in UIPickerView and to know which row is selected by user. For this we create pickerDataSource array that contain list of countries.
var pickerDataSource = [“India”, “Australia”, “United Kingdom”, “South Africa”];
Writing of UIPickerViewDelegate, UIPickerViewDataSource for our UIPickerView
Step 7: Since we are with are datasource array it’s time to implement our UIPickerView delegates and datasource methods. Below is the code that does the same i.e implementation of UIPickerViewDelegate and UIPickerViewDataSource methods
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return pickerDataSource.count;
}
func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return pickerDataSource[row] as String
}
Step 8: Run your code and you will see UIPickerView showing list of countries we added to our pickerDataSource array.
UIPickerView row selection
Step 9: To check which UIPickerView row is selected by user we have to implement one more UIPickerViewDelegate method. Below is the code for the method that shows which row is selected by user
func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
print(pickerDataSource[row])
}
Step 10: Run your app now and when ever you spin the UIPickerView, the above delegate gets called each time, as soon as UIPickerView wheel stops thus giving us the user selection. You can check the console of your project.
Where to go from here
In this post you learned about how to create
UIPickerView in iOS app using
swift 4 language. We created a demo code as an example for creating UIPickerView in swift 4. You can download the sample code from
here. If you have any questions then feel free to comment.
Happy Coding 🙂
