IOS UIPickerView Example and Tutorial in Objective-C

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).

Creating the Xcode project

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

Adding and Connecting the UIPickerView

 Selected the Objects library tab and type in “pickerview”.

The list of elements will filter down to the UIPickerView element.

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.

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 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.

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

Creating the Data

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

ViewController.m

@interface ViewController ()
{
 NSArray *_pickerData;
}
@end
@implementation ViewController
- (void)viewDidLoad
{
     [super viewDidLoad];
// Initialize Data
_pickerData = @[@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", @"Item 6"];
}

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 viewDidLoad method.

Go to ViewController.h and make this class conform to the UIPickerViewDelegate andUIPickerViewDataSource protocols.

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.

#import <UIKit/UIKit.h> 
@interface ViewController : UIViewController<UIPickerViewDataSource, UIPickerViewDelegate> 
@property (weak, nonatomic) IBOutlet UIPickerView *picker; 
@end

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

- (void)viewDidLoad
{
[super viewDidLoad];

// Initialize Data
_pickerData = @[@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", @"Item 6"];
// Connect data
self.picker.dataSource = self;
self.picker.delegate = self;

}

Now we can implement the appropriate UIPickerView delegate methods.

Add the following methods to your ViewController.m 

#import "ViewController.h"
@interface ViewController (){
NSArray *_pickerData;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Initialize Data
  _pickerData = @[@"Item 1", @"Item 2", @"Item 3", @"Item 4", @"Item 5", @"Item 6"];

// Connect data
self.picker.dataSource = self;
self.picker.delegate = self;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
// The number of columns of data
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
 {
return 1;
}
// The number of rows of data
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
 {
return _pickerData.count;
}
// The data to return for the row and component (column) that's being passed in
 - (NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
 {
return _pickerData[row];
}
@end

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.Run flowing view-

Download this tutorial click here