UIPickerView example Swift – IOS Tutorial

UIDatePicker-Swift-Tutorial

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.
Create-Single-view-application-UIPickerView-Tutorial-Swift-ios
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.
Adding-constraints-to-UIPickerView-Tutorial-Swift-ios
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
Connecting-IBOutlet-to-UIPickerView-Tutorial-Swift-ios

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 🙂