How to create Picker View in iOS using Objective-C ?

Picker View in iOS (Objective-C)

In this tutorial, we will see how to implement Picker View in iOS application using Objective-C Language.

Picker View is used to show one or more set of values using spinning-wheel or slot-machine metaphor. Users can select values by rotating the wheels so that the desired row of values aligns with a selection indicator. The main use of this object is to select a value from multiple values as drop-down box in the web.

Step 1: Open Xcode and create new project by clicking on Single View Application template under iOS tab as shown in below image and click Next button. 

Step 2: Enter the product name as Picker View Example, select the Language as Objective-C and again click Next button as shown in below image. Later click Create button to create project appear on the next window.

Step 3: Adding UIPickerView & UILabel onto the View Controller

On your project, click on main.storyboard file available in the project navigator, and then select the UIPickerView from object library, drag into the superview of View Controller, it will look like below.

Step 4: Setting Up Constraints for Picker View & Label

To set the object in the centre of the view, by selecting the align button listed at the bottom of the storyboard view. 

Click the check box of Horizontal center in container and Vertical center in container then select the “Add 2 Constraints” button as shown in above screenshot.

Also add constraints for its height and width, click ‘PIN’ button to add those constraints as shown below. Now, it will work fine with all the iPhone and  iPad.

Step 5: Declaring property for Picker View & Label.

Select the Assistant Editor and create IBOutlet property for UIPickerView object by holding Ctrl button and select the UIPickerView object then drag into the ViewController.h file. It will open a popup view like below then enter the Name as ‘pickerView’ and click Connect.

In the same manner, set up the IBOutlet property for Label object & name it as ‘lblText’ and then hit ‘Enter’ button.

Step 6: Adding UIPickerView Datasource and Delegate Protocols

UIPickerView needs delegates and datasource which can be added in ViewController.h file as mentioned below.

We also have to set the value as self for UIPickerView delegate and datasource under viewDidLoad() method in ViewController.m file.

ViewController.h file:

@interface ViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>

ViewController.m file: 

Step 7: Creating Array & setting up protocol methods

In ViewController.h file, declaration of array is done.

@ interface ViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>

 {

NSArray *devices;

}

While in ViewController.m file, definition of array will be defined in viewDidLoad() method.

devices = @[@“iPhone”, @“iPad", @“iPod", @“iMac”, @“iWatch”, @“iTV”];

Now, we have to implement the appropriate UIPickerView datasource & delegate methods.

// datasource methods

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{

return 1;

}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

return devices.count;

} 

// delegate methods

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{

return devices[row];

}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

self.lblText.text = data[row];

}

The numberOfComponentsInPickerView() method is used to represent number of columns in the picker element. In our case, we return 1 because we need only one component here.

The numberOfRowsInComponent() method is used to represent number of rows of data in that particular component. Here we return devices.count which is 6 items in our case.

The titleForRow:forComponent: method is used to represent the data in specified rows in component. Simply return array[row] to display all items of array in picker view.

The didSelectRow:inComponent: method is called while selecting any row of Picker view, here in our case, we have selected ‘iPad’ item which is further showing in Label.

Here is the complete code of your project: 

Step 8: Finally, Build and Run the application where you will get the output like below.

Hope You Enjoyed !

You can also visit below link for this blog Video.

https://www.youtube.com/watch?v=mtrDQ_OopR0&t=311s