PickerView

A picker view can be defined as the view that shows a spinning wheel or slot machine to display one or more set of values so that the user can spin the wheel to select one. It is an instance of UIPickerView class which inherits UIView.

As the name suggests, the picker view allows the user to pick an item from the set of multiple items. PickerView can display one or multiple sets where each set is known as a component. Each component displays a series of indexed rows representing the selectable items. The user can select the items by rotating the wheels.

Adding PickerView to iOS application

Search for the UIPickerView in the object library and drag the result to the storyboard.
Define the auto layout rules for the pickerview to govern its position and size on different screen devices.
Implement UIPickerViewDelegate and UIPickerViewDataSource protocol to govern the data and the appearance of PickerView.

UIPickerView methods

SN	Method	Description
1	func numberOfRows(inComponent: Int) -> Int	It represents the number of row shown in a single component of the pickerview.
2	func rowSize(forComponent: Int) -> CGSize	It represents the size of the row for the specified component in the iOS application.
3	func reloadAllComponents()	This function is used to reload all components of the picker view.
4	func reloadComponent(Int)	This function is used to reload the particular components of the picker view.
5	func selectRow(Int, inComponent: Int, animated: Bool)	This method is used to select a row in the specified component of the particular picker view.
6	func selectedRow(inComponent: Int) -> Int	This method is used to return the index of the specified component of the selected row in the picker view.
7	func view(forRow: Int, forComponent: Int) -> UIView?	This method is used to return the view that is used by the picker view for the given row and component.

UIPickerView Properties

SN	Property	Description
1	var dataSource: UIPickerViewDataSource?	It represents the data source for the specified picker view.
2	var delegate: UIPickerViewDelegate?	It represents the delegate for the picker view.
3	var numberOfComponents: Int	It represents the number of components in the picker view.

UIPickerViewDataSource

The UIPickerViewDataSource is used to leave the picker view with the number of components, and the number of rows in each component, for displaying the picker view data.

SN	Method	Description
1	func numberOfComponents(in: UIPickerView) -> Int	It represents an integer representing the number of components in the picker view in iOS.
2	func pickerView(UIPickerView, numberOfRowsInComponent: Int) -> Int	It represents an integer representing the number of rows in a particular application.

UIPickerViewDelegate

The object of UIPickerViewDelegate must conforms to UIPickerViewDelegate protocol to define the height, width, row title, and view content for the rows in each component.

SN	Method	Description
1	func pickerView(UIPickerView, rowHeightForComponent: Int) -> CGFloat	It is called by the picker view when it needs to set the height for a row in the pickerview component.
2	func pickerView(UIPickerView, widthForComponent: Int) -> CGFloat	It is called by the pickerview when it needs to set the width for the row in then pickerview component.
3	func pickerView(UIPickerView, titleForRow: Int, forComponent: Int) -> String?	It returns a string representing the title for the row in the pickerview component.
4	func pickerView(UIPickerView, attributedTitleForRow: Int, forComponent: Int) -> NSAttributedString?	It is called by the pickerview when it needs to set the styled title for any row in the pickerview component.
5	func pickerView(UIPickerView, viewForRow: Int, forComponent: Int, reusing: UIView?) -> UIView	It returns an object of UIView which is used for the specified row in the specified component.
6	func pickerView(UIPickerView, didSelectRow: Int, inComponent: Int)	This is called when the user selects a row in the pickerview component.

Example

This is a very simple example in which, we will add the pickerview to our interface. We will define the data source and delegate methods to set the data and appearance for the pickeview.

Interface Builder

To create the interface builder for this example, we will search for the picker view as shown in the below image.

The complete main.storyboard that is going to be used for this project is given in the following image in which, we have used a label and the pickerview to pick the item from.

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var pickerView: UIPickerView!
    var arr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        pickerView.dataSource = self
        pickerView.delegate = self
        
        for i in 0..<21{
            arr.insert("item "+(i+1).description, at: i)
        }
    }
}


extension ViewController : UIPickerViewDataSource{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return arr.count
    }
    
}


extension ViewController : UIPickerViewDelegate{
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return arr[row]
    }
}

Output:

Example 2

In this example, we will understand the proper functioning of pickerview. Here, we have created the labels and then pickerview. Each label is associated with the particular component.

Main.storyboard

In this example, we are prompting the user to pick the time from the picker view. Here, we will create separate component and labels to show the hours, minutes and seconds. We will change the label's text on selecting the appropriate value from the pickerview.

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var pickerView: UIPickerView!
    
    @IBOutlet weak var hourLbl: UILabel!
    @IBOutlet weak var minuteLbl: UILabel!
    @IBOutlet weak var secondLbl: UILabel!
    
    var hourArr = Array<String>()
    var minuteArr = Array<String>()
    var secondArr = Array<String>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        pickerView.delegate = self
        pickerView.dataSource = self
        for i in 0...23{
            hourArr.insert(i.description, at: i)
        }
        minuteArr = ["00","05","10","15","20","25","30","35","40","45","50","55"]
        secondArr = minuteArr
    }


}


extension ViewController : UIPickerViewDelegate{
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 3
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    
        var numberOfRows = 0
        switch component {
        case 0:
            numberOfRows = 24
        case 1:
            numberOfRows = 12
        case 2:
            numberOfRows = 12
            
        default:
            numberOfRows = 0
            
        }
        return numberOfRows
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        var title = ""
        switch component{
        case 0:
            title = hourArr[row]
        case 1:
            title = minuteArr[row]
        case 2:
            title = secondArr[row]
        
        default:
            title = ""
        }
        return title
    }
    
    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        switch component {
        case 0:
            hourLbl.text = hourArr[row]
        case 1:
            minuteLbl.text = minuteArr[row]
        case 2:
           secondLbl.text = secondArr[row]
        default:
            hourLbl.text = ""
            
        }
    }
}


extension ViewController : UIPickerViewDataSource{
    
}

Output: