Friday, 27 November 2015

UIPickerView with Done button in Objective C

In this post i will tell you about UIPickerView . UIPickerView is used when we need to select one entry from the multiple values (or entries).

A UIPickerView looks like this :- 







We can scroll the contents in the pickerView and select them by clicking on Done button .


UIPickerView is added as the input view to the UITextField . 

I will tell you step by step how to implement UIPickerView.



Step 1 :  Create a UITextField 

@interface ViewController ()
{
  UITextField *tryTF;

}

// I have made UITextField Global . As I need to access it in other method.



Now add textfield code in the implementation file

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    
    demoArray = @[@"S",@"A",@"U",@"R",@"A",@"B",@"H"];
    
    tryTF = [[UITextField alloc]initWithFrame:CGRectMake(30, 70, 120, 60)];
    tryTF.placeholder = @"Select data";
    tryTF.layer.borderColor = [[UIColor blackColor]CGColor];
    tryTF.layer.borderWidth = 0.3;
    [self.view addSubview:tryTF];

}




Step 2 :  Add UITextField Delegate

Add UITextField Delegate in .h file (interface file) like this :- 



#import <UIKit/UIKit.h>


@interface ViewController : UIViewController<UITextFieldDelegate>






Step 3 :  Add UIPickerView and toolbar to the project


After adding UIPickerView and toolbar , your .m file will look like this.



#import "ViewController.h"

@interface ViewController ()
{
   UIPickerView *pickerDemo;
    
    UITextField *tryTF;
    
    NSString *textStr;
    
    UIToolbar *toolBar;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    

    
    tryTF = [[UITextField alloc]initWithFrame:CGRectMake(30, 70, 120, 60)];
    tryTF.placeholder = @"Select data";
    tryTF.layer.borderColor = [[UIColor blackColor]CGColor];
    tryTF.layer.borderWidth = 0.3;
    [self.view addSubview:tryTF];
    
    pickerDemo = [[UIPickerView alloc]init];
    pickerDemo.dataSource = self;
    pickerDemo.delegate = self;
    
    
    toolBar= [[UIToolbar alloc] initWithFrame:CGRectMake(0,0,320,44)];
    [toolBar setBarStyle:UIBarStyleDefault];
    UIBarButtonItem *barButtonDone = [[UIBarButtonItem alloc] initWithTitle:@"Done"
                                                                      style:UIBarButtonItemStyleDone target:self action:@selector(changeDateFromLabel:)];
    toolBar.items = @[barButtonDone];
    barButtonDone.tintColor=[UIColor blackColor];
    
    tryTF.inputView = pickerDemo;
    tryTF.inputAccessoryView = toolBar;
}





Step 4 :  Add UIPickerView dataSource and Delegate methods :

@interface ViewController : UIViewController<UITextFieldDelegate,UIPickerViewDataSource,UIPickerViewDelegate>





Step 5 :  Add a global Array 

Add a global array which contains the list of items you need to show in your UIPickerView :


@interface ViewController ()
{
     NSArray *demoArray;

}


// I have made NSArray Global . As I need to access it in other methods.

 (void)viewDidLoad {
    [super viewDidLoad];

    demoArray = @[@"S",@"A",@"U",@"R",@"A",@"B",@"H"];
}





Step 6 : Add Datasource and Delegates Of UIPicker View

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    
    return 1;
}


-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
  
    return demoArray.count;
}


-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSString *title = [demoArray objectAtIndex:row];
    return title;
}


-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    textStr = [demoArray objectAtIndex:row];
}





Step 7 : Add Done Button Action :- 


- (void)changeDateFromLabel:(id)sender
{
    NSLog(@"DONE");
    tryTF.text = textStr;
    [tryTF resignFirstResponder];
  
}


This will Add UIPickerView to your project with Done button . 


Thank you 

:)

No comments:

Post a Comment