iOS UIPickerView With Examples

In this tutorial, we’ll be discussing UIPickerView component in our iOS Application.

UIPickerView

UIPickerView is a UI element which is used to make a selection from multiple choices displayed in a vertical wheel. It is quite similar to what a dropdown is in Android or Web UI.

A wheel is known as a component in a UIPickerView.
A single UIPickerView can host one or more components.
Every component can contain independent data and can be selected and changed.
Typically, an array is used to display data in the rows of a UIPickerView component.

To show data in the UIPickerView you must adopt the protocol, UIPickerViewDataSource in your application and implement its required methods.
You must adopt the protocol, UIPickerViewDelegate in order to display the rows and also to allow making user selections.

If you don’t use the latter protocol in your ViewController, you might end up with something like this :

ios-uipickerview-wrong

Following are the four most important functions:

  • titleForRow is used to display the data in the UIPickerView component(s).
  • didSelectRow gets called whenever any of the UIPickerView rows is selected.

Before we get down to the complex stuff in a later section, let’s implement a simple UIPicker in our XCode Single View Application Project.

Project Storyboard

ios-uipickerview-storyboard

We’ve added a UIPickerView, a UILabel and a UITextField. We’ll display the selection from the UIPickerView in the UILabel. Later we’ll create another UIPickerView at the bottom to choose the text for the UITextField.

Code

The code for the ViewController.swift is given below:

topPickerView.delegate = self is the most important line. In a way it activates the Protocols on the UIPickerView instance.

We’re returning 2 components and we’ve populated each of them with a different array.

didSelectRow gets called whenever any of the rows are selected. BUT, it won’t call all of the components in the selection. For that, we use the selectedRow(inComponent:) to get the values from the selected rows of the components. These are then appended and displayed in a string.

Since the initial state doesn’t trigger didSelectRow, we call the method on both of our components in the viewDidLoad method.

The output when the above application was run on the iOS Simulator is:

ios uipickerview output 1

Now let’s create another UIPickerView which would open instead of the Keyboard.

UIPickerView in place of Keyboard

To add a UIPickerView in place of keyboard we just need to set the inputView property on the UITextField to the UIPickerView.

Following is the updated code of the ViewController.swift. All we need to do in the delegate methods is to check for the type of the UIPickerView instance in order to use both the UIPickerViews

The output of the above-updated application in action is :

ios uipickerview output 2

In order to dismiss the UIPickerView, we can set the touchesBegan method with view.endEditing(true).

An even better option is to add a UIToolbar with a dismiss button on the UIPickerView.

UIPickerView with UIToolbar

Add the following function in your ViewController.swift file

We’ve added a Button in the UIToolBar and set the Toolbar as the inputAccessoryView. That means it would be shown above the UIPickerView when the UITextField is clicked.

When the Done button is clicked, the following method would get executed:

This will close the input view.

Don’t forget to add the method createToolbar() in your viewDidLoad method.

The output of the application in action is:

ios uipickerview output 3

This brings an end to this tutorial. You can download the project from the link below:

By admin

Leave a Reply

%d bloggers like this: