iOS9 UIPickerView Example and Tutorial in Swift and Objective-C

uipickerview_example

Last Updated August 26 2015

In this tutorial, we’ll walk though a basic implementation example of the UIPickerView which is a UI element that can be used to make a selection from multiple choices (similar to what a dropdown does for a webpage).

UIPickerView in action

Creating the Xcode project

We’ll start with creating an Xcode single view application project to demonstrate the UIPickerView.

Creating a new single view application

For the project settings, you can enter any sort of details since this will just be for demo purposes.
This is what I’ve got:

New project settings for Xcode project

Since this article is not covering size classes and auto-layout, we want to make sure that our UIPickerView is well positioned in the Simulator. To accomplish this, go to the newly created Main.Storyboard file and change the wAny|hAny to wCompact|hAny to work on an iPhone.

Adding and Connecting the UIPickerView

From the file navigator on the left, select Main.Storyboard and the editor will change to a design view where you can see what your view will look like.

On the right hand side, you’ve got your Attribute Inspector View (top half) and your Library View (bottom half). If you don’t see this right hand pane, click on the icon in the upper right corner to toggle the pane.

Make sure you’ve selected the Objects library tab and type in “pickerview”.
The list of elements will filter down to the UIPickerView element.

Adding the uipickerview uielement from the storyboard

Once you’ve found it, drag it onto your view. If you’re unable to drop the element onto your view, you might be in zoomed out view. In that case, just double click any white area in the storyboard to zoom back in and you’ll be able to drop the UIPickerView element onto your view.

UIPickerView in the view

Now that we’ve got the Picker View element on the view in the storyboard, we’ll need to expose this element to be accessible via code in the ViewController.

Click the Assistant Editor button and make sure that the storyboard is in the left pane and that ViewController.swift is in the right.

Then hold down control and click the UIPickerView element in the storyboard and drag your mouse over to the right side. Drop it in between the class ViewController and override func viewDidLoad.

Connecting the UIPickerView to IBOutlet

A small dialog will pop up to ask you for a name for this IBOutlet property. Just name it “picker”.

Naming the IBOutlet

After doing that, your ViewController.swift file will look like this:

IBOutlet property in ViewController

Now we can reference that Picker View element from code in the ViewController using “self.picker”.

Keep in mind that if you delete this IBOutlet property, you also have to break the connection from the storyboard or else your app will crash.
You can break the connection by right-clicking the Picker View element from the storyboard and looking for the connection to the deleted property and just clicking the “x” next to that connection.

Run your app now to make sure it doesn’t crash.

Creating the Data

Let’s create the data that we’re going display in the Picker control.


Swift

In ViewController.swift, add the following code.

In Line 5, we’re declaring a new Array instance variable to store the list of data. By declaring it here as an instance variable, we can access this variable from any method in this class and the variable will hold its value for the duration of the objects lifetime.

Now that the pickerData was initialized, we will add some data in Line 12, which is part of the viewDidLoad method.


Objective-C

ViewController.m

In Line 3, we’re declaring a new NSArray instance variable to store the list of data. By declaring it here as an instance variable, we can access this variable from any method in this class and the variable will hold its value for the duration of the objects lifetime.

However, we can’t initialize variables in the interface so in Line 14, we initialize the instance variable inside the viewDidLoad method.


Connecting the Data

Now that we’ve got the UIPickerView element in our storyboard and made it accessible from code, we can add the code to connect the data to it!


Swift

Go to ViewController.swift and make this class conform to the UIPickerViewDelegate and UIPickerViewDataSource protocols.

Line 3 below is what you want to modify. By doing this, we’re saying that the ViewController class conforms to the appropriate “rules” which allows it to be a data source for the UIPickerView class and allows it to handle events raised by the UIPickerView class. Also, this code actually sets this ViewController instance as the delegate (line 14) and datasource (line 15) of the Picker View we added to the storyboard.


Objective-C

If you’re using Objective-C, this is what you’d do instead:
Go to ViewController.h and make this class conform to the UIPickerViewDelegate and UIPickerViewDataSource protocols.

Line 3 below is what you want to modify. By doing this, we’re saying that the ViewController class conforms to the appropriate “rules” which allows it to be a data source for the UIPickerView class and allows it to handle events raised by the UIPickerView class.

Now go to ViewController.m and in the viewDidLoad method, add the following lines of code:

Objective-C


Now we can implement the appropriate UIPickerView delegate methods.


Swift

Add the following methods to your ViewController.swift after the “didReceiveMemoryWarning” method.


Objective-C

If you’re using Objective-C, do this instead:

Add the following methods to your ViewController.m between the “didReceiveMemoryWarning” method and the “@end” keyword.


The numberOfComponentsInPickerView method asks for the number of columns in your picker element. For example, if you wanted to do a picker for selecting time, you might have 3 components; one for each of hour, minutes and seconds.

The numberOfRowsInComponent method asks for the number of rows of data in your UIPickerView element so we return the array count.

The pickerView:titleForRow:forComponent: method asks for the data for a specific row and specific component.

With this data set, we only have one column so we’re just considering which row its asking for and returning the data item that corresponds to that row.

UIPickerView with one column of data in the iOS simulator

Adding more components

Let’s add more components to our data!


Swift

In ViewController.swift, let’s change the line of code where we append our data. Instead of just an array of string items, let’s do an array of array items.

Pay specific attention to line 5 where the array of string is held by another array: var pickerData: [[String]] = [[String]]()


Objective-C

ViewController.m


We also have to change the numberOfComponentsInPickerView method:


Swift


Objective-C


Let’s change the pickerView:titleForRow:forComponent: method too:


Swift


Objective-C


UIPickerView with multiple columns and components

Detecting UIPickerView selections

In order to detect what the user has selected with the UIPickerView, we only have to implement one more delegate method:


Swift


Objective-C


Conclusion

The UIPickerView is the iOS standard for selecting from multiple options. As you can see from this simple UIPickerView example, it can be difficult for beginners to understand if they haven’t learned about delegation yet. However, once you get the hang of using delegates then it makes sense and you can take advantage of other UIElements which leverage delegation too.

36 Shares
Share27
Tweet
+15
Share4