UIPicker Control

In this post we will have a look at UIPickerView.

Design Phase: In this application what we will do is print the current value of the UIPickerView in the UILabel, here's a look at our final view

Step1: Open the xcode and create a window based application and add UIViewController subclass file with the name pickerviewController. In the .h file of the pickerviewController create the object of UIPickerView class and UILabel, also create two object of NSArray class so now your code should look like this

#import <UIKit/UIKit.h>

@interface pickerviewController : UIViewController <UIPickerViewDataSource,UIPickerViewDelegate>{

NSArray *months;

NSArray * number_array;

UILabel *monthlabel,*numberlabel,*currentMonthLabel,*currentNumberLabel;

UIPickerView *pickerView;

}

@end

In the above code I have took two objects of NSArray class so that I can add the values of those NSArray as a title for my picker object. 

Now you must have seen a weird line besides the UIViewController well those are nothing but protocols of the UIPickerView class which help the UIPicker to do some basic functionality like setting the number of components, setting the title for the rows of UIPicker etc.

Step 2: Go to the pickerviewController.m file and select the init method where you have to set the frame of the UIPickerView and the rest of the labels also you have to specify the location of the dataSource and Delegate method of the UIPicker controller that you will be using , so here’s how it looks

@implementation pickerviewController

 // The designated initializer.  Override if you create the controller programmatically and want to perform customization that is not appropriate for viewDidLoad.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {

    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

        // Custom initialization

months = [[NSArray alloc]initWithObjects:@"Jan",@"Feb",@"Mar",@"Apr",@"May",@"Jun",@"Jul",@"Aug",@"Sep",@"Oct",@"Nov",@"Dec",nil];

number_array = [[NSArray alloc]initWithObjects:@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",nil];

//setting the frame of the UIPickerView

pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 40, 320, 216)];

//setting the frame of the labels

currentMonthLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 313, 114, 23)];

currentNumberLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 344, 128, 23)];

monthlabel = [[UILabel alloc]initWithFrame:CGRectMake(179, 314, 86, 21)];

numberlabel =  [[UILabel alloc]initWithFrame:CGRectMake(179, 346, 86, 21)];

//setting the text of the labels

currentMonthLabel.text = @"Current Month";

currentNumberLabel.text = @"Current no";

monthlabel.text = @"Month";

numberlabel.text = @"Number";

//setting the dataSource and delegate properties of the UIPickerView

pickerView.dataSource = self;

pickerView.delegate = self;

//show pickers selection Indicator

pickerView.showsSelectionIndicator = YES;

    }

    return self;

}

Now into the loadView method we add these views to our current view

- (void)loadView {

[super loadView];

[self.view addSubview:currentMonthLabel];

[self.view addSubview:currentNumberLabel];

[self.view addSubview:monthlabel];

[self.view addSubview:numberlabel];

[self.view addSubview:pickerView];

}

Step 3: It’s time to see those delegate and datasource methods of UIPickerView for this go to the API reference and type UIPickerView in the search bar now you can see the UIPickerViewDatasource and Delegate protocols select any one of them in order to see their methods.

From the dataSource you have to select two methods that’s the numberOfComponentsInPickerView and pickerViewnumberOfRowsInComponent,

The first method that’s numberOfComponentsInPickerView will determine the number of parts that must be present in the UIPickerView and the second method pickerViewnumberOfRowsInComponent determines the number of rows that must be present in the components, lets see the implementation of those methods

//Pickers datasource method

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView

{

return 2;

}

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

{

if(component==0)

{

return [months count];

}

else if (component ==1)

{

return [number_array count];

}

return 0;

}

Now I have added two delegate methods for UIPickerView and the name of those methods are

pickerViewtitleForRowforComponent this method will set the title for the UIPickerView’s rows and the other delegate method called pickerView didSelectRow inComponent which performs an action whenever a particular component of the UIPickerView is selected so lets see the implementation of these methods

//Pickers Delegate Method

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

{

if (component ==0)

{

return [months objectAtIndex:row];

}

else if(component ==1)

{

return [number_array objectAtIndex:row];

}

return @"abc";

}

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

{

if(component==0)

{

monthlabel.text = [months objectAtIndex:row];

}

else if(component ==1)

{

numberlabel.text = [number_array objectAtIndex:row];

}

}

Step 4: Your all done by now just go to the AppDelegate.m file of your project and add this view to your window here’s how you do it

#import "PickerDemoAppDelegate.h"

#import "pickerviewController.h"

@implementation PickerDemoAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch

pickerviewController *pickerVC = [[pickerviewController alloc]init];

[window addSubview:pickerVC.view];

          [window makeKeyAndVisible];

}

Step 5: Build and Go, run the application and your all done, you will get the following output

I hope this post was helpful to you, Happy iCoding