iOS: Picker View
CollectionView
A picker view is a view that displays a slot machine or spinning wheel with one or more sets of values shown so that the user can spin the wheel and choose one. It is an instance of the UIView-derived UIPickerView class.
class UIPickerView : UIView
The picker view, as its name implies, lets the user select an item from a group of things. PickerView has the ability to show one or more sets, where each set is referred to as a component. The selected elements are represented by a sequence of indexed rows displayed in each component. By turning the wheels, the user can choose which objects to select.
Adding PickerView to iOS application
- Navigate to the object library, find the UIPickerView, and drag the result onto the storyboard.
- Establish the pickerview’s auto layout rules to control its size and placement on various screen sizes.
- To control the data and PickerView’s look, implement the UIPickerViewDelegate and UIPickerViewDataSource protocols.
UI Picker View 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. |
UI Picker View 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. |
UI Picker View Data Source
In order to display the picker view data, the UI Picker View Data Source is used to leave the picker view with the number of components and the number of rows in each component.
| 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. |
UI Picker View Delegate
For each component, the object of UI Picker View Delegate needs to adhere to the UI Picker View Delegate protocol in order to specify the row title, height, width, and view content.
| 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
Here is a very basic example of how to incorporate the pickerview into our user interface. To set the data and appearance for the pickeview, we will provide the data source and assign methods to it.
Interface Builder
We will look for the picker view, as indicated in the image below, in order to design the interface builder for this example.
The following image shows the entire main.storyboard that will be utilized for this project. To select the object, we have used a label and pickerview.
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
We shall comprehend how pickerview should operate properly using this example. Here, pickerview has been constructed after the labels. Every label has a specific component attached to it.
Main.storyboard
We are asking the user to select the time from the picker view in this example. Here, we’ll make a distinct component with labels to display the minutes, hours, and seconds. After choosing the correct value from the pickerview, we will alter the label’s text.
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
